iOS/UIKIT

컬렉션 뷰 설정

밤새는 탐험가89 2024. 6. 26. 12:03

 

 

  • 먼저 테이블 뷰 생성
    // MARK: - UI Components
    private let attractionTableView: UITableView = {
        let tableView = UITableView(frame: .zero, style: .grouped)
        tableView.register(CollectionViewTableViewCell.self, forCellReuseIdentifier: CollectionViewTableViewCell.identifier)
        return tableView
    }()

 

 

  • 제약 조건 및 뷰에 넣기 
// MARK: - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(attractionTableView)
        
        attractionTableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
        
        setupTableViewDelegate()
        setupNavigationItems()
        setupNavigationTitle()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        attractionTableView.frame = view.bounds
        
    }
    
    
    
    // MARK: - Functions
    private func setupTableViewDelegate() {
        attractionTableView.delegate = self
        attractionTableView.dataSource = self
    }

 

  • delegate에 따른 extension 생성 
// MARK: - Extension
extension HomeViewController: UITableViewDelegate, UITableViewDataSource {
    
    // 각 섹션 안에 갯수 
    func numberOfSections(in tableView: UITableView) -> Int {
        return 10
    }
    
    // section의 갯수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: CollectionViewTableViewCell.identifier, for: indexPath) as? CollectionViewTableViewCell else { return UITableViewCell() }
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 200
    }
    
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return 40
    }
}

 

  • CollectionViewTableViewCell 생성
import UIKit

class CollectionViewTableViewCell: UITableViewCell {
    
    // MARK: - Variable
    static let identifier = "CollectionViewTableViewCell"
    
    
    
    // MARK: - UI Components
    private let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 160, height: 200)
        layout.scrollDirection = .horizontal
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier:  "cell")
        return collectionView
    }()
    
    
    
    // MARK: - Life Cycle
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        contentView.backgroundColor = .systemPink
        contentView.addSubview(collectionView)
        
        setupCollectionViewDelegate()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        collectionView.frame = contentView.bounds
    }
    
    
    
    // MARK: - Functions
    private func setupCollectionViewDelegate() {
        collectionView.delegate = self
        collectionView.dataSource = self
    }
}



// MARK: - Extensions
extension CollectionViewTableViewCell: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .systemYellow
        return cell
    }
}