[UIkit] 문제 해결 - contentView ?!!! 💣

사건의 발단

xib, 스토리보드 없이 onlyCode로 UI를 구현하는 공부를 하고 있었다.

전에 xib를 이용해서 구현한 커스텀 레이아웃을 onlyCode로 짜던 도중 문제가 발생했다. 

 

죽어라 스크롤 해도 스크롤이 안되는 진짜 진짜 이해가 안 가는 문제 발생 ☹️ 

코드가 잘못됐나 하고 진짜 계속 다시 보고 다시 읽는데도 내 코드에는 전혀 문제가 없었다. (물론 내 생각)

 

일단 침착하고 deburg view hierarchy를 켜서 문제를 찾기 시작했다. 컬렉션 뷰에서 문제가 있는 것 같아서 컬렉션 뷰부터 확인했는데

Scrolling Enabled!! 분명히 스크롤은 허용되어 있다.. 그래서 다시 한번 컬렉션 뷰 부분 코드를 봤다.

수평 스크롤을 원했기에 scrollDirection은 horizontal이 맞고.. 생각을 좀 하다가 혹시 더미 데이터를 못 읽어온 것은 아닐까 하고 데이터  소스 부분을 다시 확인했다.

내 생각엔 데이터 소스 부분도 코드 상으로는 문제가 없다.

만약 제대로 불러왔으면 셀 사이즈 줄였을 때 나머지 셀들도 나오지 않을까 해서 셀 사이즈를 줄여봤다.

아니 잘 불러왔잖아!!!!! 🤬

차라리 못 불러왔으면 했다. 못 불러왔으면 불러오게 만들면 되니까 근데 데이터도 잘 불러왔다.

너무 답답해서 애플 공식 문서에서 모든 scroll 관련한 것을 뒤지기 시작하고, 구글링 하고, 스택 오버플로고 뭐고 진짜 두 시간은 찾아보고 생각했다. 

가이드에서 scroll만 찾아본 흔적 😢

거의 반 포기 상태로 하염없이 시뮬레이터만 쳐다보다가 갑자기 뭔가 빵 하고 생각났다.

컬렉션 뷰 배경 뒤로 보이는 저 회색 레이아웃!! 저거 뭐지? 저놈의 정체를 찾기 시작했다. 

너 뭐냐?

UITableViewCellSelectedBack? 아 UITableViewCellSelectedBackground구나! selected면

무슨 선택에 관련된 것 같은데 저게 왜 있을까? 고민하다가 저 녀석에 대해 알아야 될 것 같아서 애플 가이드를 찾아봤다.

음? backgroundConfiguration?

과연 ? 

오 없어졌다! 신나서 스크롤 해보니까 안됨.. 

 

 

문제 해결

아무리 봐도 UITableViewCellSelectedBackground이 친구는 문제가 아닌 것 같아서

 다시 한번 deburg view hierarchy를 유심히 살펴봤다.

‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️‼️

저걸 보자마자 tableView 공부할 때 중요할 것 같아서 노트에 밑줄 쳐놓은 한 문장이 생각났다.

"UITableView에는 contentView가 존재하고, 가장 상위에 존재한다" 

아 끝났다. 바로 수정했다.

setView 함수는 이름 그대로 View를 세팅해 주는 함수이다.

UITableViewCell에서 collectionView를 구성해야 하기 때문에 UITableViewCell에 addSubview를 이용해서 view를 생성해 줘야 한다. 근데 이 친구는 tableViewCell이 아니던가?  tableViewCell.. cell.. cell.. contentView !! 

제발 되라 ㅠㅠㅠ 🙏

무려 세 시간을 저 "contentView" 한 글자 때문에!!!!!!

그래도 꽉 막혀서 절대 해결하지 못할 것 같은 문제를 해결하는 이 쾌감 때문에 개발하지 않나 싶다.

 

contentView?

The content view of the "cell object"

The content view of a UITableViewCell object is the "default superview for content that the cell displays."

위에서 잠깐 언급했듯이, UITableView에는 contentView라는 친구가 존재하는데 직역하자면 "셀 개체의 보기 컨텐츠 뷰이다"

즉, UITableView의 최상위에는 contentView가 존재한다. 내가 수정했던 것처럼 contentView에 addSubview를 이용해서 contentView에 바로 추가해 줌으로써 최상위에 컴포넌트들이 노출될 수 있게 하면 된다! 

그니까 내가 만든 컴포넌트들을 저 contentView가 위에서 깔아뭉개고 있던 것이었다고 생각하면 쉽다.

자 아까와 다르게 최상단에 collectionView가 위치하는 것을 볼 수 있다. 

---

 

진짜 별것 아닌 것 같지만 답이 쉽게 보이지 않았다.

정말 너무너무너무너무 해결하고 싶었다!! 

해결해서 기분이 너무 좋고 좀 변태 같지만 재밌었다 🙂

더 열심히 공부해서 이런 실수를 좀 줄여야겠다!

 

기분 좋게 끝 !