[SwiftUI] How to set Image in SwiftUI

How to set Image in SwiftUI

 

✅ SwiftUI에서 Image를 세팅하는 방법에 대해 알아봅니다.

결과물

 

✅ CircleImageView.swift

import SwiftUI

struct CircleImageView : View {
    var body: some View {
//Image(systemName: "bolt.circle")
//            .font(.system(size: 200)) // 시스템 이미지는 font로 크기를 조절함.
//            .foregroundColor(.yellow)
//            .shadow(color: .gray, radius: 2, x: 2, y: 10)
        Image("myImage")
        .resizable() // 이미지의 크기를 조정해주기 위해서
            .scaledToFill() // 이미지 화면에 맞는 옵션
            .frame(width: 300, height: 300) // Image 크기 지정
            .clipShape(Circle()) // 모양을 원으로 지정
            .shadow(color: .gray, radius: 10, x: 0, y: 10) // 이미지 그림자 설정
            // overlay를 통해서 겹치게 하는 기술!
            .overlay(
                Circle()
                .foregroundColor(.black)
                    .opacity(0.7) // 이미지 자체를 어둡게 하기 위한 스킬!
            )
            // 아래 이미지에 줄 테두리 
            .overlay(
                // lineWidth는 쉽게 말해서 선의 굵기
                Circle().stroke(Color.red, lineWidth: 10)
                .padding() // 패딩으로 오버레이된 이미지에 위치 조정
            )
            .overlay(
                Circle().stroke(Color.yellow, lineWidth: 10)
                .padding(30)
            )
            .overlay(
                Circle().stroke(Color.blue, lineWidth: 10)
            )
            // 텍스트도 넣을 수 있다!
            .overlay(
                Text("호호")
                    .foregroundColor(.white)
                    .font(.system(size: 50))
                    .fontWeight(.bold)
                    
            )
        
//            .aspectRatio(contentMode: .fill)
//            .clipped()
//            .edgesIgnoringSafeArea(.all)
        
        
    }
}