Create Static Table View Using Storyboard

24 Flares 24 Flares ×

After we published the iCloud programming tutorial, the first question from our readers is not about iCloud but related to the static table view. If you’ve followed our tutorials, you should have a basic understanding about table view. However, the table views that we’ve covered are of dynamic content. The “Add Note” controller that we built in the previous tutorial, on the other hand, makes use of the static table view. If you have problem with static table view, this tutorial is for you. We’ll show you how to create static table view using Storyboard.

To illustrate how easy you can use Storyboard to implement static table view, we’ll build a simple Setting screen. Static table views are ideal in situations where a pre-defined number of data items to be displayed. A setting screen is an obvious use of static table view.

Static Table View Demo App

Creating Xcode Project

To get started, launch Xcode and create a new project using the Single View Application template.

Create new Xcode project

Create new Xcode project

Name your project as “StaticTableDemo” and don’t forget to select “Storyboard” in your project setting.

Static Table Project Setting

Xcode Project Settings

Designing Static Table View

In Storyboard, first delete the default view controller and drag a Table View Controller from the Object library.

Static Table - Table View Controller

Drag a Table View Controller to Storyboard

By default, Xcode sets the table view for dynamic content. You can easily change the table view from dynamic to static cells by altering the content property. Once changed, you’ll have a table view with three empty static cells.

Change to Static Cells

Set the Content Property to Static Cells

To get the desired view of the Settings screen, change the table style from “Plain” to “Grouped” in the Attributes inspector of the table view. You have two ways to change the number of table row from 3 to 2. The easiest way is to select one of the table rows and press delete button to remove it. Alternatively, select the Table View Section in the document navigator and change the row number.

Static Table View Section

Customizing the Table View Section

You can use header and footer to display addition information for the table section. Set the header and footer as shown in the above screen.

Next we’ll design the table view cell with the following steps:

  • Drag a label object into the table view cell and adjust its size to 17. Set the label to “Mobile Notification”.
  • Drag another label object into the table view cell and place it under the previous label. Adjust its size to 10 and set the label to “Do you want to receive push notification?”.
  • Drag a Switch object into the table view cell.
  • Repeat the above procedures to implement the “Email Notification” cell.
Static Table View Cell

Designing table view cells

We’ve created the first table section. To add the second section, select the Table View and change the “Sections” value in Attributes inspector to 2. As soon as you update the section number, Xcode adds a new section and the same content of the first section is automatically copied.

Static Table View - Change Section No

Changing the section number in Attributes inspector

Simply change the section and the table cells to make them look like the following:

Static Table View Sync Section

Synchronization Section

To complete the layout of the Settings screen, embed the table view controller in a navigation controller. Select the table view controller and select Editor -> Embed in -> Navigation Controller from the Xcode menu.

Static Table View Embed Navigation Controller

Embed table view controller into navigation controller

Compile and Run the App

That’s it! Finally compile and run the app in Simulator. You should have a Settings screen look like this:

StaticTableDemo App

StaticTableDemo App

Summary

In this short tutorial, we demonstrate how you can create a static table view using Storyboard. While you can use dynamic table to display data from data source, static table view provides a great way to display a finite quantity of data that are already known beforehand. Settings screen is a common example that you can make use of the static table view.

For your complete reference, you can download the Xcode project here.

As always, leave us comment if you have any questions about the tutorial.

You May Like These:

Get Free Chapters of Our AppCoda Book

Learn iOS 7 Programming from Scratch

The Learn iOS 7 Programming from Scratch is a 400-page eBook written for beginners with little or even no programming experience. It is based on the tutorials of our popular programming course. The book starts with the basics and walks you through the process to create iOS apps using iOS 7 SDK and Xcode 5. Want to learn more? Check it out here and get two free chapters.


Build Your Own Game and Monetize on the Side

Learn how to develop your first iOS game and make money on the side. The starter kit will come with full source code of a memory game for both iPhone and iPad, as well as, a complete guide to explain how the code works. Check out the starter kit to learn more.


  • Gergő Németh

    great tutorial, thanks! (:

  • Henrik

    Thank you for great tutorials :)

    I have a question for this one. How do you design a Table View with 5 or 6 groups, I can’t find a way to scale or move the Table View so I can work with the groups in the bottom.

    • Dmitriy Sherbina

      You can create as big Table View as You wish, just use scroll wheel then – to can scroll down a table view in StoryboardEditor and customize cells and groups. Hope this will help.

      • justMe

        In IOS 6 you can just place the mouse on the UITableViewController and scroll down like you do in any other application, also you can go to every section from the document outline

  • VladislavKovalyov

    Great tutorial, like always!

    You have write tutorial about iCloud, so maybe you tell us about EventKit and examples with Custom Calendars? It will be great.

  • shail

    Greate tutorial.how to change the background color?

    • http://www.simonblog.com Simon Ng

      Assume that you have associated the Table View Controller with a ViewController class (a subclass of UITableViewController). You can add the following code in viewDidLoad method to change the background color:

      self.tableView.backgroundColor = [UIColor blueColor];
      self.tableView.backgroundView = nil;

      • _Mac

        FYI: Might be worth mentioning that you need to “clear out” the TableView class first, that you’re creating to use for this. Otherwise it will complain and warn you about sections and rows etc.
        It had me going for a while, just thought I should share this help out others here…

        • Niranjan

          How did you add actions to switches..??? help me adding .h and .m file to this view controller….

  • _Mac

    Thank’s 4 the Tut, Simon.
    Never even thought about doing the prefs-pane this pane. Been messing w scrollviews etc. Thank’s for simplifying my coding day :-)

  • Gerhard

    how can i localize here the header and footer?

  • hitesh

    great tutorial… ;)

    • http://www.simonblog.com Simon Ng

      Thanks!

  • harendra

    how can i add .h and .m file with tableview controller , identity inspector allows only uitable view controller class . thanks

  • badrinath V.M.

    Great tutorial , how can we set action on each of the cell in table view ?

  • Stephen

    Hi Thanks for good tutorial:) I have a question how to had the section footer appear in the center? I try to do it but cannot.

  • Niranjan

    Thanks for the great tutorial…and I’ve a small doubt how to add actions to the switches and connect the cells to detail view controllers. I tried adding a subclass of UITableViewController but then it doesn’t display the cells or sections… Please help me fix it…;)

  • Andre Dias

    How access the controls inner cells? I use table cell reference or table view? Thanks

  • Waldo

    So following this in Xcode 5, gives you a blank screen, I know I’m missing something here.

    • Waldo

      got it

  • Phúc Duy Trần

    Hướng dẫn rất chi tiết! Thanks

24 Flares Twitter 9 Facebook 13 Google+ 2 LinkedIn 0 24 Flares ×