[StudyWithMe] UITableView - Dynamic Header Height

 

내부 뷰의 크기에 따라 UITableView의 HeaderView 높이를 유동적으로 변하도록 구현하기 위한 방법으로는,
UITableViewDelegate의 heightForHeaderInSection 메서드에서 UITableView.automaticDimension를 return하는 것이 있다.

extension ChatsViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return MatchedHeaderView()
    }

    func tableView(_ tableView: UITableView, estimatedHeightForHeaderInSection section: Int) -> CGFloat {
        return 100
    }

    👇🏻👇🏻 이 부분!!
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return UITableView.automaticDimension
    }
}

 

이렇게 UITableView.automaticDimension을 사용하려면, 내부 뷰들의 constraints가 모두 잘 잡혀 있어야 한다.

 

Dynamic Row Height 이슈와 같이,

높이를 dynamic하게 조절하기 때문에 y축 위치(세로 위치)가 잘 잡혀 있어야 하고,
top과 bottom을 기준으로 잡혀 있는지 꼭 확인해야 한다!

 

 

 

  문제  

 

guideLabel.snp.makeConstraints { make in
      make.top.equalTo(matchedLabel.snp.bottom).offset(2)
      make.centerX.equalToSuperview()
}

 

UILabel은 텍스트의 폰트, 양에 따라 높이와 너비가 정해지기 때문에 top과 centerX만 레이아웃을 잡았는데,
아래와 같이 headerView의 높이가 내부 뷰의 크기에 따라 전혀.. 바뀌지 않았다.(systemYellow색이 headerView)

 

 

 

 

 

  해결  

guideLabel.snp.makeConstraints { make in
      make.top.equalTo(matchedLabel.snp.bottom).offset(2)
      make.centerX.equalToSuperview()
      make.bottom.equalToSuperview().offset(-12)  
// bottom 잡지 않으면 heightForHeaderInSection의 UITableView.automaticDimension 동작 X 
}

 

UILabel이 텍스트의 폰트, 양에 따라 높이와 너비가 정해지더라도, top과 함께 bottom도 레이아웃이 잡혀 있어야 dynamic한 headerView의 높이를 구현할 수 있다!

 

cell 뿐만 아니라 header 또한 top과 bottom, 즉 SnapKit 기준으로 verticalEdges 기준으로 레이아웃이 잡혀 있어야만 UITableView.automaticDimension이 적용되는 것을 확인할 수 있었다.