Set Image

오늘은 위와 같이 이미지와 Text를 이용한 프로필화면을 구현해보자.

시작하기 전에 SF Symbols(애플의 시스템 이미지를 사용하기 위함)를 다운 받아주자. (링크)

1. Circle ImageView 만들기

우선 새로운 파일을 만든다. (CircleImageView)

그리고 아래와 같이 ContentView처럼 틀을 만들어준다.

[만들기 전 ImageView에 대한 경험]

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Text("CircleImageView")
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

위에서 다운받은 SF Symbols에서 맘에드는 사진 이름을 복사해서 아래 처럼 넣어준다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image(systemName: "moon")
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

위처럼 이미지를 추가해주면 상당히 작은 이미지가 뜬것을 확인할 수 있다. 따라서 이 부분은 아래와 같이 font size를 통해서 수정이 가능하다. 또한 Text와 마찬가지로 foregroundColor를 이용해서 이미지 색을 변경할 수 있다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image(systemName: "moon")
            .font(.system(size: 50)) // 이미지 크기 변경
            .foregroundColor(.yellow) // 이미지 색상 변경
            .shadow(color: .gray, radius: 4, x: 7, y: 10) // 이미지 그림자 
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

[원형 이미지뷰 만들기]

해당 사이트로 접속해서 마음에 드는 사진을 하나 고르고 Assets에 추가해준다. (사진 이름은 사용할 예정이기 때문에 수정하는 것 좋다.)

위에서는 애플에서 제공하는 symbol 이미지를 사용해서 systemName을 사용했지만 해당 사진은 사용자가 직접 Assets에 넣은거여서 이미지 이름만 입력해주면된다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

하지만 위처럼 입력했을 때 해상도가 큰사진의 경우 꽉차게 사진이 나오게 된다. 그럴때는 아래 처럼

resizable()을 이용해서 사진을 화면에 맞춰준다. (resizable(): 공간에 맞게 이미지 크기를 조정하는 모드)

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            
            
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

또한 이미지로 화면을 채우고 싶을 때 아래의 aspectRatio를 이용할 수 있다.

[.aspectRatio(contentMode: )]

.fill: 이미지의 크기를 조정해서 화면을 꽉채운다.
.fit: 이미지의 크기를 유지하면서 화면을 채운다.

💡 만약 aspectRatio를 .fill로 하고 SafeArea까지 이미지를 늘리고 싶다면 .edgesIgnoringSafeArea(.all)를 사용하자.

이미지의 크기를 정해줄 수도 있다.

[frame과 clipped]

아래처럼 frame을 잡아주고 clipped 작성해주면 된다. (clipped에 대한 내용)

이렇게 생각하는게 맞는지는 나도 모르겠지만 frame은 자르기위한 모양을 잡아주고 clipped을 통해서 그 모양을 잘라준다고 생각하면 될거 같다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width:300, height: 300)
            .clipped()
        
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

이제 이렇게 이미지를 잘라주었다면 원형 이미지를 만들어보자.

clipShape를 통해서 이미지 모양을 잡아줄 수 있다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width:300, height: 300)
            .clipShape(Circle())
        
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

[clipShape의 style]

Circle(): 원
Ellipse(): 타원
Capsule(): 캡슐
Rectangle(): 직사각형
RoundedRectangle(cornerRadius: 30): 둥근모서리

[overlay]

이미지의 윤관석을 넣고 싶다면 overlay를 이용해서 CircleView를 하나더 만들어주면 된다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width:300, height: 300)
            .clipShape(Circle())
            .overlay(Circle().stroke()) // 검은색의 윤곽선 
	    .overlay(Circle().stroke(.gray)) // 회색의 윤곽선
            .overlay(Circle().stroke(.gray, lineWidth: 3)) // 회색의 굵기 3의 윤곽선
        
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

💡 overlay는 중복으로 사용이 가능하고 overlay 자체에 padding을 넣어줄 수 있다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width:300, height: 300)
            .clipShape(Circle())
            .overlay(Circle().stroke(.black, lineWidth: 10))
            .overlay(Circle().stroke(.black, lineWidth: 10).padding(20))
            .overlay(Circle().stroke(.blue, lineWidth: 10).padding(40))
            .overlay(Circle().stroke(.blue, lineWidth: 10).padding(60))
            .overlay(Circle().stroke(.red, lineWidth: 10).padding(80))
            .overlay(Circle().stroke(.red, lineWidth: 10).padding(100))
            .overlay(Circle().stroke(.yellow, lineWidth: 10).padding(120))
            .overlay(Circle().stroke(.yellow, lineWidth: 10).padding(140))
        
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

💡overlay를 이용해서 이미지의 명암도 변경할 수 있다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width:300, height: 300)
            .clipShape(Circle())
            .overlay(Circle()
                .foregroundColor(.black)
                .opacity(0.4) //투명도 ( <최소> 0 ~ 1 <최대> ) 
            )
        
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

💡overlay를 이용해서 text를 추가할 수 있다.

import SwiftUI

struct CircleImageView : View {
    var body: some View {
        Image("wolf")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width:300, height: 300)
            .clipShape(Circle())
            .overlay(Text("늑대")
                .foregroundColor(.red)
                .font(.system(size: 50))
                .fontWeight(.heavy)
            )
        
    }
    
}

struct CircleImageViews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
    }
}

이제 각자 만든 imageView를 ContentView에 적용해보자.

2. 웹뷰만들기 (참고)

import SwiftUI
import WebKit

//MARK: UIViewRepresentable: UIKit의 UIView를 사용할 수 있도록 한다.
struct MyWebView: UIViewRepresentable {
    
    var urlToLoad: String
    
    //MARK: - UIView 만들기
    func makeUIView(context: Context) -> WKWebView {
        
        //언래핑 - 너가 가져온 url 값이 비어있다면 WKWebView를 반환
        guard let url = URL(string: self.urlToLoad) else {
            return WKWebView()
        }
        
        let webview = WKWebView() //webView 생성
        
//        webview.load(URLRequest(url: URL(string: urlToLoad))) // (String 자체가 옵셔널 상태이기 떄문에 언래핑이 필요 -> guard문 처리)
        webview.load(URLRequest(url: url))
        
        return webview
    }
    
    //MARK: - 업데이트 UIView - View를 다시 그릴때 작동
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
 
}

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

이제 ContentView로 돌아와서 커스텀 해준다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        NavigationView { //웹사이트를 띄우기 위해서
            ZStack {
                Image("appleDev")
                    .resizable()
                    .frame(height: 400)
                    .aspectRatio(contentMode: .fit)
                    .offset(y: -280)
                VStack{
                    
                    Spacer()
                    
                    //원형 이미지
                    CircleImageView()
                        .padding()
                    Text("기록을 좋아하는 iOS 개발자 김준수입니다.")
                        .foregroundColor(.gray)
                        .font(.system(size: 20))
                        .fontWeight(.medium)
                        .shadow(color: .yellow, radius: 2, x: 5, y: 10)
                    // 웹사이트
                    HStack{
                        //웹사이트1: 깃허브
                        NavigationLink(destination: MyWebView(urlToLoad: "https://github.com/iOS-junsoo")
                            .edgesIgnoringSafeArea(.all) //SafeArea 무시
                        ){
                            Text("GitHub")
                                .font(.system(size: 20))
                                .fontWeight(.bold)
                                .padding()
                                .background(.black)
                                .foregroundColor(.white)
                                .cornerRadius(20)
                                
                        }
                        //웹사이트2: 티스토리
                        NavigationLink(destination: MyWebView(urlToLoad: "https://iosoo.tistory.com/")
                            .edgesIgnoringSafeArea(.all) //SafeArea 무시
                        ){
                            Text("Tistory")
                                .font(.system(size: 20))
                                .fontWeight(.bold)
                                .padding()
                                .background(.gray)
                                .foregroundColor(.white)
                                .cornerRadius(20)
                        }
                    }
                    .padding(50) //HStack과 VStack의 padding
                  
                    
                    
                    Spacer()
                    
                }

            }
        }
        
    }
}

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

저작자표시 비영리

'iOS - 실무관련 > SwiftUI' 카테고리의 다른 글

Spacer( ) - UI사이의 간격 만들기 (0)	2022.08.10
Stack (0)	2022.07.18
Text (0)	2022.07.14
웹뷰 띄우기 (0)	2022.07.13
@Binding - 데이터 연동 (0)	2022.07.12

개발 때문에

Set Image

1. Circle ImageView 만들기

[만들기 전 ImageView에 대한 경험]

[원형 이미지뷰 만들기]

2. 웹뷰만들기 (참고)

'iOS - 실무관련 > SwiftUI' 카테고리의 다른 글

티스토리툴바

Set Image

1. Circle ImageView 만들기

[만들기 전 ImageView에 대한 경험]

[원형 이미지뷰 만들기]

2. 웹뷰만들기 (참고)

'iOS - 실무관련 > SwiftUI' 카테고리의 다른 글

관련글

티스토리툴바