[SwiftUI fundamental Tutorial] WebView

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다. 

 

 

 

인터넷을 사용하기 위해서 Info.plist에서 권한을 줘야 함

 

 

 

 

 

웹뷰 띄우기

import SwiftUI
import WebKit

struct MyWebview: UIViewRepresentable {
    
    //열려고 하는 url 주소의 멤버변수
    var urlToLoad: String
    
    //UIView 만들기
    func makeUIView(context: Context) -> WKWebView { //웹뷰 반횐
            
            
            guard let url = URL(string: self.urlToLoad) else{
                return WKWebView()
            }
            
            // 웹뷰 인스턴스 생성
            let webview = WKWebView()
            
            //웹뷰 로드
            webview.load(URLRequest(url: url))
            
            //웹뷰 반환
            return webview
        }
        
    //업데이트 UIView
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<MyWebview>) {
    } 
}


struct MyWebview_Previews: PreviewProvider {
    static var previews: some View {
        MyWebview(urlToLoad: "https://www.naver.com")
    }
}

UIViewController와 SwiftUI는 호환 가능함

SwiftUI의 구조는 class가 아니라 struct로 구성되어 있음

 

UIkit의 UIView를 사용할 수 있도록 함

struct MyWebview: UIViewRepresentable{

 

}

 

SwiftUI에서 ViewController를 사용하고 싶을 때는 

struct MyWebview: UIViewControllerRepresentable{

 

}

 

 

UI View 만들기 (기본형)

func makeUIView(context: Context) -> some UIView{

    code

}

매개변수: Context, 반환 값: some UIView

(위 코드에서는 웹 뷰를 반환하기 위해서 반환 값 some UIView가 아닌 WKWebView를 반환)

 

 

가져온 self.urlToLoad로 생성한 URL의 값이 비어있다면 return WKWebView 값이 있다면 아래의 webview.load에 값을 넣어 줌

guard let url = URL(string: self.urlToLoad) else{
            return WKWebView()

}

 

 

UI View 업데이트 함수 부분

func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<MyWebview>) {

}

매개변수: (웹뷰를 반환한 것이 WKWebView 형태) WKWebView

반환 값: UIViewRepresentableContext (그냥 context로 반환하면 안됨)

 

 

 

 

웹뷰 띄우기

 

 

 

ContentView에서 웹뷰 보여주기

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        
        NavigationView{
            
            HStack{
                
                NavigationLink(
                    destination: MyWebview(urlToLoad: "http://www.naver.com")){
                        
                    //버튼 자체에 대한 코드
                    Text("네이버")
                        
                }
                
                NavigationLink(
                    destination: MyWebview(urlToLoad: "http://www.daum.net")){
                        
                    Text("다음")
                       
                }
                
                NavigationLink(
                    destination: MyWebview(urlToLoad: "http://www.google.com")){
                        
                    Text("구글")
                       
                }
                    
            }
            
        }
        
    }
}

 

 

 

네비게이션 부분(위 코드에서는 NavigationLink)은 NavigationView로 감싸줘야 함

 

NavigationLink의 destination: 종착지에서 보여주는 뷰, MyWebView 자체를 띄워주면 됨 

 NavigationLink(

                    destination: MyWebview(urlToLoad: "http://www.naver.com")){

}

 

 

 

 

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        
        NavigationView{
            
            HStack{
                
                NavigationLink(
                    destination: MyWebview(urlToLoad: "http://www.naver.com")
                        .edgesIgnoringSafeArea(.all)){
                    Text("네이버")
                        .font(.system(size: 20))
                        .fontWeight(.bold)
                        .padding(20)
                        .background(Color.green)
                        .foregroundColor(Color.white)
                        .cornerRadius(20)
                }
                
                NavigationLink(
                    destination: MyWebview(urlToLoad: "http://www.daum.net").edgesIgnoringSafeArea(.all)){
                    Text("다음")
                        .font(.system(size: 20))
                        .fontWeight(.bold)
                        .padding(20)
                        .background(Color.yellow)
                        .foregroundColor(Color.white)
                        .cornerRadius(20)
                }
                
                NavigationLink(
                    destination: MyWebview(urlToLoad: "http://www.google.com").edgesIgnoringSafeArea(.all)){
                    Text("구글")
                        .font(.system(size: 20))
                        .fontWeight(.bold)
                        .padding(20)
                        .background(Color.blue)
                        .foregroundColor(Color.white)
                        .cornerRadius(20)
                }
                    
            }
            
        }
        
    }
}

상단에 화면이 잘려서 보여주는 부분 해결

destination(다음에 보여줄 화면)에 .edgesIgnoringSafeArea(.all) 설정