CollectionView 사용해보기

목차 

- CollectionView가 뭐야

- CollectionView를 만들려면 뭘 해야해?

- 간단하게 만들어보자

CollectionView가 뭐야

TableView 처럼 화면에 보여 줄 항목 수를 지정하고 데이터를 나열해서 보여주는 View이다.

TableView 보다 자유롭게 배치가 가능하다.

 

Supplementary view:  Header, Footer가 될 수 있는 View다.

Cell: CollectionView에서 반복적으로 표현하는 View다.

 

CollectionView를 만들려면 뭘 해야해?

 

1) 재사용되는 Cell을 만들자.

2) Cell에 들어가는 데이터를 구성하자.

3) CollectionView에 Data를 연결해주자.

4) CollectionView에서는 CollectionViewLayout라는 Cell의 크기나 시각적 속성들을 정의 할 수 있는 클래스가 존재한다.

여기서 width, height를 지정해줘야 화면에 Cell들이 보이게 된다. 런타임에 바꿔서 보여 줄 수 있다.

 

간단하게 만들어보자

어떤 앱들을 보면 색깔을 고를 수 있게 나열해 놓는 경우가 있다.

사진처럼 헤더에 색깔을 볼 수 있는 예시를 넣고 아래에는 색깔을 선택 할 수 있는 cell이 존재하는 예제를 만들어보자.

Color palette예시

 

우선 Scene에서 Main.storyboard가 아닌 CollectionView로 변경해주자.

 func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let scene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: scene)
        // ColorViewController는 직접 생성해야함.
        window?.rootViewController = ColorViewController(collectionViewLayout: UICollectionViewFlowLayout())
        window?.makeKeyAndVisible()
    }

ColorViewController는 UICollectionViewController를 상속받고 있어서 처음 초기화 할 때 collectionViewLayout을 지정해주어야한다. UICollectionViewFlowLayout은 apple에서 제공해주는 collectionViewlayout이다.

 

머리글(headerView), 바닥글(footerView)를 넣을 수 있고, 그리드로 항목을 구성하는 layout이다. 

UICollectionViewFlowLayout은 아이템들이 스크롤 방향에 따라 나열되다가 다음 행으로 이동해서 흐른다. 아래사진처럼 동작한다고 한다.

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=zll11&logNo=220738591415

 

UICollectionViewDelegateFlowLayout을 통해 각 Cell의 크기를 지정하거나 속성을 줄 수 가 있다고 한다.

 

그럼 이제 ColorViewController에 내용을 넣어보자.

 

먼저 Controller에 색깔 데이터를 만들어주자.

let colorHexCodes = [0x000000,0xff3b30,0x007aff,0xff9500,0x4cd964,
                   0xEDCFA9,0xE89F72,0xFF935E,0xD5724A,0xAA4B31,
                   0xFCD1D1,0xECE2E,0xD3E0DC,0xAEE1E1,0xD9D7F1,
                   0x93B5C6,0xBCEBFD,0xC9CCD5,0xE4D8DC,0xFFE3E3,
                   0x535353,0x424242,0x323232,0x06405FA,0x032D44,
                   0xFEFFDE,0xDDFFBC,0x91C788,0x53744E,0x5D272D,
                   0x493535,0x6C5050,0xEED6C4,0xFFF3E4,0xFCF0C8,
                   0xC6D57F,0xD57F7F,0xA2CDCD,0xF4DFB3,0x3E2257]

rgb code를 UIColor에서 표현하기 위해 UIColor을 확장해주자.

어디에서 작성하든 상관없는데, 기본 타입을 확장한 것이기 때문에 다른 사람이 헷갈리지 않게 주석을 작성해주자.

// MARK: - UIColor
/// Hex Code Color을 사용하게 하는 함수
// let color = UIColor(rgb: 0xFFFFFF)
// let color = UIColor(rgb: 0xFFFFFF).withAlphaComponent(1.0)
// let color2 = UIColor(argb: 0xFFFFFFFF)
extension UIColor {
    convenience init(red: Int, green: Int, blue: Int, a: Int = 0xFF) {
        self.init(
            red: CGFloat(red) / 255.0,
            green: CGFloat(green) / 255.0,
            blue: CGFloat(blue) / 255.0,
            alpha: CGFloat(a) / 255.0
        )
    }
    
    convenience init(rgb: Int) {
        self.init(
            red:(rgb >> 16) & 0xFF,
            green:(rgb >> 8) & 0xFF,
            blue: rgb & 0xFF
        )
    }
    
    // let's suppose alpha is the first component (ARGB)
    
    convenience init(argb: Int) {
        self.init(
            red: (argb >> 16) & 0xFF,
            green: (argb >> 8) & 0xFF,
            blue: argb & 0xFF,
            a: (argb >> 24) & 0xFF
        )
    }
}

 

다음으로, CollectionView에 들어갈 Cell을 설정해주자.

//
//  ColorViewCell.swift
//  CollectionViewExample
//
//  Created by Taehoon Kim on 2022/02/16.
//

import UIKit

class ColorViewCell: UICollectionViewCell {
    // MARK: - Properties
    
    // Controller에게서 전달 받을 colorCode
    var colorCode: Int? {
        didSet {
            configureUI()
        }
    }
    
    // MARK: - Lifecycle
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // Helper
    
    // ColorCode가 변경되면, Cell의 background 색을 변경함
    func configureUI() {
        guard let colorCode = colorCode else {
            return
        }
        backgroundColor = UIColor(rgb: colorCode)
    }
}

 

그리고 Controller에 생성한 Cell을 등록을 해줘야한다.

private let reuseIdentifier = "ColorViewCell"

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.

    collectionView.register(ColorViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
}

 

Controller을 UICollectionViewController을 상속받았다면 기본적으로 UICollectionViewDataSource 프로토콜을 상속받고 있다.

그렇기 때문에 override를 통해 cell의 데이터가 몇개인지, cell에게 전달 할 데이터는 무엇인지 작성 할 수 있다.

 

// MARK: UICollectionViewDataSource
extension ColorViewController {
    
    /// cell 데이터가 몇 개인가
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return colorHexCodes.count
    }
    
    /// 각 Cell에 필요한 데이터를 설정한다.
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! ColorViewCell
        
        cell.colorCode = colorHexCodes[indexPath.row]
        
        return cell
    }
}

 

실행화면

ipod 7th 실행화면

ColletionView에게 한줄에 몇개를 표시할지, Cell의 width,height를 지정하지 않아도 위의 실행화면 처럼 동작을 한다.

CollectionView를 addView하라고 하지도 않았는데 자동으로 표현한다.

ColletionView는 스크롤이 되기 때문에 스크롤 방향을 설정 할 수 있는 .vertical, .horizontal도 존재하는데 설정을 안하게 되면 .vertical을 가지게 된다.

 

CollectionViewController을 상속받으면서 기본값이 설정된 상태이기 때문에 속성을 설정하지 않아도 잘 동작하게 된다.

 

전체 소스 

https://github.com/HOONITANG/CollectionViewExample.git