Different Cell in TableView Swift 3

Question

As a beginner, I'm trying to work with UITableView and IOCollectionView, How can I create different cells (some cells have a collection View and some cells have text or image only,...) in the same container?

For example: the Appstore, the cell on the top is a banner, containing wide Collection View, second cell containing a category a the others containing label or button.

I work with swift 3 and prefer to use storyboard.

Answer 1

Assuming that you do know how to create your custom cell (if you don't check this question) and implementing the required data source methods, you should do this in cellForRowAt or cellForItem methods -I'm using cellForRowAt in the code snippet-:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // first row should display a banner:
        if indexPath.row == 0 {
            let bannerCell = tableView.dequeueReusableCell(withIdentifier: "BannerTableViewCell") as! BannerTableViewCell

            // ...

            return bannerCell
        }

        // second row should display categories
        if indexPath.row == 1 {
            let categoriesCell = tableView.dequeueReusableCell(withIdentifier: "CategoriesTableViewCell") as! CategoriesTableViewCell

            // ...

            return categoriesCell
        }

        // the other cells should contains title and subtitle:
        let defaultCell = tableView.dequeueReusableCell(withIdentifier: "CategoriesTableViewCell") as! TileAndSubtitleTableViewCell

        // ...

        return defaultCell
    }

Make it more readable:

you can also define enum for checking the indexPath.row instead of compare them to ints:

enum MyRows: Int {
    case banner = 0
    case categories
}

Now, you can compare with readable values:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // first row should display a banner:
        if indexPath.row == MyRows.banner.rawValue {
            let bannerCell = tableView.dequeueReusableCell(withIdentifier: "BannerTableViewCell") as! BannerTableViewCell

            // ...

            return bannerCell
        }

        // second row should display categories
        if indexPath.row == MyRows.categories.rawValue {
            let categoriesCell = tableView.dequeueReusableCell(withIdentifier: "CategoriesTableViewCell") as! CategoriesTableViewCell

            // ...

            return categoriesCell
        }

        // the other cells should contains title and subtitle:
        let defaultCell = tableView.dequeueReusableCell(withIdentifier: "CategoriesTableViewCell") as! TileAndSubtitleTableViewCell

        // ...

        return defaultCell
    }