[iOS - swift] fixedSize(horizontal:vertical:) 개념 (SwiftUI에서 자식 뷰가 그려지는 원리)

자식 뷰가 그려지는 원리

• 일반적으로 뷰가 그려질때 부모 뷰 안에 자식 뷰가 있을때, 자식 뷰는 부모 뷰의 크기에 맞추어서 compression됨
  • HStack이나 VStack안에 뷰를 넣고 이 뷰들의 콘텐츠가 길어질 때 아무리 길어도, 부모 뷰가 compression하려는 성질이 강해서 줄어들거나 말줄임표가 들어감

ex) 문자열이 아무리 길어도 부모 뷰 안에 있으면 부모 뷰의 크기에 맞게 compression됨

struct ContentView: View {
    var body: some View {
        ListExample()
    }
}

struct ListExample: View {
    var body: some View {
        List {
            ForEach(0..<3) { i in
                Text("A very very very very very very very long content for row \(i)")
                    .lineLimit(1)
            }
        }
    }
}

• 만약에 부모 뷰에 맞게 압축시키고 싶지 않은 경우에는?
  • fixedSize로 해결 가능

Text("A very very very very very very very long content for row \(i)")
    .lineLimit(1)
    .fixedSize() // <- (파라미터를 생략하면 true로 들어감)

fixedSize 개념

fixedSize(horizontal: Bool = true, vertical: Bool = true)

• fixedSize의 파라미터인 horizontal, vertical 값에 true를 넘기면, 이 뷰는 부모 뷰에 따라 compression되지 않고 자기 자신의 콘텐츠 크기를 고정시키라는 의미

ex) BadgeView를 만들고 싶은 경우?

• 아래처럼 코딩을 했을때, 뱃지가 이렇게 표출되는 경우가 존재
  • HStack안에 Circle과 Text를 넣었는데 Text가 가로로 나열되지 않음

struct ContentView: View {
    var body: some View {
        ParentView()
    }
}

struct BadgeView: View {
    var body: some View {
        HStack {
            Circle()
                .frame(width: 20, height: 20)
            Text("New")
        }
        .padding(6)
        .background(Color.yellow)
        .cornerRadius(8)
    }
}

struct ParentView: View {
    var body: some View {
        HStack {
            BadgeView()
            Spacer()
        }
        .frame(width: 60)
    }
}

• 자식 뷰가 그려지는 원리에서 알아 보았듯이, 부모 뷰는 compression하려는 성질이 강해서 자식 width가 compression된 것
  • 만약 자식 뷰의 width크기를 자식 뷰 콘텐츠 사이즈에 맞게 고정시키고 싶은 경우, fixed(horizontal: true)를 사용해서 해결 가능

struct BadgeView: View {
    var body: some View {
        HStack {
            Circle()
                .frame(width: 20, height: 20)
            Text("New")
                .fixedSize() // <- fixedSize(horizontal: true, vertical: true)와 동일
        }
        .padding(6)
        .background(Color.yellow)
        .cornerRadius(8)
    }
}

전체 코드) 

import SwiftUI

struct ContentView: View {
    var body: some View {
        ParentView()
    }
}

struct BadgeView: View {
    var body: some View {
        HStack {
            Circle()
                .frame(width: 20, height: 20)
            Text("New")
                .fixedSize()
        }
        .padding(6)
        .background(Color.yellow)
        .cornerRadius(8)
    }
}

struct ParentView: View {
    var body: some View {
        HStack {
            BadgeView()
            Spacer()
        }
        .frame(width: 60)
    }
}

#Preview {
    ContentView()
}