Customize TableView Cells for UITableView In Swift

In this tutorial, I’m gonna teach how you can create a table view with custom cell.

I recommend you to first learn  Simple UITableView In Swift, if you already have, you are good to go.

We will continue with the same example and we will make it far more BEAUTIFUL.

  • Adding different image for each and every row.
  • Customize the cell in our own style – instead of using default table view style, we gonna design our own tableview.

Adding different image for each and every row.

Just to make our life simple here is the image pack that we are going to use.

Unzip the folder and add the folder to your project by simply dragging the folder to the project navigator. Please check Copy Items If Needed so that the folder for the same is created in your project source.

The folder structure should look like this after adding image folder.

customtableViewcell_swift_1

Now Add another array containing Image names that are to be displayed in respective order. we will name it as arrImageName

We will add it below tableData array.

 

1
2
3
4
5
...
var tableData: [String] = ["Christ Redeemer", "Great Wall of China", "Machu Picchu","Petra","Pyramid at Chichén Itzá","Roman Colosseum","Taj Mahal"]

var arrImageName: [String] = ["ChristRedeemer", "GreatWallOfChina", "MachuPicchu","Petra","PyramidChichenItza","RomanColosseum","TajMahal"]
..

Go to the cellForRowAtIndexPath method and add image to the cell, by iterating though the arrImageName using indexPath.row

1
2
3
4
5
6
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell:UITableViewCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as! UITableViewCell
cell.textLabel?.text = self.tableData[indexPath.row]
cell.imageView?.image = UIImage(named:self.arrImageName[indexPath.row])
return cell
}

 

THATS IT….run your app. you should get this if every thing goes well.

customtableviewcell_swift_2

 

Customize the cell in our own style – instead of using default table view style, we gonna design our own tableview.

Drag and drop Table View Cell from utility area on UITableView.

customtableviewcell_swift_3

 

Now add an image view and a label from utility area to your prototype cell and adjust their size to look something like this:

customtableviewcell_swift_4

 

Here I have changed the colour of the label to brown and and changed its default text to Name(you can change it to what ever colour you like).Also I have increased the number of lines to 2.

customtableviewcell_swift_6

 

Ok, lets add the class to UITableViewCell

Right click on the project group>>New>>Cocoa Touch Class and press next.

add class name, select its parent class and choose Swift as Language if not already selected.

Here I am naming my class as CustomTableViewCell, it should be subclass of UITableViewCell

 

customtableviewcell_swift_4

Press next, choose the location where you want to save this class and press create.

Your project navigator should look like this:

customtableviewcell_swift_5

 

Now, Select the prototype cell from view controller(in storyboard) and add CustomTableViewCell as its class in utility area Under identity inspector

customtableviewcell_swift_7

also add same name(CustomTableViewCell) as its identifier just to make it little less confusing, under attribute inspector.

customtableviewcell_swift_8

 

Now, Add  two IBOutlet inCustomTableViewCell class one for image and another for the name of the wonder and connect it to the image and label in CustomTableViewCell in viewController.

Here I have named my UIImageView as imageVW and UILabel as lblName

 

customtableviewcell_swift_9

Our inCustomTableViewCell class will look like this.

We are almost done now, Go to the cellForRowAtIndexPath method and replace the code with below code.

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
...
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

var cell:CustomTableViewCell = self.tableView.dequeueReusableCellWithIdentifier("CustomTableViewCell") as! CustomTableViewCell

cell.imageVW.image = UIImage(named:self.arrImageName[indexPath.row])

cell.lblName.text = self.tableData[indexPath.row]

return cell
}
..

 

Here, we have first created an object for CustomTableViewCell class using the cell identifier that we set earlier.

then, we have just added value to its variable and we are Done.

GO AHEAD AND RUN YOUR APP.

customtableviewcell_swift_10

Please Do comment if you find any difficulties.

Here is the Source for above Demo.

  • Isai

    Excelente amigo

  • Aditya sengar

    Hello Everyone

    problem:when i sent the data in server its ok complete but problem now when i get the information in tableview row/cell format its not in custmize manner i want if one user register then only one cell created and if 10 user response generate then 10 cell create

    • Coração Tricolor

      you probably have to refresh the tableview.reload in time intervals