Monday, July 20, 2015

How to use TableView using iOS Swift and display some data?

Introduction


A TableView is a very nice implementation in iOS to show a list of data. There are a lot of articles on the web but some are simple and many are quite complex.
Lets try and make this a simple exercise so that you can implement it in your project very easily.


Below are the steps to follow to get a tableview working in your iOS Swift Application

Step 1.

 Open XCode and create a new Project of the type "Single View Application"

Step 2. 

Give a name for your project (for eg: TryTableView) and choose Swift as the language

Step 3.

 After clicking finish you will see some files generated on the left side project navigation bar

Step 4.

 Search for Main.Storyboard and Click on it once (do not double click as it will open in a new window)

Step 5.

 Once the Storyboard is loaded in the center of the screen, look to the right side bottom of the screen where you will see "Object Library"

Step 6.

 In the Object Library find the "Table View" object

Note: Do NOT use Table View Controller but use TableView as seen in the above picture

Step 7.

 Drag the TableView to the ViewController that you see in the center of the storyboard
Now drag an IBOutlet of the TableView to your viewcontroller.swift file
For that you have to switch to Assistant Editor mode and Control+Click on the TableView control and drag it to your .swift file. You can refer the diagram below to see how it looks.

This will produce the line below in your code
     @IBOutlet weak var tv: TableView!

If you are not very clear on how to do that, please refer "Creating an IBOutlet in Swift"






Step 8.

 Now let us make some settings that is required for the tableview. Click on the TableView and on         the right side window, go to "Attributes Inspector" and set the value of "Prototype Cells" to 1. By default this might be zero

Step 11.

In project  navigator go to view controller.swift and write the functions as below.

        1.  // Add 2 new delegates UITableViewDataSource, UITableViewDelegate
           
             class viewController: UIViewController, UITableViewDataSource, UITableViewDelegate
            {
 
     
        2. // Create an array of any items or things those we wanted to show in Table
              let states = ["Karnataka", "Gujarat", "Maharashtra", "Tamilnadu"]

     
        3. //  soon after the view controller  loads the first function that executes is viewDidLoad()
              override  func viewDidLoad()
             {
                super.viewDidLoad()
                // Do any additional setup after loading the view, typically from a nib.
                 tv.delegate = self
                 tv.dataSource = self
              }

   
        4. //Write two important delegate functions like  (numberOfRowsInsections), (cellFor RowIndexPath)

             func tableView(tableView: UITableView, numberOfRowsInSection: Int) -> Int
             {

         // this return is used to return all the items assigned without mentioning the specific number of                items
              return states.count
             }

            func tableView(tableView: UITableView, cellForRowIndexPath indexPath: NSIndexPath) ->              UITableViewCell
            {
             var tblCell = tv.dequeueReusableCellwithIdentifier("cell", forIndexPath: indexPath) as!                        UITableViewcell

              tblcell.textlabel?.text = states[indexPath.row]

              return tblCell
            }
                 }


 Step 13.

  Run the project to get TableView.
  


I hope this article was helpful for beginners trying to create a TableView using iOS Swift  .
I am Revati Billur and I am a beginner myself with one month of total experience working at Nanite Solutions as an iOS developer.

If you have further questions about TableView using iOS Swift. Please feel free to write to me at revati@nanitesol.com

Thanks

Guided by: Praveen Kumar, Nanite Solutions



      


3 comments:

  1. Helpful information for beginners

    ReplyDelete
  2. Followed the steps in this article and was able to successfully create a tableview in iOS. Thanks for the detailed steps and easy instructions

    ReplyDelete