{"id":1985,"date":"2015-12-28T16:31:19","date_gmt":"2015-12-28T22:31:19","guid":{"rendered":"http:\/\/jamesonquave.com\/blog\/?p=1985"},"modified":"2016-02-03T08:12:39","modified_gmt":"2016-02-03T14:12:39","slug":"being-swifty-with-collection-view-and-table-view-cells","status":"publish","type":"post","link":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/","title":{"rendered":"Being Swifty with Collection View and Table View Cells"},"content":{"rendered":"

Here’s a common scenario: You have a table view or collection view that has a variety of different types of content. You want to display varying cells based on these types of content, and they’re all mixed within a single section. Pardon the stand-in art, but it looks roughly like this:<\/p>\n

\"\"<\/p>\n

In the Objective-C world, it was typical to just use an NSArray to hold whatever records your collection view was going to be using as a data source, and then for each element check what class it is before picking a cell. This case seems particularly not Swifty these days.<\/p>\n

\n\n\n\n
\n
\n
- (<\/code>UICollectionViewCell<\/code> *)collectionView:(<\/code>UICollectionView<\/code> *)collectionView cellForItemAtIndexPath:(<\/code>NSIndexPath<\/code> *)indexPath {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>UICollectionViewCell<\/code> *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@<\/code>\"identifier\"<\/code> forIndexPath:indexPath];<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>id record = <\/code>self<\/code>.records[indexPath.row];<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>([record isKindOfClass:[<\/code>PlaythroughItem<\/code> class<\/code>]]) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/ ...<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>else<\/code> if<\/code>([record isKindOfClass:[<\/code>ReviewItem<\/code> class<\/code>]]) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/ ...<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>else<\/code> if<\/code>([record isKindOfClass:[<\/code>TrailerItem<\/code> class<\/code>]]) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/ ...<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> cell;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

shudder<\/em><\/p>\n

Okay so that’s not the most type-safe approach, although it’s surprisingly common in Obj-C iOS code. As a better alternative in Swift, we can use enum cases for the different item types, and perform lookups of the items themeselves as needed. Let’s look at an example.<\/p>\n

Example<\/h3>\n

In an entertainment app I’m working on I’ve got a few types of cells for the types of news items that come in:<\/p>\n

\n\n\n\n
\n
\n
enum<\/code> NewsItem<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>case<\/code> Trailer<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
\u00a0\u00a0<\/code>case<\/code> Review<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
\u00a0\u00a0<\/code>case<\/code> Playthrough<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

The index is just a way to keep track of which<\/em> item this it supposed to represent in the database. We take this approach to keep the amount of data needed to produce the collection view down. We don’t need all the associated data with every video to be present when putting together a collection view, we just need the info on what cell is tapped, after it is tapped.<\/p>\n

Let’s say we have a simple collection view that shows one of these three and picks a custom cell for each. In a Swift file NewsFeed.swift<\/strong> I have that acts as the dataSource of my collection view for the main news view. Of particular interest is the cellForItemAtIndexPath method, which runs the NewsItem record through a switch and produces the correct type of cell, with the relevant information populated:<\/p>\n

\n\n\n\n
\n
\n
func<\/code> collectionView(collectionView: <\/code>UICollectionView<\/code>, cellForItemAtIndexPath indexPath: <\/code>NSIndexPath<\/code>) -> <\/code>UICollectionViewCell<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> record = records[indexPath.row]<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>switch<\/code>(record) {<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> .<\/code>Playthrough<\/code>(<\/code>let<\/code> index):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> cell = collectionView.dequeueReusableCellWithReuseIdentifier(<\/code>\"PlaythroughCell\"<\/code>, forIndexPath: indexPath) <\/code>as<\/code>! <\/code>PlaythroughCollectionViewCell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> playthrough = <\/code>MediaDB<\/code>.playthroughAtIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.titleLabel.text = playthrough.title<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.lengthLabel.text = playthrough.length.prettyTime<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> cell<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> .<\/code>Review<\/code>(<\/code>let<\/code> index):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> cell = collectionView.dequeueReusableCellWithReuseIdentifier(<\/code>\"ReviewCell\"<\/code>, forIndexPath: indexPath) <\/code>as<\/code>! <\/code>ReviewCollectionViewCell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> review = <\/code>MediaDB<\/code>.reviewAtIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.ratingLabel.text = <\/code>\"\\(review.rating) out of 10\"<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.titleLabel.text = review.title<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> cell<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> .<\/code>Trailer<\/code>(<\/code>let<\/code> index):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> cell = collectionView.dequeueReusableCellWithReuseIdentifier(<\/code>\"TrailerCell\"<\/code>, forIndexPath: indexPath) <\/code>as<\/code>! <\/code>TrailerCollectionViewCell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> trailer = <\/code>MediaDB<\/code>.trailerAtIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.titleLabel.text = trailer.title<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.lengthLabel.text = trailer.length.prettyTime<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> cell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

This code works well enough, record is of type NewsItem<\/code> which can be one of three cases for the different news items we support:<\/p>\n

\n\n\n\n
\n
\n
enum<\/code> NewsItem<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>case<\/code> Trailer<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
\u00a0\u00a0<\/code>case<\/code> Review<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
\u00a0\u00a0<\/code>case<\/code> Playthrough<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

The associated index value is so that we can find the individual item in the DB when the collection view wants to display a cell.<\/p>\n

Something about this code didn’t sit right with me though. I felt that too much of the code was boilerplate; in particular the switch felt bulky and like it had too much work<\/em> being done inside each case.<\/p>\n

But what if I created a protocol for any data source that could be presented as a collection view cell? It would change on a view-by-view basis so I don’t actually want this in my model.. but I do like having it on these particular CollectionViewCell subclasses.<\/p>\n

So, I created a protocol called NewsCellPresentable, which I can adhere to in extensions with my custom collection view cells:<\/p>\n

\n\n\n\n
\n
\n
protocol<\/code> NewsCellPresentable<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>func<\/code> configureForIndex(index: <\/code>Int<\/code>)<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
extension <\/code>PlaythroughCollectionViewCell<\/code>: <\/code>NewsCellPresentable<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>func<\/code> configureForIndex(index: <\/code>Int<\/code>) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> playthrough = <\/code>MediaDB<\/code>.playthroughAtIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>self<\/code>.titleLabel.text = playthrough.title<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>self<\/code>.lengthLabel.text = playthrough.length.prettyTime<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n
extension <\/code>ReviewCollectionViewCell<\/code>: <\/code>NewsCellPresentable<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>func<\/code> configureForIndex(index: <\/code>Int<\/code>) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> review = <\/code>MediaDB<\/code>.reviewAtIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>self<\/code>.titleLabel.text = review.title<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>self<\/code>.ratingLabel.text = <\/code>\"\\(review.rating) out of 10\"<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n
extension <\/code>TrailerCollectionViewCell<\/code>: <\/code>NewsCellPresentable<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>func<\/code> configureForIndex(index: <\/code>Int<\/code>) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> trailer = <\/code>MediaDB<\/code>.trailerAtIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>self<\/code>.titleLabel.text = trailer.title<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>self<\/code>.lengthLabel.text = trailer.length.prettyTime<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

This feels much cleaner already. Now I can go back to my cellForItemAtIndexPath method and trim it down to just the following:<\/p>\n

\n\n\n\n
\n
\n
func<\/code> collectionView(collectionView: <\/code>UICollectionView<\/code>, cellForItemAtIndexPath indexPath: <\/code>NSIndexPath<\/code>) -> <\/code>UICollectionViewCell<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> record = records[indexPath.row]<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>var<\/code> cell: <\/code>NewsCellPresentable<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>switch<\/code>(record) {<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> .<\/code>Playthrough<\/code>(<\/code>let<\/code> index):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell = collectionView.dequeueReusableCellWithReuseIdentifier(<\/code>\"PlaythroughCell\"<\/code>, forIndexPath: indexPath) <\/code>as<\/code>! <\/code>PlaythroughCollectionViewCell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.configureForIndex(index)<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> .<\/code>Review<\/code>(<\/code>let<\/code> index):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell = collectionView.dequeueReusableCellWithReuseIdentifier(<\/code>\"ReviewCell\"<\/code>, forIndexPath: indexPath) <\/code>as<\/code>! <\/code>ReviewCollectionViewCell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.configureForIndex(index)<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> .<\/code>Trailer<\/code>(<\/code>let<\/code> index):<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell = collectionView.dequeueReusableCellWithReuseIdentifier(<\/code>\"TrailerCell\"<\/code>, forIndexPath: indexPath) <\/code>as<\/code>! <\/code>TrailerCollectionViewCell<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>cell.configureForIndex(index)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
<\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> (cell <\/code>as<\/code>! <\/code>MediaCollectionViewCell<\/code>)<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

What do you think? Is this a cleaner approach? Let me know if you have a different method in the comment, or let me know on Twitter<\/a>. My username is @jquave<\/a>.<\/p>\n

P.S.<\/h3>\n

If you want to try this out yourself and don’t have the same DB layer as me… guess what? Neither do I! You can easily stub this out like this:<\/p>\n

\n\n\n\n
\n
\n
class<\/code> MediaDB<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>class<\/code> func<\/code> titleForRecord(index: <\/code>Int<\/code>) -> <\/code>String<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> \"Title!!\"<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>class<\/code> func<\/code> trailerAtIndex(index: <\/code>Int<\/code>) -> <\/code>Trailer<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> Trailer<\/code>()<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>class<\/code> func<\/code> reviewAtIndex(index: <\/code>Int<\/code>) -> <\/code>Review<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> Review<\/code>()<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>class<\/code> func<\/code> playthroughAtIndex(index: <\/code>Int<\/code>) -> <\/code>Playthrough<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> Playthrough<\/code>()<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
struct<\/code> Trailer<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> title = <\/code>\"Trailer Title\"<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> length = 190<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
struct<\/code> Review<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> title = <\/code>\"Review Title\"<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> rating = 4<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
struct<\/code> Playthrough<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> title = <\/code>\"Playthrough Title\"<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>let<\/code> length = 9365<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
<\/div>\n
enum<\/code> NewsItem<\/code> {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> Trailer<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> Review<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>case<\/code> Playthrough<\/code>(index: <\/code>Int<\/code>)<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Personally I always stub things out with static values before I do the work of integrating with a backend service or whatever data provider is needed. This makes it much easier to iterate.<\/p>\n","protected":false},"excerpt":{"rendered":"

Here’s a common scenario: You have a table view or collection view that has a variety of different types of content. You want to display varying cells based on these types of content, and they’re all mixed within a single section. Pardon the stand-in art, but it looks roughly like this: In the Objective-C world,…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_links_to":"","_links_to_target":""},"categories":[25,24,10,71],"tags":[15,33],"yoast_head":"\nBeing Swifty with Collection View and Table View Cells - Jameson Quave<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Being Swifty with Collection View and Table View Cells - Jameson Quave\" \/>\n<meta property=\"og:description\" content=\"Here’s a common scenario: You have a table view or collection view that has a variety of different types of content. You want to display varying cells based on these types of content, and they’re all mixed within a single section. Pardon the stand-in art, but it looks roughly like this: In the Objective-C world,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/\" \/>\n<meta property=\"og:site_name\" content=\"Jameson Quave\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-28T22:31:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-02-03T14:12:39+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/jamesonquave.com\/images\/cells.png\" \/>\n<meta name=\"author\" content=\"Jameson Quave\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jameson Quave\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/\",\"url\":\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/\",\"name\":\"Being Swifty with Collection View and Table View Cells - Jameson Quave\",\"isPartOf\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\"},\"datePublished\":\"2015-12-28T22:31:19+00:00\",\"dateModified\":\"2016-02-03T14:12:39+00:00\",\"author\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc\"},\"breadcrumb\":{\"@id\":\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jamesonquave.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Being Swifty with Collection View and Table View Cells\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#website\",\"url\":\"https:\/\/jamesonquave.com\/blog\/\",\"name\":\"Jameson Quave\",\"description\":\"Using computer technology to educate, and improve lives.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc\",\"name\":\"Jameson Quave\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg\",\"caption\":\"Jameson Quave\"},\"sameAs\":[\"http:\/\/jamesonquave.com\"],\"url\":\"https:\/\/jamesonquave.com\/blog\/author\/jquave\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Being Swifty with Collection View and Table View Cells - Jameson Quave","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/","og_locale":"en_US","og_type":"article","og_title":"Being Swifty with Collection View and Table View Cells - Jameson Quave","og_description":"Here’s a common scenario: You have a table view or collection view that has a variety of different types of content. You want to display varying cells based on these types of content, and they’re all mixed within a single section. Pardon the stand-in art, but it looks roughly like this: In the Objective-C world,...","og_url":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/","og_site_name":"Jameson Quave","article_published_time":"2015-12-28T22:31:19+00:00","article_modified_time":"2016-02-03T14:12:39+00:00","og_image":[{"url":"http:\/\/jamesonquave.com\/images\/cells.png"}],"author":"Jameson Quave","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jameson Quave","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/","url":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/","name":"Being Swifty with Collection View and Table View Cells - Jameson Quave","isPartOf":{"@id":"https:\/\/jamesonquave.com\/blog\/#website"},"datePublished":"2015-12-28T22:31:19+00:00","dateModified":"2016-02-03T14:12:39+00:00","author":{"@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc"},"breadcrumb":{"@id":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jamesonquave.com\/blog\/being-swifty-with-collection-view-and-table-view-cells\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jamesonquave.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Being Swifty with Collection View and Table View Cells"}]},{"@type":"WebSite","@id":"https:\/\/jamesonquave.com\/blog\/#website","url":"https:\/\/jamesonquave.com\/blog\/","name":"Jameson Quave","description":"Using computer technology to educate, and improve lives.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jamesonquave.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/db6184f355c7f4e3b876d0f228c2fcfc","name":"Jameson Quave","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jamesonquave.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d9786c83345117d560bbeab0e1f26814?s=96&d=retro&r=pg","caption":"Jameson Quave"},"sameAs":["http:\/\/jamesonquave.com"],"url":"https:\/\/jamesonquave.com\/blog\/author\/jquave\/"}]}},"_links":{"self":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/1985"}],"collection":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/comments?post=1985"}],"version-history":[{"count":8,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/1985\/revisions"}],"predecessor-version":[{"id":2014,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/posts\/1985\/revisions\/2014"}],"wp:attachment":[{"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/media?parent=1985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/categories?post=1985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesonquave.com\/blog\/wp-json\/wp\/v2\/tags?post=1985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}