Different Layout in different Table view sections

Question

Hi I want to have different layouts in different sections of UITableView, I want to do it using dynamic prototype cells and not using static cells. I don't know how to create it, Please help. Any links or something. I want to achieve like this, please see the picture pls download the pic

Please give your code if any in swift.

Answer 1

According to your details, it seems like, you want a grouped tableView where your different section will have different types of cell. That is pretty easy.

So let's start. I explained the whole walk through from the scratch through the screen shots. If you just follow this, you will understand the concept and the process.

(I am assuming, you know how to add necessary constraints)

Firstly, Go to the Storyboard and drag a tableView in your Controller.

Then create 2 Custom UITableViewCell classes-

Now drag and drop 2 TableView Cells inside your TableView in storyboard.

So, you have 2 tableView Cells inside your TableView for which you have already created two Custom Cells.

Now, we need to assign the cell classes, so that it can understand which class it should corresponds to. Select the First cell in the storyboard, click on the class inspector and assign its class-

Do the Same for the second cell -

We also need to give them unique identifiers. Select the first cell and assign an identifier like -

Do the same for the second cell -

We are almost done setting up the UI. The last piece is to tell the UITableView that it is going to be a "Group" type.

Again select the TableView and assign its type to "Group" like-

Now, we are good to go.

Let's declare some IBOutlets in our custom TableViewCells that we created earlier.

TypeOneTableViewCell.swift class-

import UIKit

class TypeOneTableViewCell: UITableViewCell {

    @IBOutlet weak var cellImageView: UIImageView!
    @IBOutlet weak var cellTitleLabel: UILabel!
    @IBOutlet weak var cellSubtitleLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()

    }
}

and TypeTwoTableViewCell.swift class-

import UIKit

class TypeTwoTableViewCell: UITableViewCell {

    @IBOutlet weak var cellTitleLabel: UILabel!
    @IBOutlet weak var cellSubtitleLabel: UILabel!
    @IBOutlet weak var cellButton: UIButton!


    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

Go to the Storyboard and add an image and two labels in the First prototype cell and attach them with the outlets.

Now in the second cell, add a button and two labels and connect the outlets the same as before-

Enough with the setting up. Let's jump into doing some real stuff. Go to your controller class and first create an IBOutlet for your tableView like-

  @IBOutlet weak var groupedTableView :UITableView!

Don't forget to attach the TableView's outlet in storyboard.

Now, we need the TableView Delegate and Datasource. So, let's include them in the protocol list like-

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

Right now, you may be getting an error because you haven't implement the required delegate methods which is in the UITableViewDatasource protocol, but it's okay, it will be resolved soon.

First thing first. Specify who is going implement the delegate and datasource methods. Go to your viewDidLoad method and add this -

    override func viewDidLoad() {
        super.viewDidLoad()
        self.groupedTableView.dataSource! = self
        self.groupedTableView.delegate! = self
    }

then tell your tableView that you will have 2 sections through the numberOfSectionsInTableView method like-

 func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 2
    }

and then specify how many of the cells, each section is going to held. Let's assume the 1st section contains 4 rows and the 2nd one contains 3 rows. To do so, use the numberOfRowsInSection method.

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{                                                                                  
        if section == 0{
            return 4
        }
        else{
            return 3
        }
    }

and the last part, defining the cell and it's data-

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        if indexPath.section == 0{
            let cell : TypeOneTableViewCell = tableView.dequeueReusableCellWithIdentifier("typeOneCell", forIndexPath: indexPath) as! TypeOneTableViewCell

            cell.imageView!.image = UIImage(named: "noImage.png")
            cell.cellTitleLabel.text = "Header " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            cell.cellSubtitleLabel.text = "Details " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            return cell
        }
        else{
            let cell : TypeTwoTableViewCell = tableView.dequeueReusableCellWithIdentifier("TypeTwoCell", forIndexPath: indexPath) as! TypeTwoTableViewCell

            cell.cellTitleLabel.text = "Header " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            cell.cellSubtitleLabel.text = "Details " + "\(indexPath.section)" + "-" + "\(indexPath.row)"
            return cell

        }
    }

There you GO! TableView have many delegate methods like heightForRowAtIndexPath to specify the heights of custom cells. In my case I specified it as 80.0 like-

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 80.0
    }

You can do a lot more customization with those delegate methods. Check apple's guide for UITableView.

P.S. : for beautification, I added an image here. If you implement the same way, I did, you should see the output like-

Hope this helps.