Swift에서 간단한 Grid Layout 구현을 위한 레이아웃 클래스(UIKIT)

본론

UIKIT에서 Grid 레이아웃을 구현할 때 일반적으로 UICollectionView 클래스를 사용합니다.
아시다시피 UICollectionView를 사용할 때 UICollectionViewLayout, UICollectionViewDelegate, UICollectionViewDataSource 등 UICollectionView 방법을 일일이 호출해야 하기 때문에 매우 번거롭습니다.
실제로 작년쯤(더 일찍 시작?)선언적으로 쓰다가 점점 커져서 올해가 되면 SwiftUI도 나오고 상당히 선언적으로 걸려요.
CollectionView는 셀을 다시 사용할 수 있기 때문에 많은 데이터를 표시할 때 사용하지만, 때로는 셀을 다시 사용하지 않을 수도 있습니다.
이럴 때 CollectionView를 사용하지 않고subView를 배열하는 레이아웃 클래스를 조금만 하면 좋겠다고 생각합니다.

재사용되지 않는 GridView 예

예를 들어 암호 자물쇠와 같은 숫자 입력 화면, 달력, 팔레트 등이다.
사용 예1

        gridView.backgroundColor = .white
        gridView.insets = .zero
        gridView.borderWidth = 5
        gridView.gridSize = 4

        let size = gridView.gridSize * gridView.gridSize
        let colors = (0..<size).map { UIColor(hue: CGFloat($0) / CGFloat(size), saturation: 0.85, brightness: 0.9, alpha: 1) }
        colors.forEach {
            let view = UIView()
            view.backgroundColor = $0
            gridView.addSubview(view)
        }
        gridView.layout.center(0).size(300) // オートレイアウトのExtension

팔레트 같은 거.


달력 같은 거.

암호의 숫자 입력 화면

실시

final class GridLayoutView: UIView {
    var gridSize: Int = 4
    var borderWidth: CGFloat = 5
    var insets: UIEdgeInsets = .zero

    override func layoutSubviews() {
        super.layoutSubviews()

        let margin = borderWidth

        let width = (bounds.width - CGFloat(gridSize - 1) * margin - insets.left - insets.right) / CGFloat(gridSize)
        let height = (bounds.height - CGFloat(gridSize - 1) * margin - insets.top - insets.bottom) / CGFloat(gridSize)

        let startX: CGFloat = insets.left
        let startY: CGFloat = insets.top

        var x = startX
        var y = startY

        subviews.enumerated().forEach { index, view in
            view.frame.origin = CGPoint(x: x, y: y)
            view.frame.size = CGSize(width: width, height: height)

            x += width + margin
            if index % gridSize == gridSize - 1 {
                x = startX
                y += height + margin
            }
        }
    }
}

Tips

중간 여백은 borderWidth에서 지정합니다

외부 여백은 insets에서 지정합니다

경계 색상을 backgroundColor로 대체합니다

subView는 자동으로 정렬되므로 addSubview만 진행하면 됩니다

지원

등 간격 구성View는 UIStackView를 자주 사용하지만 이번에는 사용하지 않습니다.
에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.
Storyboard Part 분들은 Uistack View 사용하기가 쉽지 않을 것 같아요.
개인 개발에서 압도적인 단시간 재활용 (구성 요소로)

총결산

GridLayout을 조금이라도 실현하기 위해 판면 디자인 클래스를 만들어 사용한 것이 아니다.
insert, delete, drag, reuse 등 UICollectionView는 많은 장점이 있습니다.