
Project8
이번에는 WebView
Image
를 사용하여 간단하게 위와 같은 화면을 구성해보겠습니다.
Circle 이미지뷰 생성
우선 새로운 SwiftUI
파일을 생성하고 이름은CircleImageView
라고 정해주겠습니다. 그리고 아래와 같은 이미지를 만들어 주겠습니다.

원하는 이미지 파일을 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
를 통해 외부 브라우저가 아닌 앱 내에서 사이트로 이동하도록 해주겠습니다.
//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
으로 감싸주고 이미지를 추가해줍니다.
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
WebView 와 NavigationLink 사용하기. Contribute to Seogun95/SwiftUI_image_TUT development by creating an account on GitHub....
github.com
'PROJECT > Simple' 카테고리의 다른 글
SwiftUI Project10 : 영화 캐릭터 정보 앱 #1 (0) | 2021.04.16 |
---|---|
SwiftUI Project9 : CustomTabView (geometryReader) (0) | 2021.03.26 |
SwiftUI Project7 : Stack / ScrollView / Link (0) | 2021.03.11 |
SwiftUI Project6 : Use Views From Other Frameworks (0) | 2021.03.08 |
SwiftUI Project5 : 날씨앱 'SwiftUI 기초 배우기' (0) | 2021.03.06 |