Create Static Table View Using Storyboard

29 Flares 29 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 Swift Book

Beginning iOS 8 Programming with SwiftIf you want to create an app but don't know where to begin, this book covers the whole aspect of Swift programming and iOS 8 development and shows you every step from an idea to a real app on App Store. This book features a lot of hands-on exercises and projects. You will first create a simple app, then prototype an app idea, and later add some features to it in each chapter, until a real app is built. Want to learn more? Check it out here and get three free chapters.


  • 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…;)

    • Someone

      Use control-drag to wire up.

  • 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

  • Mike Critchley

    Great tutorial. I always forget the steps to go through for static cells. Thanks a million! For those below having problems then subclassing the view in Storyboard, after creating a UITableViewController and connecting it to the view, go in and either delete or comment out the template code, which is actually for dynamic cells. In particular, blocking out the following methods will prevent the blank-screen thing, and will also allow you to hook up outlets as usual to your .h file.
    /*
    – (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    – (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    */

29 Flares Twitter 9 Facebook 18 Google+ 2 LinkedIn 0 29 Flares ×