07. Overlay

Overlay

---

View 위에 View를 덮는 View다.

struct View_Group: View {
   var body: some View {
       ScrollView(.vertical, showsIndicators: false) {
           VStack {
               RoundedRectangle(cornerRadius: 15)
                   .frame(width: 300, height: 300)
                   .foregroundColor(.yellow)
                   .overlay {
                   RoundedRectangle(cornerRadius: 15)
                       .frame(width: 100, height: 100)
                       .foregroundColor(.red)
               }
           }

           ZStack {
               RoundedRectangle(cornerRadius: 15)
                   .frame(width: 300, height: 300)
                   .foregroundColor(.yellow)
               RoundedRectangle(cornerRadius: 15)
                   .frame(width: 100, height: 100)
                   .foregroundColor(.red)
           }
       }
   }
}

overlay가 modifier로 제공된다는 점을 제외하면 ZStack과 결과는 크게 다르지 않다.

struct View_Group: View {
   var body: some View {
       ScrollView(.vertical, showsIndicators: false) {
           VStack {
               RoundedRectangle(cornerRadius: 15)
                   .frame(width: 300, height: 300)
                   .foregroundColor(.yellow)
                   .overlay {
                   RoundedRectangle(cornerRadius: 15)
                           .foregroundColor(.red)
               }
           }

           ZStack {
               RoundedRectangle(cornerRadius: 15)
                   .frame(width: 300, height: 300)
                   .foregroundColor(.yellow)
               RoundedRectangle(cornerRadius: 15)
                   .foregroundColor(.red)
           }
       }
   }
}

하지만 구성 조건을 변경했을 때에는 그 진가가 나타난다.

overlay는 modifier로서 작동하기 때문에,
정의되는 상위 View의 frame을 그대로 사용하게 된다.
하지만 ZStack은 새롭게 frame을 정해주지 않는다면 view의 생성 규칙에 따라 만들어지게 된다.

overlay는 ZStack과 비슷한 쓸모를 가지고 있지만, frame의 내부 UI를 구성하는 경우 조금 더 유용하게 사용할 수 있다.

struct View_Group: View {
   var body: some View {
       Image("sampleimg")
           .resizable()
           .scaledToFill()
           .edgesIgnoringSafeArea(.all)
           .overlay(alignment: .bottom) {
               Text("How about today?")
                   .fontWeight(.bold)
                   .padding()
                   .background(.regularMaterial)
                   .cornerRadius(15)
           }
   }
}