SwiftUI 튜토리얼(6)

Image 불러오기

• 원하는 이미지를 Assets에 옮긴 후에 universal을 지워주고 iphone으로 설정

---

• 코드로 이미지의 옵션을 설정

Image("myImage")
            .resizable() // 이미지 재정렬
            .aspectRatio(contentMode: .fill) // 비율을 원하는대로 설정(.fit, .fll)
            .edgesIgnoringSafeArea(.all) // 채우고 싶은 부위를 설정 가능(.all, .bottom, .top)

Image 동그랗게 만들기

Image("myImage")
            .resizable() // 이미지 재정렬
            .scaledToFill() // = aspaspectRatio(contentMode: .fill)
            .frame(width: 300, height: 300) // 이미지에 대한 프레임을 설정
            .clipShape(Circle()) // 동그랗게 잘라내기
            .shadow(color: .gray, radius: 2, x: 5, y: 10)
            .overlay(Circle().foregroundColor(.black)
                .opacity(0.6)
            )
            .overlay(
                Circle().stroke(Color.red, lineWidth: 10) // 선의 색이 빨강색이고 굵기가 10인 원을 덧씌움
                    .padding(10)
            )
            .overlay(
                Circle().stroke(Color.yellow, lineWidth: 10)
                    .padding(30)
            )
            .overlay(
                Text("안녕")
                    .foregroundColor(.white)
                    .font(.system(size: 50))
                    .fontWeight(.bold)
            )
//            .aspectRatio(contentMode: .fill) // 비율을 원하는대로 설정(.fit, .fll)
//            .clipped() // 이미지의 프레임에 맞게 잘라내기
            .edgesIgnoringSafeArea(.all) // 채우고 싶은 부위를 설정 가능(.all, .bottom, .top)

ContentView에서 사용하기

struct ContentView: View { // View
    var body: some View {
        NavigationView {
            VStack{
                Image("myImage")
                    .frame(height: 10)
                    .offset(y: -1100)
                CircleImageView()
                HStack {
                    NavigationLink(destination:
                                    MyWebView(urlToLoad:
                                    "https://www.youtube.com/watch?v=VBaWe1izUHM")
                                    .edgesIgnoringSafeArea(.bottom)){
                        // 웹뷰로 유튜브창을 띄우는데 밑에만 꽉차게
                        Text("노래 들으러 가기")
                            .font(.system(size: 20))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.red)
                            .cornerRadius(20)
                    }
                    NavigationLink(destination:
                                    MyWebView(urlToLoad:
                                    "https://www.youtube.com/watch?v=xaHIBS6u4Rg")
                                    .edgesIgnoringSafeArea(.bottom)){
                        Text("영상 보러가기")
                            .font(.system(size: 20))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.orange)
                            .cornerRadius(20)
                    }
                } // HStack
                .padding(20)
            }
        }
    }
}