SwiftUI 4 ile Layout kullanımı

Merhabalar, bu yazımda SwiftUI 4 ile birlikte gelen custom Layout protocol kullanımını sizlerle paylaşacağım.

Bu protokol sayesinde kendi custom layoutlarımızı daha kolay bir şekilde yazabileceğiz. Örneğin blok içerisindeki nesnelerin konumunu boyutunu vs özelliklerini direkt olarak layout protocol içerisindeki fonksiyondan erişebiliyoruz. Böylelikle yan yana alt alta veya kendi patternimize göre sıraladığımız farklı layoutlar yazabilirsiniz.

struct CustomLayoutExample: View {
    var body: some View {
        CustomStackView {
            ForEach(1...3, id: \.self) { index in
                Circle()
                    .fill(.blue)
                    .frame(width: 50, height: 50)
                    .overlay {
                        Text("\(index)")
                    }
            }
        }
        .padding()
    }
}

struct CustomStackView: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        return .init(width: proposal.width ?? 120, height: proposal.height ?? 120)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var origin = bounds.origin
        for subView in subviews {
            subView.place(at: origin, anchor: .topLeading, proposal: proposal)
            origin.x += subView.sizeThatFits(.unspecified).width
        }
    }
}