[SwiftUI] frame에 대해 간단히 정리

SwiftUI의 View의 .frame viewModifier에 대해 정리.

 

이전 글(https://swifty-cody.tistory.com/157)에서 정리했듯이,

.frame viewModifier는 View의 제약사항이 아닌 또다른 View임을 인식한다는 전제로 설명.

 

.frame(width: height:alignment:)

가장 기본적이고 익숙한 frame.

해당 View에게 고정사이즈를 제안하기 위함.

 

A라는 View에 frame을 적용했을 때,

1. A의 상위에 해당 frame(width, height)의 View를 적용하고,
2. 이 frame View가 A에게 해당 사이즈만큼 차지하도록 제안하는 것이 기본 흐름.
3. 그리고 A가 제안된 크기 내에서 실제로 차지할 사이즈를 정해서 frame View에게 알려줌.
4. 그리고 frame View는 alignment대로 컨텐츠(A)를 정렬시킴.

 

예시.

struct FrameTest: View {
    var body: some View {
        Text("텍스트")
            .background(Color.orange) // Text의 크기를 체크
            .frame(width: 100, height: 100, alignment: .topLeading)
            .border(Color.blue, width: 2) // frame의 크기를 체크
    }
}

 

Text("텍스트")에 frame(width: 100, height: 100, alignment: topLeading)을 적용하면,

1. Text 상위에 frame View를 적용하고,
2. 이 frame View가 Text에게 해당 사이즈(파란색)만큼 차지하도록 제안.
3. A가 제안된 크기 내에서 실제로 차지할 사이즈(주황색)를 정해서 frame View에게 알려주고,
4. frame View가 alignment(topLeading)대로 컨텐츠(A)를 정렬시킴.

제안이기 때문에 반드시 해당 View의 크기가 frame만큼 그려지지는 않지만, frame이 사이즈만큼 차지하게 됨.

 

frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)

해당 View에게 flexiblie한 사이즈를 제안하기 위한 viewModifier.

이 viewModifier에는 7개의 파라메터가 있음.

 

• minWidth, minHeight: 부모View가 줄어들어도 최소한 그려내야하는 사이즈
• idealWidth, idealHeight: 가장 선호하는 사이즈
• maxWidth, maxHeight: 부모View가 제안하는 사이즈가 충분하다면 늘어날 사이즈
• alignment: 컨텐츠(frame적용한View)의 정렬(위와 동일)

 

예시.

아래 View는

• minWidth, minHeight: 부모View가 줄어도 최소한 100만큼 그려지고,
• idealWidth, idealHeight: 가장 선호하는 사이즈는 150이고,
• maxWidth, maxHeight: 부모View가 제안하는 사이즈가 충분할 때 최대 200만큼 늘어남

(alignment는 위와 같아서 생략)

Condition1. 부모View(Group)의 frame은 250으로 크기가 충분한 상태.

struct FrameTest: View {
    @State var size: CGSize = .zero
    
    var body: some View {
        Group {
            Text("Size: \(size)")
                .frame(minWidth: 100, idealWidth: 150, maxWidth: 200,
                       minHeight: 100, idealHeight: 150, maxHeight: 200)
                .background(Color.orange)
                .background(
                    GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                self.size = geometry.size
                            }
                    })
        }
        .frame(width: 250, height: 250)
        .border(Color.blue, width: 2)
    }
}

부모View(파란색)의 사이즈가 충분할 때는 maxWidth, maxHeight만큼 늘어남.

 

Condition2. 부모View(Group)의 frame이 80으로 크기가 부족한 상태.

부모View(파란색)의 사이즈가 부족할 때는 minWidth, minHeight만큼 보장됨.

 

 

Condition3. 부모View(Group)에서 fixedSize를 제안할 때

그러면 idealWidth, idealHeight는 언제 적용되는걸까 싶을 수 있음.

idealWidth, idealHeight는 .fixedSize() viewModifier가 함께 적용될 때 나타남.

idealWidth, idealHeight를 적용한 View에서 이를 적용하면 frame(width:height:)를 적용한 것과 동일한 효과.

다만 이렇게 사용하면 min, max는 의미가 없어지기 때문에,

이렇게 사용하기보다는 해당 View를 자식View로 사용하는 부모View가 자식View에게 고정사이즈를 적용하도록 제안하는 목적으로 사용할 케이스가 더 타당할 것으로 보임.

SwiftUI에서는 자식View가 캡슐화되어 고정사이즈로 그리는지, flexible하게 그리는지 알 수 없기 때문에 fixedSize()가 나온 것이 아닐까 추측.

struct FrameTest: View {
    var body: some View {
        SomeSubView()
            .fixedSize() // 자식View에게 고정사이즈(ideal)로 그릴 것을 제안
            .frame(width: 250, height: 250)
            .border(Color.blue, width: 2)
    }
}

struct SomeSubView: View {
    @State var size: CGSize = .zero
    
    var body: some View {
        Group {
            Text("Size: \(size)")
                .frame(minWidth: 100, idealWidth: 150, maxWidth: 200,
                       minHeight: 100, idealHeight: 150, maxHeight: 200)
                .background(Color.orange)
                .background(
                    GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                self.size = geometry.size
                            }
                    })
        }
    }
}

 

 

fixedSize(horizontal: Bool, vertical: Bool)

fixedSize는 fixedSize(horizontal: Bool, vertical: Bool)으로 가로, 혹은 세로를 선택적으로 적용하거나 동적으로 적용할 수 있음.