[StudyWithMe] UITableView - Dynamic Row Height

 

  문제  

채팅화면 구현 시, 유저가 얼마나 긴 채팅을 보낼지 알 수 없으므로, 각 챗의 cell 높이가 텍스트 양에 따라 달라지도록 구현해야 했다.

 

UITableView의 cell 높이를 cell 내부 뷰의 크기에 따라 유동적으로 변하도록 구현하기 위한 방법으로는, 해당 UITableView의 rowHeight 프로퍼티를 UITableView.automaticDimension으로 지정하는 방법이 있다.

 

private func configureTableView() {
    // 생략
    chatsView.tableView.rowHeight = UITableView.automaticDimension
    // 생략
}

 

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

 

 

높이를 dynamic하게 조절하기 때문에 y축 위치(세로 위치)가 잘 잡혀 있어야 하는데, 
centerY를 기준으로 레이아웃을 잡을 경우 UITableView.automaticDimension이 적용되지 않았다.

 

 

 

 

 

  해결  

 

class ChatTableViewCell: BaseTableViewCell {
    // MARK: - Properties
    let chatView = UIView()
 
    // MARK: - Setting Methods
    override func setHierarchy() {
        contentView.addSubview(chatView)
    }
    
    override func setConstraints() {        
        chatView.snp.makeConstraints { make in
            make.width.lessThanOrEqualToSuperview().multipliedBy(0.7)

//            make.centerY.equalToSuperview()
//            👆🏻 UITableView.automaticDimension 동작 X!

            make.verticalEdges.equalToSuperview().inset(12)
//          👆🏻 UITableView.automaticDimension 동작 O!
        }
        
        timeLabel.snp.makeConstraints { make in
            make.bottom.equalTo(chatView)
        }
    }
}

 

 

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