UITableViewController의 contentConfiguration 알아보기

요약: 변수에 defaultContentConfiguration을 할당하고 변경사항을 지정한 뒤 셀에 재할당하면 된다. 방식은 크게 다를 거 없고 접근 요소 이름만 좀 바뀌었다고 생각하면 된다. 맺는 글 직전에 요소 정리 해둔 게 있다. 접근 요소가 궁금하다면 그 부분을 참고하도록 하자.

---

여는 글

기본 테이블 뷰를 사용할 때 기본 지정된 요소들에 접근해서 설정해주던 방식을 사용했다. 그리고 아직도 많은 테이블 뷰 커스텀 방법이라며 많이들 소개한다. 그러나!!! textLabel, detailTextLabel, imageView을 더 이상 사용할 수 없게 되면서 기존에 쓰던 방법 대부분이 사용하기 곤란해졌다.

근데 다른 글도 죄다 이거 쓰던데 이제 못쓴다고?

그래서 적어두는 UIListContentConfiguration으로 기본 테이블 뷰 기반 나만의 테이블 뷰 셀 만들기 (셀 커스텀)에 대한 글이다. 그리고 Storyboard는 사용하지 않는다. 코드로만 작성한다.

---

기존 사용법

기존 사용법은 textLabel과 detailTextLabel 등의 구성요소에 접근하여 특성을 바꾸는 식이었다. configuration도 크게 다르지는 않다. 하지만 접근 요소의 이름이나 접근하는 방식이 약간 차이가 난다.

더 이상 사용할 수 없다고 안내하기 때문에 iOS 15 이상의 최저 타겟 앱에서는 configuration 쓰는 게 맞다. 그냥 이 글이 iOS 15 이상에서 사용하는 기본 테이블 뷰 사용법이라고 생각하면 될 것 같다.

---

UIListContentConfiguration 사용법

맛보기

내가 처음 이걸 알아보게 된 이유는 설정 화면 만들기였다. 간략하게 설명하자면 섹션이 나뉘어 있고 왼쪽과 오른쪽에 라벨, 악세서리 뷰가 있다. contentView에 새로운 구성요소를 추가하지 않고 만든 것이다.

위의 상태를 만들기 위해 설정한 요소들을 본다면 다음과 같다. 전체가 아닌 일부다.

// 나는 cellForRowAt 매개 변수를 가진 tableView 함수의 내부에 사용했다.
let cell: UITableViewCell = UITableViewCell()
var configuration = cell.defaultContentConfiguration() 
configuration.secondaryTextProperties.lineBreakMode = .byClipping
configuration.prefersSideBySideTextAndSecondaryText = true
... // 데이터 부분 생략
cell.accessoryType = .detailButton //configuration으로 모든 걸 할 수는 없다.
cell.contentConfiguration = configuration

여기까지만 봐도 아마 기존 사용 방식을 쓰던 사람들은 대부분은 이해했을 것이다. 이 이하의 내용은 자세한 설명이므로 대충 눈치껏 사용할 수 있을 것 같다면 건너뛰어 요소 항목으로 넘어가 어떤 항목이 있는지 둘러보면 효율적일 것이다.

---

톺아보기

자세하게 살펴보도록 하자. 아무것도 없는 셀에서 위와 같이 만들기 위해 다음의 과정을 거친다.

1. 기본 UITableViewCell을 그대로 셀로 생성한다.

2. 셀의 defaultContentConfiguration을 별도의 변수에 저장한다.

3. 변경 사항을 설정한다.

4. 셀의 contentConfiguration에 설정한 변수를 할당한다.

1. 기본 UITableViewCell 생성하기

기본 셀을 사용할 것이기 때문에 UIKit에서 기본적으로 제공하는 UITableViewCell클래스를 사용한다.

let cell: UITableViewCell = UITableViewCell()

셀을 등록하는 과정인 register는 사용하지 않았다.

2. 셀의 defaultContentConfiguration을 별도의 변수에 저장

UITableViewCell이 기본적으로 가지고 있는 contentConfiguration인 defaultContentConfiguration을 변수로 저장한다. 공식문서 defaultContentConfiguration()를 살펴보면 다음과 같이 말한다.

기본적인 list content configuration이지만 content (내용)이 없기 때문에 지정해주어야한다. default configuration을 얻어 내용을 정하고 다른 변경사항을 설정한 뒤 현재 뷰(셀)의 contentConfiguration으로 지정하면 된다.

앞 단계에서 선언한 cell로부터 defaultContentConfiguration을 얻는다. 이 때 주의할 점이 var로 선언해야한다는 것이다. let으로 선연하면 오류 메시지를 띄운다.

var configuration = cell.defaultContentConfiguration()

3. 변경 사항 설정

변경사항은 아래 요소 항목을 참고하면 도움이 될 것이다. text, secondaryText, image 세 가지를 설정할 수 있다. 셀 도식을 보면 다음과 같은 형태로 이루어진다. 제일 위에 예시 셀을 보면 알 수 있듯이 순서는 image, text, secondaryText 순으로 되어있고, 글자 정렬은 숫자가 아닐 때를 기준으로 text는 왼쪽 정렬, secondaryText는 오른쪽 정렬된다. image가 없을 경우에는 여백이 남지 않고 text가 image 자리까지 왼쪽으로 온다.

accesoryType은 여전히 셀에서 직접 설정해야한다. configuration에서 설정하는 사안이 아니다. cell의 selectionStyle이라던가 기존에 하던 방식대로 cell의 하위 요소로 설정한다. accesoryType 도 마찬가지다.

// text 값 설정
configuration.text = "작성자 이름"
// secondaryText 값 설정
configuration.secondaryText = "햄또븐"
// secondaryText의 말줄임표 설정
configuration.secondaryTextProperties.lineBreakMode = .byClipping
// secondaryText를 아래가 아닌 오른쪽에 보도록 설정
configuration.prefersSideBySideTextAndSecondaryText = true
// accessoryType을 오른쪽 화살표 모양으로 설정
cell.accessoryType = .disclosureIndicator

이 때, 주의할 점이 있는데, 기존 사용 방식에서는 값과 특징 설정을 전부 한 요소에서 하위 요소로 접근해 결정했다. 그런데 configuration에서는 값 설정은 각각 요소의 이름(text 등)으로 해야하고 특징이나 스타일 설정은 각 요소의 Properties의 하위 요소에 접근해 설정해야한다.

4. 셀의 contentConfiguration에 설정한 변수를 할당

설정한 내용의 contentConfiguration을 셀에 적용시키기 위해 다음과 같이 할당해준다.

// 지금 설정한대로 cell에 적용
cell.contentConfiguration = configuration

이렇게 하면 셀에 마음대로 설정한 내용을 적용시킬 수 있다.

심화학습

조금 심화 버전이지만 도움이 될 것 같아 남겨둔다. 섹션에 따라 configuration을 다르게 적용하는 코드다. cellForRowAt 매개변수를 가진 tableView 함수의 전체 코드를 첨부해둔다.

// UITableViewController를 상속받는 클래스에 존재하는 함수다.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = UITableViewCell()
        var configuration = cell.defaultContentConfiguration()
        configuration.secondaryTextProperties.lineBreakMode = .byClipping
        configuration.prefersSideBySideTextAndSecondaryText = true
        switch indexPath.section {
            case 0:
                configuration.text = "섹션 0의 title"
                configuration.secondaryText = "섹션 0의 detail"
                cell.accessoryType = .disclosureIndicator
            case 1:
                configuration.text = "섹션 1의 text"
                configuration.secondaryText = "섹션 1의 secondaryText"
                switch CustomEnum {
                    case .information:
                        cell.accessoryType = .detailButton
                    case .string:
                        cell.accessoryType = .disclosureIndicator
                    default:
                        cell.accessoryType = .none
                }
            default:
                break
        }
        cell.contentConfiguration = configuration
        return cell
    }

---

요소

이전에 셀 편집하던 방식과 비교할 수 있게 이전에 사용하던 요소와 함께 적어두었다. contentConfiguration에 사용할 때는 요소 이름 항목의 내용으로 접근하면 된다. "3. 변경 사항 설정"의 그림을 보면 더 쉽게 파악할 수 있을 것이다.

---

맺는 글

swift 관련하여 커스텀 셀이라고 검색하면 다들 DIY(Do It Yourself) 형식으로 된 강의나 블로그 글이 대부분이다. 그런데 기존에 제공되는 UITableViewCell과 (설정 화면같이) 유사하다면 굳이 각각의 요소를 새로 만들어가며 셀을 창조할 필요 없다. 새로운 셀 클래스도 만들어야하지 않은가...

이 방법은 DIY가 아닌 CIY(Custom It Yourself) 방식으로 UITableViewCell을 만드는 것이다. 자신이 만들고자 하는 셀의 형태와 내용을 파악한 뒤 효율적인 방법을 사용하도록 하자.

---

여담

예시가 된 설정화면의 앱은 내가 만든 Monthly Piece라는 앱이고 버전 1.1.0에 해당하는 화면 중 하나다. 설정화면 만들고 싶은데 앱 내 설정화면을 만드는 걸 검색해보니 다 옛날 방식이거나 아이폰 설정 앱 여는 법 가르쳐 주는 게 나왔다. 슬픈 일이지만, 없다면 내가 홍익인간 해야겠지... 다들 swift 최신 버전에서 적용 가능한 내용의 글 많이 올려주면 좋겠다.