IOS/SwiftUI

(SwiftUI)06.CircleImage

프린이0218 2021. 4. 27. 14:44

-contentVIew-

//
//  ContentView.swift
//  Image_tutorial
//
//  Created by devdepot on 2021/04/27.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            VStack{
                Image("MyImage")
                    .frame(height:10)
                    .offset(y:-1100)
                CircleImageVIew().padding()
                HStack{
                    NavigationLink(
                        destination: MyWebView(urlToLoad: "https://www.naver.com")
                            .edgesIgnoringSafeArea(.all)
                    ){
                        Text("네이버로 가기")
                            .font(.system(size: 20))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.red)
                            .cornerRadius(20)
                    }
                    
                    NavigationLink(
                        destination: MyWebView(urlToLoad: "https://www.google.com")
                            .edgesIgnoringSafeArea(.all)
                    ){
                        Text("구글로 가기")
                            .font(.system(size: 20))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .padding()
                            .background(Color.orange)
                            .cornerRadius(20)
                    }
                }   //Hstack
                .padding(50)
            }
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

-circleImage-

//
//  File.swift
//  Image_tutorial
//
//  Created by devdepot on 2021/04/27.
//

import SwiftUI

struct CircleImageVIew: View {
    
    var body: some View{
//        Image(systemName: "flame.fill") //sfSymbol
//            .font(.system(size: 200))
//            .foregroundColor(.blue)
        
        Image("MyImage")
            .resizable()    // 크기 맞추기
            .scaledToFill() //aspectRatio랑 같다
//            .aspectRatio(contentMode: .fill)    //비율 맞추기
            .frame(width: 300,height: 300)
            .clipShape(Circle()) //원형으로 자르기
            .shadow(color: .red, radius: 2, x: 5, y: 10)
            .overlay(Circle()
                        .foregroundColor(Color.black)
                        .opacity(0.4)   //투명도 설정
            )
            .overlay(Circle().stroke(Color.red,lineWidth: 10).padding())
            .overlay(Circle().stroke(Color.yellow,lineWidth: 10))
            .overlay(Text("호호")
                        .foregroundColor(.white)
                        .font(.system(size: 50))
                        .fontWeight(.bold)
            )
//            .clipped()
            .edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
    }
}

-webView-

 

//
//  MyWebView.swift
//  swiftUI_Webview_tutorial
//
//  Created by devdepot on 2021/04/27.
//

import SwiftUI
import WebKit

// uikit 의 uiView 를 사용할 수 있도록 한다.
// uiViewCOntrollerRepresntable

struct MyWebView: UIViewRepresentable {
    
    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
    }
    
    // 업데이트 ui view
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<MyWebView>) {
        
    }
}