Adding Custom Cells to a tableView

Customize the cell in our own style – instead of using default table view style, We need a new cell type, so we can add multiple images, and or text in different places.

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

 

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

 

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

 

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

 

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

Your project navigator should look like this:

 

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

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

 

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

 

Our inCustomTableViewCell class will look like this.

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

 

 

 

 

 

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.