iOS Snapkit 09 | CollectionView 코드로 구성하는 법 02

✅ 이번에는 이전 포스팅은 기본 셀을 사용했다면 커스텀 셀을 사용하는 방법에 대해서 알아볼 예정이야.

 

//
//  File.swift
//  SnapKit_practice
//
//  Created by Hamlit Jason on 2021/08/22.
//

import UIKit
import RxDataSources
import RxSwift
import RxCocoa
import CoreLocation
import Foundation
import Differentiator
import Then

class MyCollectionViewCell2 : UICollectionViewCell {
    static let identifier = "cell2"
    
    var img = UIImageView().then {
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.image = UIImage(named: "testImage")
    }
    
    var label = UILabel().then {
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.text = "상어상어"
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.cellSetting()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func cellSetting() {
        self.backgroundColor = .gray
        self.addSubview(img)
        self.addSubview(label)
        
        img.contentMode = .scaleToFill
        img.snp.makeConstraints {
            $0.leading.top.trailing.equalTo(0)
            $0.bottom.equalTo(-20)
        }
        label.snp.makeConstraints {
            $0.leading.bottom.trailing.equalTo(0)
            $0.top.equalTo(img.snp.bottom)
        }
    }
}


class ViewController09 : UIViewController {

    var collectionView : UICollectionView = {
        var layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 0
        layout.scrollDirection = .vertical
        layout.sectionInset = .zero
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .green
        return cv
    }()
    
    //var collectionView = UICollectionView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        collectionView.delegate = self
        collectionView.dataSource = self
        
        autoLayout()
        collectionView.register(MyCollectionViewCell2.self, forCellWithReuseIdentifier: MyCollectionViewCell2.identifier)
    }
}

extension ViewController09 : UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: MyCollectionViewCell2.identifier, for: indexPath) as? MyCollectionViewCell2 else {
            return UICollectionViewCell()
        }
        cell.backgroundColor = .none
        cell.img.image = UIImage(named: "testImage")
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let itemSpacing : CGFloat = 10
        
        let myWidth : CGFloat = (collectionView.bounds.width - itemSpacing * 2) / 3
        
        
        return CGSize(width: myWidth, height: myWidth)
    }
}

extension ViewController09 {
    
    private func autoLayout() {
        collectionView.snp.makeConstraints {
            $0.edges.equalTo(view.safeAreaLayoutGuide)
                .inset(UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0))
        }
    }
}

사용한 이미지

결과물

 

다음에는 rx를 이용하여 한번 더 개선해보자.