[UIkit] CollectionView와 tableView를 이용해서 커스텀 레이아웃 만들기

스포티파이

그동안 collectionViewFlowLayout으로 단일 섹션, 수직 방향 레이아웃만 만들었었다.

유튜브 뮤직이나 스포티파이 등 여러 슈퍼앱을 보면 위의 사진과 같이 여러개의 섹션에 수직, 수평 방향의 레이아웃이 한번에 들어있는 것을 볼 수 있다. 그래서 이번엔 그런 커스텀 레이아웃을 구성해보려고 한다.

 

어떻게 만들건데 ?

내가 생각한 방법은 뷰 컨트롤에 메인 테이블 뷰를 만들어서 테이블 뷰1(수평 방향 레이아웃), 테이블 뷰2(수직 방향 레이아웃)을 넣고 각각의 테이블 뷰에 컬렉션 뷰를 넣어서 구현하려고 한다.

 

과정

일단 메인 뷰 컨트롤러에 테이블 뷰를 만들어 줬다.

메인 테이블 뷰에 넣어줄 테이블 뷰1(수평 방향 레이아웃), 테이블 뷰2(수직 방향 레이아웃)를 xib로 만들고 정의했다. 이 테이블 뷰 안에는 해당 컨텐츠를 출력 할 컬렉션 뷰가 포함되어 있다.

테이블 뷰에 들어 갈 cell도 마찬가지로 xib로 구성했다.

그리고 xib로 만든 셀을 register 메소드를 이용해 컬렉션 뷰의 셀에 연결 해주었다.

그리고 메인 뷰 컨트롤러에서 delegate와 datasource를 정의해주면 된다.

 

완성 작품!

 

문제점 ?

1. 셀 하나씩 동적인 너비를 갖게 하고 싶은데 아직 구현하지 못했다.

 

2. 메인 테이블 뷰 스크롤과 테이블 뷰2(수직 방향 레이아웃)의 스크롤링이 겹친다고 할까? 테이블 뷰2의 스크롤이 잘려서 메인 테이블 뷰 스크롤을 내려야 테이블 뷰2의 스크롤을 다 내릴 수 있다.

 

3. 모달 구현 실패. 내가 구현한 방식은 메인 테이블 뷰에 섹션 테이블 뷰 2개를 넣었고, 그 섹션 테이블 뷰의 셀에 컬렉션 뷰를 넣은 다음 컬렉션 뷰에 xib 셀을 넣는 방식임. 그래서 메인 뷰 컨트롤러는 테이블 뷰 2개만 만드는게 끝임. bgPhotoTableCell(UITableViewCell 타입)에서 collectionView를 register로 등록해서 사용하기 때문에 collectionView에 대한 delegate와 datasource를 bgPhotoTableCell 클래스에서 정의하고 있음. bgPhotoTableCell에서 정의한 delegate에서 didSelectItemAt을 이용해서 모달을 띄우려고 했으나 tableViewCell에는 present 사용 불가 ..