궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
PROJECT/Simple

SwiftUI Project8 : WebView and Image

서근
QUOTE THE DAY

“ 백 권의 책에 쓰인 말보다, 한 가지 성실한 마음이 더 크게 사람을 움직인다. ”

- Franklin (프랭클린)
Written by SeogunSEOGUN

 

SwiftUI Project8 : WebView and Image

Project8

 

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

Circle 이미지뷰 생성

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

SwiftUI Project8 : WebView and Image - Circle 이미지뷰 생성
seogun.png
0.62MB

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

swift
UNFOLDED
//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()는 투명도를 설정하는 수정자 입니다.

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

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

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

 

 

swift
UNFOLDED
//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")
}
}

이미지 아래 버튼 생성

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

swift
UNFOLDED
//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)
}
}
}
}
}
}

SwiftUI Project8 : WebView and Image - 이미지 아래 버튼 생성

아이콘 뒤에 배경 넣기

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

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

backgroundImage.jpg
0.93MB

swift
UNFOLDED
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)
}
}
}
}

SwiftUI Project8 : WebView and Image - 아이콘 뒤에 배경 넣기

 

 

읽어주셔서 감사합니다🤟

 

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

 

Seogun95/SwiftUI_image_TUT

WebView 와 NavigationLink 사용하기. Contribute to Seogun95/SwiftUI_image_TUT development by creating an account on GitHub....

github.com

 


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.