TableView Prototype Cell In Swift

We are implementing this tutorial in Xcode 8 and for iOS 10. You can read this post and discover how experts use TabelView Prototype Cell for their project.

• One liner
  In this tutorial, we will learn how to use TableView for navigation using storyboard and configure different types of Prototype Cells in TableView. This tutorial is implemented in Xcode 8 and is built for iOS 10.

Start with creating one single View application with product name “TableViewDemo”. In language field, select Swift language and in devices field, select iPhone.

First, delete ViewController.swift class file and also delete Controller from Main.storyboard.

Now, start with configuring storyboard. First, open Main.storyboard and drag UINavigationController from Object Library. After that, drag UITableViewController from Object Library and set “rootViewController” from navigation controller.

Next, select TableView from outline and go to Attributes Inspector. In content, select Static Cells; and in style, select Grouped. Check this in the below screenshot.



Next, select Table View section using outline, set header name as List of Product, and select number of rows as 2. Check it in the below screenshot. 



Now, select the first cell in TableView, configure style of cell as basic, and set title label as “Apple Product”. Use the same method for second cell and set title as “Android Product”. Please check the below screenshot for more info.



Now, add two UI TableView Controllers from Object Library. Drag connection from the first cell to one Controller and select Show. The same process goes for second cell to second Controller. Check the below screenshot.


Now, add two class files with names AppleProduct.swift and AndroidProduct.swift. You can add these class files from File -> New -> File -> iOS -> Cocoa Touch Class and select subclass is UITableViewController.

Open Main.storyboard and set AppleProduct as class for first TableView Controller. For second TableView Controller, set AndroidProduct. Now, select TableView Prototype Cell and set identifier “AppleProductCellIdentifier” and “AndroidProductCellIdentifier” respectively. Next, set style “Subtitle” and “Right Detail” respectively for both table view cells. Please check below screenshot for more info.

Open AppleProduct.swift class file and declare two arrays - for Apple product name and for product pricing. Now in the Table View data source methods, make changes as shown in the below screenshot.



Next, open AndroidProduct.swift class file and declare two arrays - the first array for Android product name and the second array for product prices. Now, in the Table View data source methods, make changes as shown in the below screenshot.

 

For displaying images in table list, you have to add some images in Apple list and Android list, as displayed in the below screenshot.

 

Now, build and run the project. If everything is correct, your app should run properly and you will see the below output. You can check the list of Apple products and Android products. The main difference between these two lists is the style of TableView.







That's it. If you have any confusion or questions, ask in the comments section.