NETFLIX CLONE 2편 (테이블뷰 선언, 테이블 뷰 셀 내에 컬렉션뷰 삽입)

 

✅ 홈뷰컨트롤러에 테이블뷰 선언 

✅  컬렉션뷰테이블셀 생성

✅  각 테이블 셀에 컬렉션 셀 삽입

✅  테이블 헤더 구현 

 

---

 

✅ 홈뷰컨트롤러에 테이블뷰 선언 

• 테이블 뷰 생성 

import UIKit

class HomeViewController: UIViewController {
    
    // MARK: - 테이블뷰 선언
    private let homeFeedTable: UITableView = {
        let table = UITableView()
        table.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        return table
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        
        
        view.addSubview(homeFeedTable)
        
        
        homeFeedTable.delegate = self
        homeFeedTable.dataSource = self
    }
    
    
    // 테이블뷰 제약조건 설정
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        homeFeedTable.frame = view.bounds
    }
}

extension HomeViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        
        cell.textLabel?.text = "Hello World"
        
        return cell
    }
}

 

 

 

✅  컬렉션뷰테이블셀 생성

• 컬렉션뷰테이블셀 파일 구현 

import UIKit

class CollectionViewTableViewCell: UITableViewCell {
    
    static let identifier = "CollectionViewTableViewCell"
    
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        contentView.backgroundColor = .systemBlue
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
}

 

 

• 홈뷰컨트롤러 파일 구현 
• extension 부분에서 테이블 뷰의 전체 셀의 개수와 각 셀 내에 포함될 셀의 개수를 확인하는 함수 구현 

import UIKit

class HomeViewController: UIViewController {
    
    // MARK: - 테이블뷰 선언
    private let homeFeedTable: UITableView = {
        let table = UITableView(frame: .zero, style: .grouped)
        table.register(CollectionViewTableViewCell.self, forCellReuseIdentifier: CollectionViewTableViewCell.identifier)
        return table
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        
        
        view.addSubview(homeFeedTable)
        
        
        homeFeedTable.delegate = self
        homeFeedTable.dataSource = self
    }
    
    
    // 테이블뷰 제약조건 설정
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        homeFeedTable.frame = view.bounds
    }
}

extension HomeViewController: UITableViewDelegate, UITableViewDataSource {
    
    // 전체 셀 갯수
    func numberOfSections(in tableView: UITableView) -> Int {
        return 20
    }
    
    
    // 각 셀에 들어갈 셀의 갯수 
    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, heightForHeaderInSection section: Int) -> CGFloat {
        return 40
    }
}

 

 

 

 

✅  각 테이블 셀에 컬렉션 셀 삽입

• collectionView 변수를 통해 컬렉션 뷰 선언 
• 여기서 itemSize를 지정하지 않으면, 각 셀에 들어갈 컬렉션 셀이 보이는 화면에 채워져서 나온다. 
• 이때, 가로축으로 스크롤 되는게 아니라, 셀의 높이 맞춰 각 컬렉션뷰 셀의 크기가 조절되어 나온다.

import UIKit

class CollectionViewTableViewCell: UITableViewCell {
    
    static let identifier = "CollectionViewTableViewCell"
    
    private let collectionView: UICollectionView = {
       
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.itemSize = CGSize(width: 144, height: 200)
        
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        return collectionView
    }()
    
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        contentView.backgroundColor = .systemBlue
        
        contentView.addSubview(collectionView)
        
        collectionView.delegate = self
        collectionView.dataSource = self
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    // collectionView 제약조건 설정 
    override func layoutSubviews() {
        super.layoutSubviews()
        collectionView.frame = contentView.bounds
    }
}


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 = .systemRed
        
        return cell
    }
    
}

 

 

 

 

✅  테이블 헤더 구현 

• 홈뷰컨트롤러 파일 내에 코드 구현 
• viewDidLoad() 메서드 내에 아래 코드 구현 

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .systemBackground


    view.addSubview(homeFeedTable)


    homeFeedTable.delegate = self
    homeFeedTable.dataSource = self


    // homeFeedTable의 헤더 공간 만들기
    homeFeedTable.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 450))
}

 

 

 

 

https://youtu.be/rp_wJMoKu5o?si=kid9C57MCg5e0iwA