[swift] 레이아웃에서 그리드 시스템 구현하기

14 Dec 2023

swift

레이아웃에서 그리드 시스템은 UI 요소를 일관되게 정렬하고 공간을 잘 활용하는 데 도움이 됩니다. Swift에서 그리드 시스템을 구현하는 방법을 살펴보겠습니다.

1. 스택뷰를 사용한 간단한 그리드

간단한 그리드를 구현하기 위해 UIStackView를 사용할 수 있습니다. 수평 또는 수직으로 요소들을 그룹화하여 일관된 간격으로 정렬할 수 있습니다.

let stackView = UIStackView()
stackView.axis = .vertical // 수직 그리드
stackView.alignment = .fill
stackView.distribution = .equalSpacing
stackView.spacing = 8 // 간격 설정

// 요소 추가
stackView.addArrangedSubview(subview1)
stackView.addArrangedSubview(subview2)
stackView.addArrangedSubview(subview3)

// 뷰에 추가
view.addSubview(stackView)

2. UICollectionView를 이용한 그리드

복잡한 그리드를 구현하려면 UICollectionView를 사용할 수 있습니다. UICollectionViewFlowLayout를 통해 그리드의 레이아웃을 조정할 수 있습니다.

let layout = UICollectionViewFlowLayout()
layout.minimumLineSpacing = 10 // 행 간격
layout.minimumInteritemSpacing = 10 // 열 간격

let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self

// 셀 등록
collectionView.register(MyCell.self, forCellWithReuseIdentifier: "MyCell")

// 뷰에 추가
view.addSubview(collectionView)

3. SnapKit을 이용한 그리드 레이아웃

SnapKit은 Auto Layout을 보다 쉽게 다룰 수 있게 도와주는 라이브러리입니다. 다음은 SnapKit을 사용하여 그리드 레이아웃을 구현하는 예시입니다.

let containerView = UIView()
view.addSubview(containerView)

containerView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}

// 그리드 레이아웃
let itemSize = CGSize(width: 100, height: 100)
let padding = 10
var previousView = UIView()

for _ in 0..<4 {
    let subview = UIView()
    containerView.addSubview(subview)
    
    subview.snp.makeConstraints { make in
        make.size.equalTo(itemSize)
        if previousView == containerView {
            make.top.left.equalTo(containerView).offset(padding)
        } else {
            make.top.equalTo(previousView.snp.bottom).offset(padding)
            make.left.equalTo(containerView).offset(padding)
        }
    }
    
    previousView = subview
}

이와 같은 방법으로 Swift를 사용하여 레이아웃에서 그리드 시스템을 구현할 수 있습니다.

1. 스택뷰를 사용한 간단한 그리드

2. UICollectionView를 이용한 그리드

3. SnapKit을 이용한 그리드 레이아웃

참고 자료