How to make a simple TableView using UITableView in Swift

In our last tutorial we create Hello World! app in Swift, today we are going to learn How to make a simple TableView using UITableView in Swift, it is one of the most common UI elements in iOS apps. It display data in list format. The best example is the built-in Phone app like Contacts,  Mail app. It uses Table View to display your mail boxes and emails. Table View allows you to present the data in the form of images also. YouTube app is one of great examples.

Lets start step by step How to make a simple TableView using UITableView in Swift

We will start by making a “Create a new Xcode Project”  then choose “Single View Application” name it “TableView” and save it with rest of your projects.

First go to your “Main.Storyboard” file. Select the “Table view” from the “Object library” Drag and drop it on the table view.Screen Shot 2015-06-25 at 11.14.03 pm

Select the table view and then click on the 3rd icon on the bottom right corner then select “Reset to Suggested Constraints”. We’ll talk about Auto Layout & Constraints later. These will set your table view for every resolution automatically.

Screen Shot 2015-06-25 at 11.18.34 pm

Select your Table view press Control and Drag it on your ViewController and make its outlet.

Screen Shot 2015-06-25 at 11.26.54 pm

Now run your programme by clicking “Cmd + R” or press “Play” button now you will see your simulator like this.

Screen Shot 2015-06-25 at 11.33.54 pm

Import tableview delegates to use table view methods.

 

Lets make out table view dataSource. We will populate our table view by an Array of Object.

 

Now we use TableView Delegate Methods to populate our Table.

The first function is to display total number of rows in out table. It returns an int value in this we set it to to the number of elements in out array. In second method we setting the table view sections. Initially this is 1 if you don’t implement it will be 1.

Next method use Table view single cell and reuse it again and again and display data on it.

Now our Setup is complete Hit “Run” or “Cmd+R” and see your table view.

Screen Shot 2015-06-25 at 11.33.54 pm

Oops, What happen no data in your table view, Xcode showing no warnings, then whats the problem. We still need to connect our datasource and delegates. Now select the Table View and drag to the “File’s Owner” like below.

Screen Shot 2015-06-26 at 12.04.17 am

Now “Run” again.

Screen Shot 2015-06-26 at 12.20.53 am

 

Finally you did it. Congrats.

You can add image to your project simply by adding images to your project and using following property in cellForRowAtIndexPath.  I add a image named “Birds” to the project

Screen Shot 2015-06-26 at 12.36.19 am

Go to the documentation on Apple’s Site and try to change colour and size of your tableview. See you next time.

You can check our first tutorial creating Hello World! using swift.

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.