[UIKit] 테이블뷰(TableView)안에 컬렉션뷰(CollectionVeiw) 만들기

기본 테이블뷰 만드는 법!!

https://nlestory.tistory.com/69

[iOS/Swift]테이블뷰(TableView) 만들기

 

 

홈화면에서 스크롤뷰를 지워주고 테이블뷰를 추가한다

 

테이블셀을 만들어준다!

코코아터치파일에서 UITableViewCell 파일을 선택하고 Also create XIB file 을 체크하면 2개의 파일이 생성

테이블셀에 컬렉션뷰를 넣어주었다!

 

 

컬렉션뷰 셀을 만들어보자

테이블뷰 셀과 동일한 방법으로 만든 다음에 셀의 이미지뷰와 라벨을 넣어주었다

@IBOutlet 선언 미리 해주기

테이블뷰나 컬렉션뷰 둘다 마찬가지로 셀 파일을 만들게 되면 Identifier 작성해주기!! 헷갈리지않게 클래스이름이랑 동일하게 해줌

 

이제 컬렉션뷰셀을 테이블뷰에 연결시켜준다

테이블셀에는 viewDidLoad가 없음, 대신 awakeFromNib()이 처음으로 실행, 여기에 해줌

이것의 오류는 컬렉션뷰의 딜리게이트와 데이터소스를 상속해주고 사용해야한다는 뜻!

옆에 Fix버튼을 누르면 바로 자동으로 생성된다!

 

더미데이터를 위해서 구조체를 하나 생성해주고 이미지와 이름을 받게 한다

    let homeRecommend: [HomeRecommend] = [
        HomeRecommend(recommendImage: UIImage(named: "menu1_aa")!, recommendTitle: "아이스 카페 아메리카노"),
        HomeRecommend(recommendImage: UIImage(named: "menu2_bunt")!, recommendTitle: "번트 치즈 케이크"),
        HomeRecommend(recommendImage: UIImage(named: "menu3_jamong")!, recommendTitle: "아이스 자몽 허니 블랙티"),
        HomeRecommend(recommendImage: UIImage(named: "menu4_tiramisu")!, recommendTitle: "마스카포네 티라미수 케이크"),
        HomeRecommend(recommendImage: UIImage(named: "menu5_purplesour")!, recommendTitle: "퍼플 사워 블렌디드"),
        HomeRecommend(recommendImage: UIImage(named: "menu6_thechokchok")!, recommendTitle: "The 촉촉 초콜릿 생크림 케이크"),
        HomeRecommend(recommendImage: UIImage(named: "menu7_rich")!, recommendTitle: "리치 가나슈 케이크"),
        HomeRecommend(recommendImage: UIImage(named: "menu8_jeju")!, recommendTitle: "제주 비자림 콜드 브루"),
        HomeRecommend(recommendImage: UIImage(named: "menu9_sparkling")!, recommendTitle: "스파클링 시트러스 에스프레소"),
        HomeRecommend(recommendImage: UIImage(named: "menu10_redvelvet")!, recommendTitle: "레드벨벳 크림치즈 케이크")
    ]

extension TableViewCellHomeRecommend: UICollectionViewDelegate {
    
}

extension TableViewCellHomeRecommend: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return homeRecommend.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionViewRecommend.dequeueReusableCell(withReuseIdentifier: "CollectionViewCellHomeRecommend", for: indexPath) as! CollectionViewCellHomeRecommend
        
        cell.homeRecommendImage.image = homeRecommend[indexPath.row].recommendImage
        cell.homeRecommendTitle.text = homeRecommend[indexPath.row].recommendTitle
        
        return cell
    }
    
}

extension TableViewCellHomeRecommend: UICollectionViewDelegateFlowLayout {

    //컬렉션뷰 각각 셀 하나의 크기
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 130, height: 180)
    }
    
}

더미데이터를 넣어주고 컬렉션뷰에 넣어준다

마지막은 컬렉션뷰의 셀 하나의 사이즈를 정해주는 것! 두둥! 나의 컬렉션뷰 이미지뷰 사이즈가 130*130이므로 저렇게 설정해주었다

지금까지는 컬렉션뷰가 테이블안에 들어있는 상태이고 이제는 테이블뷰에 나타내는 것을 해야함

테이블뷰가 있는 ViewController에 간다

//테이블뷰에 셀 연결
let tableViewCellHRNib = UINib(nibName: "TableViewCellHomeRecommend", bundle: nil)
self.mainTableView.register(tableViewCellHRNib, forCellReuseIdentifier: "TableViewCellHomeRecommend")
//테이블뷰 딜리게이트
mainTableView.delegate = self
mainTableView.dataSource = self
//구분선 없애기
mainTableView.separatorStyle = .none

viewDidLoad에 작성하여 만든 테이블뷰를 나의 메인 UITableView와 연결한다

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = mainTableView.dequeueReusableCell(withIdentifier: "TableViewCellHomeRecommend", for: indexPath) as! TableViewCellHomeRecommend
        
        cell.config()
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        //테이블뷰의 셀 높이
        return 280
    }
 }

일단 컬렉션뷰가 들어있는 테이블셀 한개를 넣어주기때문에 개수를 1개를 지정하고

테이블셀과 컬렉션뷰가 들어있는 테이블셀 파일을 연결시킨다.

마지막으로 테이블뷰 하나의 셀 높이를 지정해준다!! 

 

아아 그리고 컬렉션뷰 스크롤이 가로로 나올때는 컬렉션뷰가 들어있는 테이블뷰셀에 가서 인스펙터옵션을 변경해주면 된다

오른쪽에 보면 scroll Direction 을 Horizontal로 변경해주면 가로스크롤이 가능하다!

 

 

 

요롷게 설정하면!!

 

왼쪽에 딱 달라붙어있는 컬렉션뷰를 띄어주는 방법

override func awakeFromNib() {
    super.awakeFromNib()

    registerXib()
    registerDelegate()

    //컬렉션뷰안에 있는 컨텐츠에 대한 위치
    collectionViewRecommend.contentInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
}

컬렉션뷰 너비를 건들이지 않고 UIEdgeInsets 를 이용하여 컨텐츠의 간격을 준다.

 

 

 

 

다음 번에는 테이블뷰셀을 여러개 추가하여 테이블뷰를 만들어 보겠다!!!