iOS grouped TableView의 headerView 제거하는 방법들

 

 

안녕하세요 멍구입니다. 🤗
오늘은 iOS 개발자분들이 자주, 최소한 한번 쯤은 고민해보셨을 법한 주제를 가져왔습니다.
바로 iOS 개발 간 grouped 스타일의 테이블뷰의 헤더 제거하는 방법입니다. 그럼 곧 바로 고고 하겠습니다.

 

 

---

iOS grouped TableView 헤더 제거 전, grouped TableView UI 설정하기 

 

먼저 헤더뷰를 제거해볼 grouped tableView를 선언하겠습니다. 인터페이스 빌더에서 테이블뷰를 만들고 IBOutlet으로 연결해주는데요. attributeInspector에서 테이블뷰를 grouped로 설정해주셔야 합니다.

tableView 배경색은 회색과 구분이 가는 색상으로 설정해주세요 그래야 헤더뷰, 테이블뷰 간 구분이 더 잘 갑니다. 위에선 .lightGray를 설정했는데 구분이 가는 색상으로 바꾸시면 더 구분이 가실겁니다!

또한 delegate, dataSource에 self를 넣어줍니다. 

 

 

numberOfRowsInSection, cellForRowAt은 기본적인 셀 형태를 보여주기 위해 설정합니다. basicTableViewCell 식별자는 InterfaceBuilder에서도 반드시 설정해주셔야 합니다. 이제 테이블뷰 화면을 보도록 하겠습니다!

 

 

 

group 타입의 테이블뷰는 기본적으로 헤더뷰를 갖고 있는데요. 헤더뷰를 보이지 않게 하고 싶다면 어떤 방법이었든 몇가지의 처리가 필요합니다. 위의 모습은 헤더뷰가 남아있어 회색의 테이블뷰 셀이 최상단과 살짝 이격되어있는 것을 보실 수 있습니다.

그럼 이제 grouped tableView의 헤더뷰를 제거해보도록 하겠습니다.

 

 

---

grouped TableView 제거 첫번째 방법

첫번째 방법, 헤더뷰를 nil로 설정하면서 안보이게 할 수 있는 괜찮은 방법 중 하나입니다. viewForHeaderInSection의 리턴값을 nil로, heightForHeaderInSection의 높이를 CGFloat.leastNormalMagnitude 혹은 CGFloat.leastNonzeroMagnitude로 설정해주시면 됩니다. 그냥 높이 값으로 0을 넣어 리턴하시면 상황에 따라 헤더뷰가 가려지지 않고 그대로 유지되는 경우가 있으니 참고하시기 바랍니다. 

viewForHeaderInSection에 UIView()를 리턴해도 헤더뷰가 보이지는 않지만 불필요한 UIView를 생성하는 것이므로 바람직하지 않습니다. 

 

 

 

---

grouped TableView 제거 두번째 방법

두번째 방법은 테이블뷰의 tableHeaderView에 높이가 없는 UIView를 넣어주면서 헤더뷰를 나오지 않게 하는 방법입니다.
실제로 헤더뷰가 보이지는 않지만 이 방법의 경우 하나의 UIView를 불필요하게 가지고 있는 방법으로 첫번째 방법보다는 별로인것 같습니다. 그럼 헤더뷰가 잘 처리되었는지 보겠습니다. 

 

 

네, 이제 헤더뷰가 보이지 않고 테이블뷰 셀이 테이블 뷰 최 상단에 찰싹 붙은 것을 보실 수 있습니다. 

 

---

grouped TableView 제거, 그 외의 방법은 ?

좀더 간단하게, 헤더뷰를 nil 처리하면서 안보이게 하는 방법은 없을까 고민해봤지만 아직까지 찾은 최적의 방법은 1번째 소개해드린 방법이었습니다. 그 외에 테이블뷰의 contentInset을 인위적으로 조절하거나, plain tableView를 사용하는 등의 방법이 있겠지만, grouped TableView의 목적을 살리면서 헤더뷰를 안보이게 하는 방법은 보통 위에 설명드린 내용과 같이 정리될 수 있을 것 같네요.

grouped tableView의 헤더뷰를 nil로 설정하면서 보이지 않게 할 수 있는 더 좋은 방법이나 의견이 있으시면 의견, 댓글 남겨주시면 감사하겠습니다.
그럼 오늘은 여기까지, 즐거운 하루 되세요 🥰