Use storyboard to build the tag bar multi-page application UI

Main Content

• Differences between multiple views in the label column and multiple views in the navigation bar
• Use storyboard to build a multi-view application in the label bar

 

Brief Introduction

The tag 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 activates a New View Controller (Tab), displays a new view, and retains the tab bar at the bottom. As shown in.

 

Another common multi-view iPhone application is a navigation-based application that has a navigation controller that controls a series of hierarchical views. The depth of the view where the navigation controller tracks, and provides you with control, so that you can return to the previous view. The tab bar is used to select one option from two or more options, and only one option can be selected (multiple tab columns are used to select parallel pages ).

 

Reference: For a brief description, refer to Chapter 6 "proficient in iOS development": multi-view applications

 

Storyboard build Label bar

Here we will describe how to use storyboard to build the multi-view application UI in the tag bar.

1. Select tab bar Controller

First, select a tab bar controller from the storyboard object selection:

On the storyboard, we can see the UI interface shown in. The first page (Tab bar Controller) does not need to be operated on, because we operate its tab (the last two pages) is automatically updated to the tab bar controller.

 

2. add our own tableview Controller

As you can see, the tab bar controller comes with two tabs when it is dragged into the storyboard. Its type is View Controller. we can delete it and add our own view controller as needed.

First, delete the first built-in View Controller and drag a tableview controller from the right;

As shown in, after adding your own tableview controller, create a jump from the tab bar controller to the tableviewcontroller (hold down the control and drag the line from the tab bar controller to the tableviewcontroller ), we can see that in addition to the common push, modal, and custom methods, there is an additional view controllers. Here we should choose this connection;

 

3. Modify the label style in the tab bar

Select the tab bar item in the tableviewcontroller we just added ),

View the attributes in the property Checker:

Here we can modify the two items marked above. The first is the text displayed under the label icon, and the second is the icon. The modified results are as follows:

At this time, we can see that the tab bar in the tab bar controller has been automatically updated (this is what we mentioned earlier does not need to modify the tab bar Controller ):

Similarly, we can delete another built-in viewcontroller, add the tableviewcontroller we need, and repeat the operation we just performed:

 

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 course tab bar controller is not connected, there are only two labels in the tab bar, and there is no label bar in the newly added tableview controller. Then we connect to the tab bar controller according to the preceding method, and the operations are exactly the same.

After connecting tab bar controller and tableview controller, the number of tab bar labels in tab bar controller is automatically changed to three. You can also modify the label style in the newly added tableviewcontroller.

At this time, the multi-page UI of the tag bar with three tableview tabs is ready. The next step is to add the controller and model. We will not introduce them here.

5. Run

To see the switch of the tab, we add a label to each page. The switch of the surface page is as follows:

 

6. Reference

You can also refer to this video for details:

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

 

Remarks

Here, the tag bar multi-page application is only displayed in a separate tag bar. We have not mentioned the differences between how to enter the tag bar page and how to enter it, this will be detailed later in tab bar controller and navigation bar.

 

You can download the demo source code here:

 

Guo Liu

Edited for the first time on Saturday

Use storyboard to build the tag bar multi-page application UI