Build a tab bar multi-page application with Storyboard UI_html/css_WEB-ITnose

Main content

The difference between tab bar multi-view and navigation bar multi-view

Build a tab bar multi-view application with Storyboard

Brief description

The tab bar application is a multi-view application that displays a row of buttons at the bottom of the screen, called the tab bar. A single button will activate a new view controller (tab) and display a new view, while still retaining the tab bar at the bottom. There are 3 tab bars as shown in the picture below.

Another common multi-view iPhone app is a navigation-based app. This type of app has a navigation controller and uses navigation Columns control a hierarchical series of views. Navigation controllers keep track of the view depth they are in and provide you with control to return to the previous view. The tab bar is used to select one option from two or more options, and only one can be selected (the tab bar is mostly used to select between parallel pages).

Reference: This brief introduction mainly refers to Chapter 6 of "Mastering iOS Development": Multi-View Applications

Storyboard Building Tab Bar

Here we describe how to use Storyboard to build a tab bar multi-view application UI.

1 Select Tab Bar Controller

First select a Tab Bar Controller in the object selection of Storyboard:

In Storyboard we can see the following In the UI interface shown in the figure, we do not need to operate the first page (Tab Bar Controller) because our operations on its tab pages (the next two pages) will automatically update to the Tab Bar Controller.

2 Add our own TableView Controller

As you can see from the picture above, the Tab Bar Controller comes with it when it is dragged into the Storyboard Two tabs, which are of type View Controller, we can remove them and add our own view controllers according to our needs.

First we delete the first built-in View Controller, and then drag in a TableView Controller from the right;

As shown in the picture above, After adding your own TableView Controller, create a jump from the Tab Bar Controller to the TableViewController (hold down Control and drag the line from the Tab Bar Controller to the TableViewController). From the picture above, we can see that in addition to the usual push, modal, and custom methods In addition, there is one more View Controllers, here we should choose this connection;

3 Modify the label style in the label bar

Select the TableViewController we just added The tab icon (Tab Bar Item) in Two items. The first is the text displayed below the label icon, and the second is the icon ICON. The following is the effect after our modification:

At this time, we see that the tab bar in the Tab Bar Controller has been automatically updated (this is why we mentioned earlier that the Tab BarController does not need to be modified):

Similarly, we can delete the other ViewController that comes with it and add the TableViewController we need, and then repeat the operation we just did:

4 Add a new Controller

The Tab BarController we dragged in earlier has only two View Controllers, and there are only two tab icons in the tab bar. Here we add a new view controller TableViewController

Here we can see that when the newly added TableView Controller class Tab Bar Controller is not connected, the tab bar only has two tabs. At the same time, there is no tab bar in the newly added TableView Controller. Then we connect the Tab Bar Controller according to the method just now, and the operation is exactly the same.

You can see that after connecting the Tab Bar Controller and the TableView Controller, the number of tab bar labels in the Tab Bar Controller automatically becomes 3. Similarly, we can modify the label style in the newly added TableViewController.

At this point, a tab bar multi-page UI with three TableView tabs is ready. The next step is to add the Controller and Model, which we will not introduce here.

5 Runs

In order to see the switching of tabs, we added Label to each page, indicating the switching of pages:

6 Reference

For specific methods, you can also refer to this video, which is more detailed:

http://teamtreehouse.com/library/build-a-selfdestructing-message -iphone-app-2/designing-and-starting-the-app/a-storyboard-with-a-tab-bar-controller

Notes

here The tab bar multi-page application is just a single tab bar display. We have not yet mentioned how to enter the tab bar page, how to enter it, and what the differences are. We will discuss it in detail in the article "Tab Bar Controller and Navigation Bar" later. narrate.

The Demo source code can be downloaded here:

Guo Liu

First edited on Saturday, 8/23/2014