Modern cell configuration - WWDC 2020 - Videos

Discover new techniques for configuring collection view and table view cells to quickly build dynamic interfaces in your app. Explore configuration types you can use to easily populate cells with content and apply common styles. Take advantage of powerful APIs to customize the appearance of cells for different states. Find out about patterns and best practices that simplify your code, eliminate bugs, and improve performance.

Resources
- Implementing modern collection views
- - HD Video
  - SD Video
Related Videos

WWDC22
- Use SwiftUI with UIKit
WWDC21
- Deliver a great playback experience on tvOS
- Focus on iPad keyboard navigation
WWDC20
0:03
0:08
0:40
0:49
0:58
1:09
1:31
1:58
2:27
2:33
2:45
2:57
Now, before this line of code, setting the image and text only changed our local copy of the configuration stored in this "content" variable. Because we're using a content configuration, we never directly touch a UIImageView or UILabel. All of the properties are set on the configuration itself. So, what have we gained by using a content configuration to set up our cell? Well, for one, the code that you see here to configure a table view cell is actually the same code you would use to configure any cell, such as a collection view cell. In fact, the same code works for any view that supports content configurations, even ones that aren't cells, such as table view headers and footers. How is this possible? This works because configurations are composable.
3:51
4:09
4:17
4:26
4:31
4:44
5:09
5:27
5:43
5:53
6:13
6:31
6:37
6:48
7:02
7:14
7:21
7:43
7:54
8:31
9:14
9:31
9:54
10:03
10:25
11:49
12:06
12:20
12:35
12:47
13:10
13:33
13:44
14:14
14:19
14:37
14:43
14:57
15:10
15:21
15:34
15:45
15:53
16:09
16:20
16:30
16:39
16:50
16:56
17:03
17:16
17:24
17:38
17:49
17:55
18:10
18:16
18:28
18:51
19:04
19:18
19:43
20:10
20:37
20:43
20:49
20:58
21:04
21:22
21:36
21:46
22:00
22:10
22:20
23:21
23:50
24:46
24:52
25:02
25:13
25:22
25:37
26:04
26:09
26:21
26:31
26:46
27:00
27:11
27:20
27:37
27:56
28:23
28:34
28:50
29:03
29:10
29:22

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

1:59 - Configuring a UITableViewCell Using a Content Configuration

var content = cell.defaultContentConfiguration()

content.image = UIImage(systemName: "star")
content.text = "Hello WWDC!"

cell.contentConfiguration = content

13:10 - Updating Configurations

let updatedConfiguration = configuration.updated(for: state)

16:33 - Customizing Appearance for Different States

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
}

19:45 - Default Configurations

var background = UIBackgroundConfiguration.listSidebarCell()

var content = UIListContentConfiguration.sidebarCell()

26:23 - Creating a List Content View

var content = UIListContentConfiguration.cell()

// Set up the content configuration as desired...

let contentView = UIListContentView(configuration: content)

Resources

Related Videos

WWDC22

WWDC21

WWDC20