Using A TabBarView To Switch Between Views

In this tutorial I will show you how to develop a UITabBarController Which contains a custom UIView from one of the tabs and a UINavigationController with a UITableView dictated byUISegmentControl in the second tab.

The final product of this tutorial should look something like this:

Setting up the user interface

The first thing we need to do is open up MainWindow.xib. This will launch interface builder and show what looks like our UITabBarController. In the first tab we see a custom UIView that can be changed however we like, but we are more concerned about the second tab.

Clicking on the TabBarController within the window instance of interface builder and then looking to the Inspector will let us set the type of each viewcontroller Which tab will be displaying. The first tab uses a View Controller, and for the second tab we want to use a navigation controller type because we will be Utilizing the navigation bar to hold our segmented control.

Once in the second tab, we will drag a UISegmentedControl out of our library and onto the navigation bar. The UISegmentedControl will change its look Depending on the context you place it in. Here we will be making Essentially the Title View of the NavigationItem a UISegmentedView. This will be important when we get into our code.

With that done, we click on the view of the second tab and set it to be identified as a SegmentedTableViewController or type UITableViewController. We will create that class later in xCode. With that we set drag in a UITableView and connect its data source and delegate methods to our viewController Which has now been defined as SegmentedTableViewController. That is all we need to do in interface builder.

Going into xCode we do not need to modify any of the generated classes, however we do need to create a new one. Hit Apple + N and create a new UITableViewController called SegmentedTableViewController. This class will have the data source methods for a UITableView all ready.

In this class we are going to need an int called selectedSegment, this will be updated to represent Which segment is selected. Within the main we need to uncomment the viewDidLoad method and enter the following code.

This code gets the UISegmentedControl title from the view of the navigationItem, and modifies it to add an action that Sun when the selected segment changes a method called segment-action is called. The selectedSegment int is set to the Initially selected segment and the title view is reset with the modified UISegmentedControl.

Next we need to create the method Which will call the UISegmentedControl. Here is the code for that method, following the same syntax as a IBAction method.

This code takes the sender whichwill be out UISegmentedControl and gets the new selectedSegment from it and sets out variable to that value. Finally it tells the UITableView that something has happened and the data in the table needs to be reloaded.

The final steps is to tell the UITableView that is will be displaying 100 cells and returned telling the cell for each row to have some text Which is a product of the selected segment. I chose to have each cell read "I AM CELL (selectedSegment indexPath.row *)". Essentially this means that when 0 is selected segment will read every cell.

I AM CELL 0

When segment 1 is the selected cells will read.

I AM CELL 0

I AM CELL 1

I AM CELL 2

....

When segment 2 is the selected cells will read.

I AM CELL 0

I AM CELL 2

I AM CELL 4

I AM CELL 6

.... Segment. I chose to

The code to make this happens is ...

You can download the source for this tutorial here