SwiftUI 3.0(iOS 15)- AsyncImage, Background Materials

🔷 AsyncImage

• URL 에 있는 image 를 async 로 image 를 다운받아서 UI 에 처리합니다

/*
 async Image error 처리 ImagePhase
 case empty -> No image is loaded.
 case success(Image) -> An Image successfully loaded.
 case failure(Error) -> An image failed to load with an error
 */

struct AsyncImageBootCamp: View {
let url = URL(string: "https://picsum.photos/200")

var body: some View {

VStack (spacing: 20) {
// 일반적인 AsyncImage 사용 with ProgressView()
	AsyncImage(url: url) { image in
		image
			.resizable()
			.scaledToFit()
			.frame(width: 200, height: 200)
			.cornerRadius(20)
	} placeholder: {
		ProgressView()
	}

	Divider()

	// switch 를 통한 Image error 처리
	AsyncImage(url: url) { phase in
		switch phase {
		case .empty:
			ProgressView()
		case .success(let image):
			image
				.resizable()
				.scaledToFit()
				.frame(width: 200, height: 200)
				.cornerRadius(20)
		case .failure:
			Image(systemName: "questionmark")
				.font(.headline)
		default:
			Image(systemName: "questionmark")
				.font(.headline)
			}
		}
		}
	}
}

🔶 image 가 성공적으로 load 되었을때

🔶 image 가 load 가 안될때 (error 처리)

🔷 Background Materials

iOS 15 apple introduced system materials to swiftUI. It was already had system materials in UIKIT for a long time now.

This is basically background that it can put onto views that they are not necessarily specific colors but they are system materials transparency to tem so it looks like a very natural looking background

it you put like an image or something behind the material it will bleed through a little bit so it will look very natural

🔶 Materials Options

struct BackgroundMaterialExample: View {
	let url = URL(string: "https://picsum.photos/400")

	var body: some View {
		VStack{
			Spacer()

			VStack {
				RoundedRectangle(cornerRadius: 4)
					.frame(width: 50, height: 4)
					.padding()

				Spacer()
				Text("Example Background Material")
					.font(.headline)
					.vCenter()
			} //: VSTACK
			.frame(height: 350)
			.frame(maxWidth: .infinity)
			.background(.ultraThinMaterial)
			.cornerRadius(20)
		} //: VSTACK
		.background(
			AsyncImage(url: url) { image in
				image
					.resizable()
					.scaledToFill()
			} placeholder: {
				ProgressView()
			}
		)
		.ignoresSafeArea()
	}
}

---

🗃 Reference

What’s New in SwiftUI 3.0? - https://betterprogramming.pub/whats-new-in-swiftui3-ios15-fa0e0d62235b

Swiftful Thinking Bootcamp - https://www.youtube.com/watch?v=Qk5s-6ldNfA&list=PLwvDm4VfkdphqETTBf-DdjCoAvhai1QpO&index=55