한결
Status
Empty
Assignee
Empty
UIKit - CollectionView 가로 스크롤 UI
커머스 앱이나 배달 앱 등 비슷한 카테고리로 동일한 데이터를 좁은 View 안에서 보여주기 위해서 가로의 끝이 언제인지 알 수 없는 가로 스크롤 UI를 사용하곤 한다. iOS에서는 UICollectionView로 이런 가로 UI를 쉽게 생성할 수 있다.
// SomeViewController.swift
class SomeViewController: UIViewController {
lazy var horizontalCollection = UICollectionView(
frame: .zero,
collectionViewLayout: configureCollectionLayout()
)
..
override func viewDidLoad() {
super.viewDidLoad()
view.addSubView(horizontalCollection)
horizontalCollection.snp.makeConstraints { make in
make.horizontalEdges.top.equalTo(view.safeAreaLayoutGuide)
make.height.equalTo(300)
}
}
func configureCollectionLayout() -> UICollectionViewLayout {
let layout = UICollectionViewFlowLayout()
let width = UIScreen.main.bounds.width * 0.6
let height = UIScreen.main.bounds.height / 3
layout.itemSize = CGSize(width: width, height: height)
layout.scrollDirection = .horizontal
layout.minimumLineSpacing = 20
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
return layout
}
}•
컬랙션뷰를 구현하기 위해서는 delegate, datasource에 대한 위임, 커스텀 Item에 대한 등록 역시 필요하다. (이 부분은 테이블뷰 구현과 동일하다.)
•
Swift 자체에서 시스템 테이블로 제공하는 형식이 없다보니, 테이블뷰 구현과 다르게 컬랙션 아이템(테이블에서는 셀), 컬랙션 틀 자체에 대한 레이아웃을 랜더링 하기 전에 반드시 설정해줘야 한다.
*설정하지 않고 빌드해보면 아래와 같은 에러를 마주할 수 있다.
"UICollectionView must be initialized with a non-nil layout parameter"
"UICollectionView must be initialized with a non-nil layout parameter"
•
UICollectionViewFlowLayout 클래스로 생성한 인스턴스에서 컬랙션 아이템, 틀에 대한 레이아웃을 지정할 수 있다. (내장 멤버 변수를 조정하여 설정 가능하다.)
◦
itemSize - 말 그대로 각 아이템의 사이즈를 결정해준다.
◦
scrollDirection - 당연히 스크롤 방향이다.
◦
minimumLineSpacing - 컬랙션 뷰 내부에서 아이템들 간의 간격을 결정한다.
◦
sectionInset - 컬랙션 뷰 내부의 아이템 그룹의 Edge에 대한 간격을 결정한다.
위와 같이 설정을 한다면, 아래 첨부된 영상처럼 가로 스크롤이 가능한 UI 구현이 가능하다.
