[iOS] 테이블 뷰 컨트롤러2 - UIListContentConfiguration

LEEHAKJIN-VV·2022년 7월 8일
0

iOS 정리

목록 보기
4/7

이번 글은 테이블 뷰에서 기본적인 스타일의 cell을 사용하는 경우에 인스턴스 프로퍼티인 textLabel, detailTextLabel, imageView을 사용하는 것이 아닌 UIListContentConfiguration을 사용하여 데이터를 표시하는 방법을 사용한다.

잘못된 정보가 있는 경우 댓글로 남겨주세요😎

이전글 주소

UIListContentConfiguration

이전 글에서 테이블 뷰 컨트롤러를 사용하여 테이블 뷰를 작업할 때 아래와 같은 메시지를 봄.

TableViewCell의 스타일 중에서 Custom이 아닌 기본적으로 제공되는 스타일을 사용할 시 제공되는 프로퍼티에 접근해야 하는데 아래 3가지가 deprecated된 것이다.

경고문을 살펴보면 3개의 프로퍼티는 이후 사라질 예정이므로, UIListContentConfiguration을 대신 사용하는 것을 권장하는 것을 확인할 수 있다.

UIListContentConfiguration가 뭔지 알아보면...

  • 리스트를 기반으로 하는 content view에 대한 content configuration

  • list content configuration을 사용하여 view에 대한 기본적인 스타일을 얻을 수 있다.

(자세한 내용은 공식문서 참조)

어쨌든 이 structure를 사용하여 list 기반 content view의 content 를 configuartion(구성?)한다고 생각하자.

여기서 우리가 사용할 메소드는 defaultContentConfiguration() 메소드로 이는 UIListContentConfiguration 타입을 반환한다.

메소드는 시스템이 기본적으로 제공하는 스타일 중 선택된 스타일을 반환한다(TableViewCell에서 subtitle이 선택되었다면 스타일이 subtitle인 cell을 반환함). 그러나 스타일만 제공할 뿐 어떠한 content도 포함되지 않았기 때문에 우리는 3가지 작업이 필요하다.

  1. 메소드로 기본적인 스타일 중 현재 선택된 스타일로 된 content를 반환받음

  2. 테이블 뷰에 표현하고자 하는 값을 content의 프로퍼티 (image,text 등)에 할당

  3. 현재 테이블의 행을 구성할 cell의 contentConfiguration프로퍼티에 content를 다시 할당
    (cell.contentConfiguration = content)

마지막 3번을 보면 cell의 인스턴스 프로퍼티 contentConfiguration에 customize 한 content를 할당하는 것을 확인할 수 있다.

contentConfiguration는 cell의 현재 content configuration으로 default 값은 nil이며, 우리가 새로 customize한 cotent를 해당 프로퍼티에 할당할 경우, 현재 cell의 뷰가 새로 할당한 content로 대체된다고 한다.

이제 UIListContentConfiguration가 무엇인지, 어떻게 값을 content에 할당하는지 학습했으니, 직접 적용해 보자.

실습

이번 글은 이전 글처럼 테이블 뷰에 영화 정보를 표시한다. 다른 점은 이전글은 section을 1개로 구성하였다면 이번글은 3개로 구성하며, 영화의 이미지가 추가되었다. 또한 이전 글에 스토리보드 설정, 데이터를 나타낼 클래스 만들기, 컨트롤러 생성 등.. 상세히 설명되어 있으니 기본적인 setting은 여기를 참고하면 됩니다.

우선 실습을 하기 전에 우리의 최종 결과물은 아래 화면입니다.

이전 글과 겹치는 부분, 행의 여백, 색 등등 디자인적인 측면은 따로 다루지 않겠습니다.

먼저 테이블에 데이터를 표시하기 위해 아래와 같이 먼저 미리 구축해놓는다.(평점, 개봉 날짜 등은 다음 글에서 표시할 데이터이므로 미리 생성)

실제로 아래와 같이 미리 데이터를 만들어 놓는 경우보다 서버의 데이터베이스에서 데이터를 가져오는 경우가 더 많을 것이다. 그러나 지금은 간단히 확인해 보는 용도이므로, 직접 하드코딩 함.

위 배열을 기반으로 실제로 테이블 뷰에 표현할 프로퍼티 list를 생성

이번 테이블 뷰는 섹션이 1개가 아니므로 섹션의 수를 반환해야 한다. 이는 UITableViewDataSource 프로토콜의 인스턴스 메소드 numberOfSections(in:)를 사용한다. 매소드에 테이블 뷰 section의 수를 반환하면 된다. (우리가 가지고 있는 데이터는 2차원 배열이므로, 배열의 행 수를 반환)

다음으로 섹션의 header를 구현하기 위해 다음 tableView(_:titleForHeaderInSection:)메소드를 구현한다. 메소드는 data source 객체에게 테이블 뷰의 특정 섹션의 header의 타이틀을 요청하므로 현재 section에게 맞는 header를 문자열 값으로 반환한다. 현재 section에 대한 정보는 두 번째 인자인 section이 가지고 있다.

각 섹션마다 title을 저장하고 있는 프로퍼티 SectionHeaderList을 이용하여 아래와 같이 섹션에 해당하는 header를 반환한다.

각 행의 수를 결정하기 위해 tableView(_:numberOfRowsInSection:) 메소드를 사용한다. 해당 메소드에서 각 섹션에 해당하는 행의 수를 반환하면 된다.

이제 마지막으로 각 행이 화면을 표현할 때 사용하는 메소드tableView(_:cellForRowAt:)를 보자. 사용 방법은 UIListContentConfiguration을 사용하는 점 빼고는 이전 글과 크게 다르지 않다.

우선 현재 구성할 행이 어떤 행인지 알아야 한다. 그래야 행에 맞는 영화 정보를 표시할 수 있기 때문이다. 이는 두 번쨰 인자인 IndexPath에 section과 row에 대한 정보가 저장되어 있으니 참조하면 된다.

다음으로 dequeueReusableCell메소드를 이용하여 재사용할 cell 객체를 반환받는다. 이때 스토리보드에 있는 TableViewCell의 identifier를 인자 값으로 할당하는 것을 까먹지 말자.

이제 글의 목적인 UIListContentConfiguration 객체를 반환하는 defaultContentConfiguration 메소드를 사용한다. 반환된 객체를 content 프로퍼티에 할당한다.

content 프로퍼티에 테이블에 표시하고자 하는 값을 할당하면 된다. 영화의 제목은 text 프로퍼티에, 부가 설명은 secondaryText 프로퍼티, 이미지는 image 프로퍼티에 할당하면 된다.

그런데 여기서 신기한 점을 확인할 수 있었다.

위 사진을 보면 TableViewCell에 image를 나타내는 view?가 없다. 메인 텍스트와 서브 텍스트만 있을 뿐 이미지에 대한 view는 현재 존재하지 않는다.

그러나 위 코드와 같이 defaultContentConfiguration 메소드로 반환받은 객체의 image 프로퍼티에 이미지를 할당하면 cell의 왼쪽에 이미지가 삽입되는 것을 확인할 수 있다.

시스템이 자동으로 이미지를 왼쪽에 삽입하는 것 같다. 그러나 어떻게 동작하는지 정확하게 모르겠다. (아시는 분이 있다면 알려주시면 감사하겠습니다.) 참고로 content.imageProperties.maximumSize.height = 100는 이미지의 높이를 설정하는 코드로, 이 코드가 없으면 이미지가 엄청 커지는 것을 보게 된다.

참고로 defaultContentConfiguration을 사용하여 content에 값을 할당하는 방법은 테이블 뷰에 포함되는 text와 image의 비율을 유지하지 않는다고 한다. (이전 방법인 dequeueReusableCell을 사용하여 cell의 프로퍼티에 직접 값을 할당하는 방식은 비율을 유지함)


이제 여기까지 진행했다면 처음에 봤던 아래 화면을 볼 수 있다.

그러나 기본적인 스타일로 테이블 뷰를 사용하면 평점, 개봉일등, 추가적인 정보를 더 표시할 수가 없다. 그리고 텍스트 위치 변경 등 상황에 따라 테이블 뷰를 다양하게 Custom해야 하므로 다음 글에서는 UITableViewCell을 Custom하는 방법을 다룬다.


참고 자료

공식문서

https://developer.apple.com/documentation/uikit/uilistcontentconfiguration

https://developer.apple.com/documentation/uikit/uitableviewcell/3601057-contentconfiguration

https://developer.apple.com/documentation/uikit/uitableviewdatasource/1614860-numberofsections

https://developer.apple.com/documentation/uikit/views_and_controls/table_views/filling_a_table_with_data

https://developer.apple.com/documentation/uikit/uitableviewcell/3601058-defaultcontentconfiguration

다른 개발자분들의 블로그

https://kirkim.github.io/swift/2021/12/05/uilistcontentconfiguration.html

0개의 댓글