[SwiftUI] Layout 을 이용한 SizeLogger

Layout 프로토콜을 채택해서 Custom Layout 을 주로 만들지만  (문서, 예제 - WheelLayout )

이 글처럼 SizeLogger 를 만들 수도 있다. 좋은 아이디어!

 

struct SizeLogger: Layout {
    let label: String
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let result = subviews[0].sizeThatFits(proposal)
        print(label, proposal, result)
        return result
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        subviews[0].place(at: bounds.origin, proposal: proposal)
    }
}

extension View {
    
    func logSizes(_ label: String) -> some View {
        SizeLogger(label: label) { self }
    }
}

 

이런 식으로 사용하면서

1) ProposedViewSize During layout in SwiftUI, views choose their own size, but they do that in response to a size proposal from their parent view. 

 

~GPT 의 설명~

SwiftUI의 레이아웃 과정에서, 뷰는 자기 자신의 크기를 선택할 수 있는 자율성을 갖고 있지만, 그 선택은 상위 뷰(parent view)에서 전달된 크기 제안(size proposal)에 기반하여 이루어집니다. 즉, 상위 뷰가 "이 정도 크기를 사용하는 것이 어떻겠느냐"라고 제안하면, 하위 뷰는 그 제안을 받아들여 적절한 크기를 결정하게 됩니다

 

2) Actual Size 

 

를 함께 알 수 있다. 

struct ContentView: View {
    
    var body: some View {
        Text("HELLO WORLD!")
            .logSizes("original")
            .background(.blue)
            .logSizes("after background")
            .padding()
            .logSizes("after padding")
    }
}

// 출력 
original ProposedViewSize(width: Optional(361.0), height: Optional(727.0)) (122.0, 20.333333333333332)
after background ProposedViewSize(width: Optional(361.0), height: Optional(727.0)) (122.0, 20.333333333333332)
after padding ProposedViewSize(width: Optional(393.0), height: Optional(759.0)) (154.0, 52.33333333333333)

 

 

 

+

Image aspectRatio without frames 글에서 이런 식으로 로그를 보며

frame 없이 aspectRatio 를 사용했을 때 왜 예상치 못하게 동작하는 지를 디버깅해가는 과정이 인상깊었다.