[SwiftUI fundamental Tutorial] Image

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

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

 

 

 

 

 

sf Symbol 다운 받고 설치하기

Apple에서 xcode에서 사용할 수 있는 시스템 폰트(아이콘) 제공해줌

https://developer.apple.com/sf-symbols/

Apple Developer

 

 

 

 

sf Symbol 사용 예시

import SwiftUI

struct CircleImageView: View{
    var body: some View{
        Image(systemName: "bolt.fill")
            .font(.system(size: 200))
            .foregroundColor(.blue)
            .shadow(color: .gray, radius: 2, x: 2, y:10)
    }
}

font 설정하듯이 하면 됨, SystemName 부분에 사용하고자 하는 폰트 파일명 작성

 

 

 

bolt.fill 예시

 

 

 

 

 

 

이미지 사용하기

Assets.xcassets 폴더에 이미지 넣기

 

iphone 섹션을 만들어서 이미지 옮기기

 

universal 섹션 지우기

 

import SwiftUI

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

해상도가 커서 사진이 깨져서 출력됨

 

 

 

 

 

 

import SwiftUI

struct CircleImageView: View{
    var body: some View{
        Image("IMG_0653")
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}

.resizable(): 이미지 사이즈 맞추기

aspectRatio(contentMode:.값): 이미지 비율 맞추기= .scaledToFit()/ .scaledToFill()

 

 

 

import SwiftUI

struct CircleImageView: View{
    var body: some View{
        Image("IMG_0653")
        .resizable()
            .scaledToFill()
            .frame(width: 300, height: 300)
            .clipShape(Circle())
            .overlay(
                Circle().foregroundColor(.black)
                    .opacity(0.5)
            )
            .overlay(Circle().stroke(Color.red, lineWidth: 10)
                             .padding()
            )
            .overlay(Circle().stroke(Color.green, lineWidth: 10)
                             .padding(30)
            )
            .overlay(Circle().stroke(Color.blue, lineWidth: 10)
                             
            )
            .overlay(
                Text("보리").foregroundColor(.white)
                    .font(.system(size: 30))
                    .fontWeight(.bold)
            )
    }
}

.frame(): 이미지 자체 크기 맞추기

.clipeed(): 이미지 자체를 자르기

.clipShape(모양()): 모양대로 이미지 자르기

라운딩하기(뷰 하나를 덧씌우기): .overlay(뷰 이름().속성)

stroke(윤곽선 속성): 윤곽선 그리기

 

Circle() 자체에 padding 값 부여 가능: padding 값을 주면 윤곽선이 사진 안으로 그려짐 

 

.overlay() 중첩 가능

 

opacity(0~1): 투명도 (0=0%, 1=100%)

 

.shadow(): 그림자 

 

 

 

 

 

배운 내용 응용하기

import SwiftUI

struct CircleImageView : View{
    var body : some View{

        Image("profile")
           
            .resizable()
            
            .scaledToFill()
         
         .frame(width: 300, height: 300)
            
            .clipShape(Circle())
            .shadow(color: .gray, radius: 15)
            .overlay(
                Circle()
                    .foregroundColor(.yellow)
                    .opacity(0)
        )
            
            .edgesIgnoringSafeArea(.all)
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            VStack{
                Color.blue
                    .ignoresSafeArea()
                    .frame(height: 30)
                    .offset(y:-50)
                   
                CircleImageView()
                
                Text("덩이")
                    .font(.system(size: 30))
                    .fontWeight(.bold)
                    .padding(.top, 30)
                
                HStack{
                        NavigationLink(
                            destination: MyWebview(url: "https://www.instagram.com/__juzzg").edgesIgnoringSafeArea(.all)){
                            Text("팔로우 하기")
                                .font(.system(size: 20))
                                .fontWeight(.bold)
                                .foregroundColor(Color.white)
                                .padding(10)
                                .background(Color.purple)
                                .cornerRadius(20)
                        }
                        NavigationLink(
                            destination: MyWebview(url: "https:/blog.naver.com/hj__0403")
                                .edgesIgnoringSafeArea(.all)){
                            Text("서로이웃 하기")
                                .font(.system(size: 20))
                                .fontWeight(.bold)
                                .foregroundColor(Color.white)
                                .padding(10)
                                .background(Color.green)
                                .cornerRadius(20)
                    }
                }//HStack
                .padding(50) //원 패딩
                
            }
        }
    }
}