[WWDC20] Modern Cell Configuration: Basics of Configuration

Bagics of Configuration

iOS 13에서 tableView의 Cell을 구성했던 방법

iOS 13에서는 cell에 내장되어 있는 imageView와 textLabel 속성을 사용해 image와 text를 구성했다.

let cell: UITableViewCell = ...

cell.imageView?.image = UIImage(systemName: "star)
cell.textLabel?.text = "Hello WWDC!"

새로운 configuration API를 사용해 cell을 구성하는 방법

let cell: UITableViewCell = ...

// 먼저 cell에 defaultContentConfiguration을 요청한다.
// 요청하면 content가 설정되지 않은 새 구성(configuration)이 반환된다.
var content = cell.defaultContentConfiguration()

// 이 구성(configuration)이 가지고 있는 cell 및 tableView의 기본 스타일에 image와 text를 설정한다.
content.image = UIImage(systemName: "star)
content.text = "Hello WWDC!"

// contentConfiguration 속성을 설정한 cell에 구성(configuration)을 적용한다.
// contentConfiguration을 사용하기 때문에 UIImageView 또는 UILabel을 직접 다루지 않는다.
// 모든 속성은 configuration 자체에 설정되어 있다.
cell.contentConfiguration = content

• configuration의 사용으로 cell의 기본 layout과 appearance를 독립적으로 사용할 수 있게 되었다.
• configuration은 cell뿐만 아니라 configuration을 지원하는 모든 view에 적용할 수 있다. (ex: headerView, footerView 등)
• configuration은 content, styling, metrics and behavior과 같은 특정 상태에 대한 view의 appearance를 나타낸다.
• configuration은 속성의 묶음일 뿐이다. view 또는 cell에 적용하기 전까지 아무 작업도 수행하지 않는다.

Background Configuration

Background Configuration은 일반적인 background의 appearance를 빠르게 지정할 수 있는 여러 속성을 가지고 있다.

• Background Color
• Visual Effect
• Stroke
• Insets
• Corner Radius
• Custom View

List Content Configuration

List Content Configuration은 UITableViewCell과 마찬가지로 cell, header 그리고 footer에 대한 기본 레이아웃을 제공하지만 UITableViewCell보다 더 강력한 configuraion을 제공한다.

• Image
• Text
• Secondary Text
• Layout Metrics
• Behaviors

Background Configuration과 List Content Configuration은 함께 사용되며 공통된 설계 원칙이 있다.

1. 가볍고 생성(create) 비용이 저렴하다.

2. 값 타입(value type)이다. 즉, configuration은 독립적이며 configuration에 대한 변경사항은 적용되기 전까지 다른 어떤 것에도 영향을 주지 않는다.

3. cell을 처음 구성하거나 구성된 cell을 업데이트 하려면 configuration을 새로 설정해야 한다. 이전 configuration의 적용 여부에 대해서는 신경 쓸 필요 없다.

var content = defaultContentConfiguration()

// 원하는 대로 configuration 설정
content.text = ...

cell.contentConfiguration = content

Configuration State

Configuration State는 cell과 view를 구성하는데 사용하는 다양한 input을 나타낸다. (ex: UITraitCollection, Highlighted, Selected, Disabled, Focused)

*UITraitCollection? - The iOS interface environment for your app, including traits such as horizontal and vertical size class, display scale, and user interface idiom.

collectionView 또는 tableView의 cell, header 그리고 footer는 각각 고유한 Configuration State를 가지고 있다.

Example. Configuration State에 따른 사용자 정의 appearance

Configuration State에 따른 cell(collectionView 또는 tableView)의 appearance를 사용자 정의하기 위해서는 'updateConfiguration(using state)'를 사용해야 한다.
(어떤 이유로든 cell을 재구성해야 하는 경우 setNeedsUpdateConfiguration을 호출해 업데이트를 요청하면 된다.)

// Example
class CustomCell: UITableViewCell {
    override func updateConfiguration(using state: UICellConfigurationState) {
        var content = self.defaultContentConfiguration().updated(for: state)
        
        content.image = self.item.icon
        content.text = self.item.title
        
        if state.isHighlighted || state.isSelected {
            content.imageProperties.tintColor = .white
            content.textProperties.color = .white
        }
        
        self.contentConfiguration = content
    }
}

---

cf.
https://developer.apple.com/videos/play/wwdc2020/10027/