Creating Custom TableView Cells In iOS App

Introduction

In this article, we will learn how to create or implement a custom cell with your own customization method. Here, I am discussing a live project example, which will make you understand your concept about the custom cell and why we create a custom cell in the table view.

Step 1

Now, first open the Xcode editor, create a simple project and give the name of the project. Choose the universal Application in the dropdown, choose a simple page Application and then create a project. Go to the storyboard and one view controller in it appears in the object library, which is in the left side. Drag the table view and drop it into the view controller.



Step 2

Now, after dragging and dropping the table view, click the table view, connect the datasource and delegate to the ViewController. Now, our table view and view controller are connecting.



Step 3

Now, you see that in my table view, there is a prototype cell that appears and in your table view, no cell appears so for this method, click the table view in the left side. You see that the prototype cell is zero. Thus, you replace this zero with one. Afterwards, you will see that the one cell appears and this time, you will see the arrow sign in the left side, which needs to be ignored this time.



Step 4

Now, you will see that your table view cell is empty. How will I add the image? I will tell you first to increase the size of the cell in the width manner, go to the object library, drag the UIImage, drop it into the cell and resize it. Simply drag the label, drop it into the cell and resize it.



Step 5

Download some images with any size but they can’t be greater than 512X512. Go to the Assets folder in Xcode and drag all the images in it. Afterwards, you wil also change the name of the picture in Xcode.



Step 6

Now, add a new Cocoa Touch Class and name it Custom, extend with UIViewController and create the class. Afterwards, connect one image and label to the Custom class and I give it  the name photo and image. Follow the same procedure to open ViewController. Swift is in the right side, click the table view and make its outlet into the ViewController.Swift file,



Step 7

Move to the ViewController.Swift file and extend the class with UITableViewDataSource. In this file, we create two arrays; one is for the es and another is for the names. Afterwards, we implement three functions, which is mandatory for the table view and in the previous article, I discussed this function in detail.



Code Section

var mainPage = [("Home"), ("Tutorials"), ("Vidoes"), ("FeedBack"), ("Website"), ("Where We Are"), ("Contact Us")]
var images = [UIImage(named: "home"), UIImage(named: "tut"), UIImage(named: "youtube"), UIImage(named: "feed"), UIImage(named: "website"), UIImage(named: "map"), UIImage(named: "symbol")]
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) - > Int
{
    return mainPage.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) - > UITableViewCell
{
    let cell = self.tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as!Custome
    cell.photo.image = images[indexPath.row]
    cell.name.text = mainPage[indexPath.row]
    return cell
}

When you run the Application, you will see the following result in your Application -- along with the beautiful look. I apologize for the layout problem but in the future, we will be discussing the layout issues in IOS.