[iOS] 동적 테이블 뷰 셀(UITableView Dynamic cell height) 만들기 (estimatedRowHeight, autoDimension)

UITableView 의 Content Type은 두 가지가 있다.

• 정적인 방법 (Static Cells)
• 동적인 방법 (Dynamic Prototypes)

동적인 방법의 Prototype Cell에 대해서 알아볼려고한다.

 

테이블 뷰의 행 높이를 결정하는 크게 두 가지 방식이 있다.

• 모두 동일한 높이를 갖는 방식
• 각 셀마다 다른 높이를 갖는 방식

각 셀마다 다른 높이를 갖는 방식에 내부 콘텐츠에 따라 동적으로 셀의 높이가 가변하는 방식이 또 있다.

 

모두 동일한 높이를 갖는 방식

---

• 테이블 뷰에서 행의 높이를 결정하는 것은 UITableView 객체의 rowHeight 속성이다.높이 설정하는 방법 : 인터페이스 빌더
  • 테이블 뷰 전체에 일괄로 높이를 설정하는 방법
  • 해당 프로토타입 셀 하나에만 높이를 설정하는 방법
  테이블 뷰의 사이즈 인스펙터에서 Row Height을 설정 할 수 있다.

인터페이스 빌더에서 두 가지 방법으로 설정이 가능하다.

이 속성을 통해 설정한 높이값은 테이블 뷰 내의 모든 셀에 공통으로 적용되어 모두 동일한 높이를 가진다.

 

프로토타입 셀이 여러 개 존재하고, 프로토타입마다 셀의 높이를 따로 설정해야한다면

테이블 뷰의 테이블 뷰 셀 사이즈 인스펙터에서 Row Height을 설정 할 수 있다.

 

 

높이 설정하는 방법 : 프로그래밍적으로

콘텐츠의 내용이 고정적인 경우에는

tableView.rowHeight 속성을 통하여 인터페이스 빌더와 동일하게 설정이 가능하다.

self.tableView.rowHeight = <원하는 행 높이>

 

각 셀마다 다른 높이를 갖는 방식

---

그렇다면 tableView(_:heightForRowAt:) 메소드는 언제 사용해야할까 ?

 

각 셀마다 다른 높이를 갖는 방식 이 지금 사용된다.

 

tableView(_:heightForRowAt:) 메소드를 통해 높이가 다른 콘텐츠를 계산하여아래 코드는 책에 있는 예제 코드이다.

CGFloat으로 return 해주면 된다.

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    let row = self.list[indexPath.row]
    print(row.count)

    // 높이를 조절해준다. 기본 높이 60 + 글의 길이가 30자를 넘어갈 때마다 20만큼씩 높이를 늘려준다.
    let height = CGFloat(60 + (row.count / 30) * 20)
    print(height)

    return height
  }

 

내부 콘텐츠에 따라 동적으로 셀의 높이가 가변하는 방식

---

내부 콘텐츠에 따라 동적으로 셀의 높이가 가변하는 방식

내부 콘텐츠에 따라 동적으로 셀의 높이가 가변하는 방식이 왜 나왔을까 ? 생각해보았는데

 

iOS 8.0 버전 이후부터 동적으로 셀 높이가 결정될 수 있도록 하는 방식을 도입하였다.

iOS에서는 이를 셀프 사이징 셀(Self-Sizing Cell) 방식이라고 부르고있다.

 

tableView.estimatedRowHeight

 

 

 

tableView.estimatedRowHeight 설정은 셀프 사이징 셀에서 필수사항은 아니지만 

선택사항보다는 권장사항이라고 생각한다.이유는 아래에 서술했습니다.

셀 전체의 높이를 결정하기 전에 임시로 사용할 셀의 높이 값을 나타낸다

 

UITableView.automaticDimension

테이블 뷰의 rowHeight 속성에 대입되어 높이 값이 동적으로 설정된다. 전체 목록이 모두 만들어진 시점에서 셀 내부의 콘텐츠 레이아웃을 계산하고, 그에 따라라 셀마다 높이값을 재설정한다.

 

 

주의할점은 간혹, 의도대로 not working 하는 경우가 있다.

내부의 콘텐츠 레이아웃을 게산하기 때문에 제약이 바르게 잡아야한다.

 

콘텐츠의 레이아웃을 계산하여, 동적으로 셀 높이값을 재설정한 모습

tableView(_:estimatedHeightForRowAt:) 메소드는 왜 쓰이는걸까 ?

tableView.estimatedRowHeight 를 통하여 모든게 다 되는거 아닐까 ?

 

 

공식 문서에 추정치가 없다면 테이블 로드 시 모든 높이를 계산하는데 비용이 많이 들수있다고한다.

그래서 추정치(estimate of the height of rows) 를 제공하게 되면 테이블 뷰 로드 성능을 향상 시킬 수 있다.

 

가변 콘텐츠의 높이 값이 크게 차이가 나는 경우에는

tableView(_:estimatedHeightForRowAt:) 메소드를 통하여 추정치를 계산해준다면 비용을 아끼고,

로딩 속도를 개선할 수 있다고한다.