본문 바로가기
iOS/UI

.grouped, .insetGrouped style tableView에서 위아래 여백 제거하기

by 바등쪼 2023. 2. 11.

생성일: 2022년 7월 3일 오전 1:28

 

UITableView(frame: .zero, style: .insetGrouped) 또는

UITableView(frame: .zero, style: .grouped) 처럼 style을 지정해준다면 테이블 뷰에 기본적으로 header, footer가 들어가서 원하는 크기의 테이블뷰가 생성되지 않는다.

문제 화면

보기 편하게 테이블 뷰의 backgroundColor를 .white로 주었다.

각 셀의 높이를 50, 셀의 개수 4개 ⇒ 총 높이 200 이기 때문에 TableView의 높이를 200으로 지정해주었다.

하지만 위의 사진처럼 위에 기본 헤더가 존재해서 원하는대로 UI가 구현되지 않고 아래의 cell이 잘려서 보이게 된다.

해결 방법

  • TableView의 Header와 Footer의 높의를 최소로 설정한다.
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { UIView() } 
    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? { UIView() }
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { .leastNormalMagnitude } 
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat { .leastNormalMagnitude }
  • content inset 없애기

tableView.contentInset = .zero tableView.contentInsetAdjustmentBehavior = .never

실행 결과

  • header와 footer가 사라져서 높이 200에 맞게 cell 4개가 알맞게 들어간 것을 확인했다.

흰색 배경 제거한 화면

댓글