UICollectionView Programmatically Practice

만약 스토리보드를 활용해 Collection View를 생성하는 간략한 방법을 보고 싶으시다면 아래 링크를 참고하시기 바랍니다.

https://velog.io/@panther222128/UICollectionView

또한, 스토리보드 및 XIB를 활용한 방법은 아래 링크에 나와있습니다.

https://velog.io/@panther222128/UICollectionView-with-XIB-Practice

먼저 보여줄 데이터를 생성하겠습니다. 셀 사이즈를 크게 해도 재사용이 가능한지 확인하기 위해서 충분히 생성하겠습니다.

struct Data {
    let memberName = ["효정", "미미", "유아", "승희", "지호", "비니", "아린", "효정", "미미", "유아", "승희", "지호", "비니", "아린", "효정", "미미", "유아", "승희", "지호", "비니", "아린", "효정", "미미", "유아", "승희", "지호", "비니", "아린", "효정", "미미", "유아", "승희", "지호", "비니", "아린", "효정", "미미", "유아", "승희", "지호", "비니", "아린"]
}

속성을 비워둔 CollectionView 객체를 생성합니다.

class CustomCollectionView: UICollectionView {

    // none

}

다음은 Custom Cell 생성입니다. label 하나만 추가할 것이며, label의 위치와 속성을 설정합니다.

class CollectionViewCell: UICollectionViewCell {
    
    var memberNameLabel: UILabel!
     
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setUpCell()
        setUpLabel()
    }
    
    override init(frame: CGRect) {
        super.init(frame: .zero)
        setUpCell()
        setUpLabel()
    }
        
    func setUpCell() {
        memberNameLabel = UILabel()
        contentView.addSubview(memberNameLabel)
        memberNameLabel.translatesAutoresizingMaskIntoConstraints = false
        memberNameLabel.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor).isActive = true
        memberNameLabel.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor).isActive = true
        memberNameLabel.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor).isActive = true
        memberNameLabel.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor).isActive = true
        }
        
    func setUpLabel() {
        memberNameLabel.font = UIFont.systemFont(ofSize: 32)
        memberNameLabel.textAlignment = .center
    }
    
}

다음은 ViewController입니다. Table View와 한 가지 큰 차이를 보이는데, configureCollectionView() 메소드에서 customCollectionView = CustomCollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout.init())처럼 초기화하지 않으면 에러가 발생합니다. 즉 customCollectionView = CustomCollectionView()와 같은 형태로 실행하면 에러가 발생한다는 뜻입니다. 그때 에러 메시지는 'UICollectionView must be initialized with a non-nil layout parameter'입니다. Table View와 마찬가지로 delegate 프로토콜을 통해 보여줄 데이터의 수와 셀의 모습을 설정합니다.

unc collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize에서 셀의 크기를 결정합니다.

class ViewController: UIViewController {

    private var customCollectionView: CustomCollectionView!
    private let data = Data()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureCollectionView()
        registerCollectionView()
        collectionViewDelegate()
    }

    func configureCollectionView() {
        customCollectionView = CustomCollectionView(frame: CGRect.zero, collectionViewLayout: UICollectionViewFlowLayout.init())
        customCollectionView.translatesAutoresizingMaskIntoConstraints = false
        customCollectionView.backgroundColor = .white
        self.view.addSubview(customCollectionView)
        customCollectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 120).isActive = true
        customCollectionView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 40).isActive = true
        customCollectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -40).isActive = true
        customCollectionView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -40).isActive = true
    }
    
    func registerCollectionView() {
        customCollectionView.register(CollectionViewCell.classForCoder(), forCellWithReuseIdentifier: "cellIdentifier")
    }
        
    func collectionViewDelegate() {
        customCollectionView.delegate = self
        customCollectionView.dataSource = self
    }

}

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 120, height: 120)
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.memberName.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = customCollectionView.dequeueReusableCell(withReuseIdentifier: "cellIdentifier", for: indexPath) as! CollectionViewCell
                cell.memberNameLabel.text = data.memberName[indexPath.row]
        return cell
    }
    
}

아래와 같은 모습으로 실행됩니다.