UITableViewCell 동적 높이 할당(UITableView Dynamic height)

안녕하세요!! 이번엔 UITableViewCell 컨텐츠에 맞게 크기를 조절하는 방법을 정리했습니다.

이번 글도 노션에서 옮겨와 말이 짧습니다!! 양해해주세용😽

---

UITableView에서 셀의 높이를 설정할 때, 보통은 TableView의 델리게이트 메소드인 heightForRowAt를 이용하여 높이를 주었다.

 

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 60
    }

하지만 셀의 높이가 고정되어 있어서 많은 양의 컨텐츠를 담게되면 컨텐츠가 짤리는 이슈가 발생했다.

긴 문자열을 표시해야 하는 경우, 문자열을 전부 표시하지 못하고 ... 형태로 생략된다.

가운데 있는 Label에 적은 양의 text를 담아낼 때에는 고려할 필요가 없었으나,

사용자의 입장에서 text의 양이 많아진다면 짤린 부분의 내용을 확인할 수 있는 방법이 없기 때문에

컨텐츠의 크기에 따라 셀의 높이를 구하는 방법이 필요하다.

 

이때, 셀의 높이를 컨텐츠의 크기에 따라 달라질 수 있게 구현하려면 UITableView의 프로퍼티를 이용해야한다.

 

tableView.rowHeight = UITableView.automaticDimension

tableView의 rowHeight에 UITableView.AutomaticDimension 값을 할당할 것이다.

즉, 컨텐츠에 맞게 자동으로 높이를 계산해서 반환한다라는 의미이다.

 

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
// heightForRowAt 메서드의 리턴값을 UITableView.automaticDimension으로 처리하는 방법도 있다!!
// 공식문서에서 확인해보면 이 메서드에서 반환되는 값이 rowHeight 속성의 값보다 우선한다고 적혀있다.

이 프로퍼티나 메서드를 사용하는 것 외에도 셀 내부에서 컨텐츠의 AutoLayout도 알맞게 잡아주어야한다.

셀 안의 컨텐츠들의 Constraint로 인해 직접적이든, 추론적이든 높이의 값이 확실히 계산이 되어야 한다는 것이다.

 

이런식으로 높이에 대한 정보가 확실히 있어야 한다.

위 시뮬레이터에서 Label이 생략되는 문제가 발생했으니 Label의 Constraint를 조정해주었다.

 

기존에는 라벨의 Y축에 관련된 Constraint를 라벨을 담고있는 Container View의 Center Y에만 주었더니 런타임에서 높이에 관련된 Warning이 발생했다.

그래서 높이의 값을 확실히 알려주기 위해 Label에 Container View의 top과 bottom에 constraint를 추가했다.

 

그리고 cellForRowAt 메서드에서 Label의 줄 제한을 0으로 수정해주었다. (여러 줄이 될 수 있으니까)

cell.shoppingLabel?.numberOfLines = 0

그리고 시뮬레이터를 실행하여 확인하면, 셀이 컨텐츠의 크기에 맞게 높이가 조절되는 것을 확인할 수 있다! 😃