SwiftUI Project8 : WebView and Image

 

Project8

 

이번에는 WebViewImage를 사용하여 간단하게 위와 같은 화면을 구성해보겠습니다.

Circle 이미지뷰 생성

우선 새로운 SwiftUI파일을 생성하고 이름은CircleImageView라고 정해주겠습니다. 그리고 아래와 같은 이미지를 만들어 주겠습니다.

seogun.png

0.62MB

원하는 이미지 파일을 Assets에 추가해주고 다음과 같이 코드를 작성해줍니다.

//CircleImageView

struct CircleImageView: View {
    var body: some View {
        VStack {
            Image("seogun")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 200, height: 200)
            
                .clipShape(Circle())
                
                .shadow(color: .gray, radius: 10, x: 5, y: 10)
                
                //이미지 위에 Circle을 씌워줌
                .overlay(Circle().opacity(0.1))
                //그 위에 테두리를 생성
                .overlay(Circle().stroke(Color.yellow, lineWidth: 10))
        }
    }
}

.overlay()를 사용하면 어떠한 도형 또는 이미지 위에 새로운 것을 덧씌울 수 있습니다. .opacity()는 투명도를 설정하는 수정자 입니다.

NavigationLink 버튼 생성

CircleImageView를 만들어줬으니 이제 ContentView에 호출해주겠습니다.

//ContentView

struct ContentView: View {
    var body: some View {
        
        VStack{
            CircleImageView()
                .padding()
        }
    }
}

성공적으로 이미지를 불러왔고, 이제 이미지 아래에 사이트로 바로갈 수 있는 버튼을 생성해줄껀데 NavigationView와 NavigationLink를 사용해주겠습니다. 또한 WebView를 통해 외부 브라우저가 아닌 앱 내에서 사이트로 이동하도록 해주겠습니다.

 

[SwiftUI 기초/View layout] - SwiftUI : NavigationView / NavigationLink

[SwiftUI 기초/WebView] - SwiftUI : WebView 생성(코드)

 

//WebView

import SwiftUI
import WebKit
 
struct MyWebView: UIViewRepresentable {
   
    
    var urlToLoad: String
    
    //ui view 만들기
    func makeUIView(context: Context) -> WKWebView {
        
        //unwrapping
        guard let url = URL(string: self.urlToLoad) else {
            return WKWebView()
        }
        //웹뷰 인스턴스 생성
        let webView = WKWebView()
        
        //웹뷰를 로드한다
        webView.load(URLRequest(url: url))
        return webView
    }
    
    //업데이트 ui view
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<MyWebView>) {
        
    }
}
 
//Canvas 미리보기용
struct MyWebView_Previews: PreviewProvider {
    static var previews: some View {
        MyWebView(urlToLoad: "https://www.naver.com")
    }
}

이미지 아래 버튼 생성

이제 이미지 아래에 링크버튼을 만들어 주겠습니다. 

//ContentView

struct ContentView: View {
    var body: some View {
       //1
       NavigationView {
            //2
            VStack{
                
                CircleImageView()
                    .padding()
                
                //3
                HStack {
                   //링크에 .edgesIgnoringSafeArea(.all)를 추가해줘야 한다.
                    NavigationLink(destination: MyWebView(urlToLoad: "https://seons-dev.tistory.com/")
                                    .edgesIgnoringSafeArea(.all)) {
                        
                        //4 버튼 스타일링
                        Text("사이트 바로가기")
                            .fontWeight(.bold)
                            .font(.system(size: 15))
                            .foregroundColor(.white)
                            .padding()
                            .background(Color(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)))
                            .cornerRadius(20)
                    }
                    //5
                    NavigationLink(destination: MyWebView(urlToLoad: "https://www.youtube.com/channel/UCTO0W79pwZtGNMo0pTCkodQ")
                                    .edgesIgnoringSafeArea(.all)) {
                        //6
                        Text("구독하러가기")
                            .fontWeight(.bold)
                            .font(.system(size: 15))
                            .foregroundColor(.white)
                            .padding()
                            .background(Color(#colorLiteral(red: 0.9529411793, green: 0.6862745285, blue: 0.1333333403, alpha: 1)))
                            .cornerRadius(20)
                    }
                }
            }
        }
    }
}

아이콘 뒤에 배경 넣기

이제 위 이미지 뒤에 배경을 넣어주고 그 배경에 아이콘을 겹쳐주도록 하겠습니다.

VStack을 ZStack으로 감싸주고 이미지를 추가해줍니다.

backgroundImage.jpg

0.93MB

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Image("backgroundImage")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 600)
                    .clipped()
                    //배경을 위쪽으로 배치함
                    .offset(y: -300)
                    .edgesIgnoringSafeArea(.all)
                
                VStack{
                    
                    CircleImageView()
                        .padding()
                   
                   HStack {
                      ...
                   }
                } 
                //Offset으로 아이콘 위치를 맞춰준다.
                .offset(y: -90)
            }
        }
    }
}

 

 

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_image_TUT

이 글도 읽어보세요

[SwiftUI 기초/View layout] - SwiftUI : NavigationView / NavigationLink

[SwiftUI 기초/Image] - SwiftUI : Image