# Untitled

UIKit - **CollectionView 가로 스크롤 UI**

커머스 앱이나 배달 앱 등 비슷한 카테고리로 동일한 데이터를 좁은 View 안에서 보여주기 위해서 가로의 끝이 언제인지 알 수 없는 가로 스크롤 UI를 사용하곤 한다. iOS에서는 UICollectionView로 이런 가로 UI를 쉽게 생성할 수 있다.

```javascript
// 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"`

- **UICollectionViewFlowLayout 클래스로 생성한 인스턴스**에서 컬랙션 아이템, 틀에 대한 레이아웃을 지정할 수 있다. (내장 멤버 변수를 조정하여 설정 가능하다.)

    - itemSize - 말 그대로 각 아이템의 사이즈를 결정해준다. 

    - scrollDirection - 당연히 스크롤 방향이다. 

    - minimumLineSpacing - 컬랙션 뷰 내부에서 아이템들 간의 간격을 결정한다.

    - sectionInset - 컬랙션 뷰 내부의 아이템 그룹의 Edge에 대한 간격을 결정한다. 

위와 같이 설정을 한다면, 아래 첨부된 영상처럼 가로 스크롤이 가능한 UI 구현이 가능하다.

[Video](https://vz-127031db-d43.b-cdn.net/c13fb7b6-dca0-4617-88fb-c1a917f002a1/playlist.m3u8)

![Image](https://upload.cafenono.com/image/slashpagePost/20240611/163743_Q2edlkoma4xUe9IAUK?q=75&s=1280x180&t=outside&f=webp)

For the site tree, see the [root Markdown](https://slashpage.com/hankyeol.md).