overlay - View 중첩

 

1. 정의

💡 View의 원본의 공간을 기준으로 기 위에 새로운 View를 중첩해서 쌓는 기능을 하는 수식어

 

 

 

 

2. 사용방법

 

1. 기본 사용법

struct CircleImageView: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay {
                Circle()
            }
    }
}

overlay

기존 ImageView 크기에 맞춰서 검은색(기본값)의 원형 View 생성

 

 

2. 크기를 조정한 사용법

struct CircleImageView: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay {
                Circle()
                    .frame(width: 200.0, height:  200.0)
            }
    }
}

기존 ImageView의 크기와 관계없이 frame으로 크기를 조정

 

 

3 - 1. 원형 View와 overlay View를 동시에 보여주는 사용법

struct CircleImageView: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay {
                Circle()
                    .stroke()
            }
    }
}

 

 

3 - 2. 원형 View와 overlay View를 동시에 보여주는 사용법 + overy 색상과 크기 조절하기 

struct CircleImageView: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay {
                Circle()
                    .stroke(.gray, lineWidth: 4)
                
            }
    }
}

 

3. 그림자가 있는 overlay

overlay에 그림자를 주고 싶다면 .shape(radius: )를 사용하면된다.

 

❓ 만약 그림자 색과 방향을 바꾸고 싶다면?

 

.shadow(color: , radius: , x: , y: )를 사용하면된다.

• color - 그림자 색
• radius - 그림자의 반경
• x - 그림자의 x값
• y - 그림자의 y값