01-kakaopay-main.md

01 카카오페이 메인 화면

실제 화면 / 구현 화면

Apple WWDC 2022 Compose custom layouts with SwiftUI 참고

Layout protocol을 만족하는 BlockGridLayout 생성

// BlockGridLayout
struct BlockGridLayout: Layout {
    
    static let numberOfSubviewsInGroup = 4
    
    // for a group
    private let widthHeightRatio = 1.2
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let width = proposal.replacingUnspecifiedDimensions().width // unspecified일 경우 10으로 값을 고정
        let groupCount = subviews.count / Self.numberOfSubviewsInGroup
        
        var height = CGFloat(groupCount) * width * widthHeightRatio
        if subviews.count % Self.numberOfSubviewsInGroup > 0 {
            height += width * widthHeightRatio * 2/3
        }
        return CGSize(width: width, height: height)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        subviews.enumerated().forEach { index, subview in
            subview.place(at: getOrigin(in: bounds, subviewAt: index),
                          proposal: getProposal(subviewAt: index, width: bounds.width))
        }
    }
    
}

// BlockGrid.swift
var body: some View {
  BlockGridLayout {
    ForEach(...)
  }
}