팀 프로젝트를 시작했다.
졸업하려면 해야하는 프로젝트다.
우선 뷰 부터 만들려고 초안을 만들었는데, 테이블뷰같이 목록이 있으나, 각 셀들을 옆으로 넘기면 또 항목들이 있는 뷰를 원했다.
찾아보니 TableView의 Cell 안에 Collection View를 넣으면 해결되는 문제였다.
그래서 방법을 정리해보고자 글을 쓴다.
1. TableView 배치
제약
Navigation Bar, Tab Bar 에 임베드한 뷰이기 때문에 TableView를 화면 꽉 채워서, superView에 대한 제약을 top, bottom모두 0으로 주었다.
TableViewCell
Custom으로 두면 된다.
2. Collection View 배치
제약
내가 델리게이트를 전부 연결하고 데이터를 띄웠는데도, 표시가 제대로 안되고 배경 뷰만 작게 보이는 현상이 있었는데, 제약을 제대로 주지 않았기 때문이었다.
잘 보이게 하고 싶으면 SuperView(여기선 TableViewCell이다)에 대해 제약을 top, bottom, leading, trailing 모두 0으로 주어야 한다.
CollectionViewCell
여기에 이제 뷰나 기타 레이블 등 표시할 뷰들을 배치하면 된다.
배경 뷰를 배치한다면 Cell의 크기를 어트리뷰트 탭에서 제대로 고정된 값으로 Fix해주어야 한다.
3. TableView Delegate, CollectionView Delegate
TableView는 VC에
TableView의 Datasource와 Delegate는 항상 하던대로 배치된 VC에 연결해주면 된다.
당연히 그렇게 되니 구현 또한 VC에서 해주면 된다.
TableViewCell 스크립트 생성
TableViewCell CocoaTouch 파일을 생성해야 한다.
CollectionViewCell 스크립트 생성
CollectionViewCell CocoaTouch 파일을 생성해서 이 안에 셀 안에 있던 아웃렛을 모두 연결해준다.
TableViewCell에 CollectionView Delegate 위임
중요하다. 난 이거때문에 찾아보면서 해맸다.
TableViewCell의 인덱스 등 표시값을 표현하려면 CollectionView의 내용을 TableViewCell에서 관리해야한다.
(논리적으로 생각해보아도 CollectionViewTable이 TableViewCell 안에 있으니 당연한 얘기이다.)
awakeFromNib 메소드에서 CollectionView의 DataSource, Delegate를 self에 위임하자.
그리고 구현하자.
하나의 테이블 뷰의 컬렉션 뷰에서 두 종류의 커스텀 셀을 사용하는 방법
화면을 하나의 테이블 뷰로 구성했으나, 커스텀 셀의 모양이 두 가지여야 했다.
야매로 이렇게저렇게 해보다가, 컬렉션 뷰 안에 프로토타입 셀을 두 개를 만들고 Cell Identifier을 따로 두고, Cell Class 또한 두개를 두어서 만들었다.
이후 TableView의 Section의 값을 넘겨받아, CollectionView DataSource에서 어떤 cell을 deque하여 사용할지 분기에 따라 코드를 작성하면 된다.
안 찾아보고 이래도 되지 않을까? 하고 작업했기에 맞는 방법이 아닐 수 있음을 미리 설명한다.
1. CollectionView 안에 새로운 Cell 생성
2. 새로운 CollectionViewCell의 Identifier을 기존의 Cell과 다르게 설정
3. 새로운 Cell의 CocoaTouch Class 생성
4. TableViewCell에 CollectionView Delegate 및 DataSource 연결 확인(중요)
는 사실 이미 동일한 컬렉션 뷰이기때문에 앞에서 이미 델리게이트는 위임해주었다. 혹시 모르니 확인만 하자.
5. 분기에 따라 TableViewCell의 CollectionViewCell 델리게이트에서 어떤 cell을 Deque하여 사용할 것인지 작성
여기선 분기점을 section으로 해주었다.
section은 테이블뷰 델리게이트에서 알 수 있기 때문에(VC), 또한 tableViewCell(CocoaTouch Class)로 이 값을 넘겨 판단하여 CollectionView의 데이터소스를 채울 수 있다.
사실 처음에는 잘못 생각해서 테이블뷰 셀에 또 다른 테이블뷰 셀로 넣었었다.(이 안에 또 컬렉션 뷰 존재) 하지만 그렇게 되면, 컬렉션 뷰(셀말고)또한 두개가 되고 복잡해지므로 크래시가 날 확률이 높고 의도한 디자인도 아니다. (난 델리게이트 다 연결했는데도 오류나길래 엥 왜지? 하다가 생각해보면 당연한것을 지금 쓰면서 깨달음..)
TableView와 CollectionView 사용 시 스크롤이 안되는 현상
이거 가지고 삽질 엄청 했고, 심지어 아무거나 만지다가 갑자기 또 스크롤이 돼서 당황했다.
근데 예상되는 걸로는 유저 이벤트를 받냐 안받냐를 체크한 것이다.
해결법: TableView, Collection View등 하위 뷰들의 사용자 이벤트 받기 유무를 전부 받기로 체크한다
하나라도 빠지면 안되더라... 꼭 확인하자
