"Go" IOS 9 Storyboard Tutorial (one on)

Transferred from: http://blog.csdn.net/yangmeng13930719363/article/details/49886547

Storyboard is an exciting feature added after IOS5, and using storyboard can save a lot of time to build your app interface.

In order to introduce you to what is storyboard, I will take a picture as an example. The following is an app you completed using storyboard in this tutorial.

• You probably don't quite know what the app does, but you can clearly see what the interface is, and how it's related to the interface.

• You can see all the viewcontroller layouts in storyboard and can describe the connections between them. Using storyboard, you can better understand all the interfaces in the app.

• Storyboard can describe transitions between multiple scenes (transitions). These transitions are referred to as "segues". In Storyboard, You can create these segues by connecting your viewcontroller correctly. Thank segues! you only need very little code to manage your UI.
• Storyboard can make tableview with basic cell and static cell work easier. You can almost completely design your TableView in storyboard, which reduces the amount of code.
• Storyboard can make auto layout easier, and using auto layout allows you to determine the relationship between elements in a mathematical relationship. This powerful tool makes it easier to operate devices of different sizes and sizes. In this tutorial you will use Auto Layout, but the knowledge about auto layout is not within the scope of this tutorial, but you can learn more about auto layout in auto layout tutorial or watch the video series.

In this storyboard tutorial, you will create a simple app that allows you to create a list of players and games and their skills, and in the process of learning, you will learn to use storyboard in some of the most common tasks.

Let's get started!

Open Xcode, then create a new project and select Single View application.

Xcode then creates the project, and the main window of Xcode is as follows:

The new project contains two classes, Appdelegate.swift and Viewcontroller.swift, as well as the key to this tutorial: Main.storyboard files.
This app only supports portrait screens, so you need to remove landscape left and landscape right options in general->deployment Info, Device orientation.
Now let's take a look at storyboard. In the project navigation bar, click Main.storyboard, and then you'll see storyboard in the Interface Builder editor.

A Viewcontroller storyboard official term is "scene", you can use this term. The scene is the display of a controller in storyboard.

You can see a simple viewcontroller with an empty view. In storyboard, the arrow on the left points to a viewcontroller, which indicates that the Viewcontroller is an initial controller.

In the storyboard editor, you can drag and drop some controls from the object library in the lower right corner to design layouts for your viewcontroller. You'll see how amazing it is to be done in just a moment!

Note:

You may notice that in storyboard, the default controller is square. Xcode7 can set Auto layout and size Classes.auto layout and size Classes for these default controllers, allowing you to flexibly change the dimensions of the user interface, This is useful for iphone and ipad with many sizes. To be able to learn more about size classes, view the Adaptive Layout Video tutorial series, in this lesson, You'll put the optional steps in your storyboard so you can see the final screen more easily.

Before you explore, adjust the simulation scenario to iphone6/6s.
Select View Controller in document Outline. If you don't see document Outline, click this button in the bottom left corner of storyboard:

Under Attributes inspector the simulated Metrics (analog metric) attribute, change size to iphone 4.7 inch,:

In storyboard, this size is the iphone6/6s screen size.
In storyboard, "inferred" is the default setting in simulated metrics. Simulated metrics is a visual-aided design in storyboard, which is what your screen will look like. Just remember, They are not used at run time.
To understand how storyboard works, you can drag some controls in the object library in the lower right corner of the controller panel:

When you drag these controls, they appear in the Document Outline on the left:

Storyboard shows all the controllers you have created, there is currently only one view controller (or scene) in your storyboard, but in this tutorial you will join several other controllers. Above this scene there are, A miniature version of document Outline, called the dock.

In this scenario, the dock shows the top-level objects, each with at least one view Controller object, a first Responder object, and an Exit option, but it may also have other top-level objects. The dock can be conveniently connected to these outlet and actions. If you want to connect to another view controller, you can simply drag its icon from the dock.

Note:

You may not want to use first Responder. It is a proxy object that refers to the initial response state of any object within any given time. For example, you can connect a button's touch up inside event to Responder on the selector. If at some point a text box is the input focus, then you can press the button to have the Text field as the first responder copied to the pasteboard.

To run this app, it should look exactly the same as the one you designed in the editor (you might look different from the following-this is just for demonstration purposes and will not be used in future tutorials):

The View controller you have defined as the initial Director-but how does the app load it? Take a look at the application's proxy to find the answer. Open Appdelegate.swift you will see the source code starting from here.

ImportUIKit @UIApplicationMain class appdelegate: uiresponder,  uiapplicationdelegate {var window: uiwindow? Func application (application: uiapplication, didfinishlaunchingwithoptions launchoptions: [nsobject: anyobject]?) -bool {//Override point Span class= "Hljs-keyword" >for customization after application launch. return true}        

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

In Appdelegate the header of the specified file for this class, @UIApplicationMain attribute as the entry point for the module. This property is required for storyboard. Your application delegate inherits from Uiresponder, And he has a UIWindow attribute. All methods are empty. Even application (_:didfinishlaunchingwithoptions:) It simply returns True.

The secret is in a file called Info.plist. In the navigation bar, click Info.plist and you will see these things:

The Storyboard app uses this key uimainstoryboardfile, also known as "Storyboard file base name", in order to be able to specify the name of the Storyboard, the named Storyboard file must be loaded , the "Initial View Controller" is automatically instantiated from the storyboard and the controller's view is added to a new UIWindow object. You can also see this section in the General tab in Project Settings deployment info:

Now create a ratings app with a few view controllers ~

Just add it to my tag.

The ratings app you're about to create has a tabbarcontroller, and with two item, it's very easy to create with storyboard.

You will start creating on an empty storyboard, so switch back to Main.storyboard and delete the view controller created by default. This can be done by clicking the View Controller in document Outline Then you can delete it by pressing the DELETE key.

For convenience, once again change the simulated metrics to show this scene as an iphone. When you do, in document outline, select the tab Bar Controller, and then on the right side of the Attributes Inspector, change the size of the iphone 4.7 inch. The two view controllers will also be changed to the sizes of the iphone 6/6s.

This new Tab Bar controller is preconfigured with two view controllers. Uitabbarcontroller is also known as the container view controller because it contains one or more other view controllers. The other two commonly used containers are the navigation controller and Split view controller (You will use the navigation Controller in the back).

The relationship between the containers is represented by the arrows on the tab Bar Controller and view Controller. The icon that you see in the middle of the arrow represents a specific embedding relationship.

Note:

If you want to move or zoom out the tab controller and its additional view controller at the same time, you can press and hold-tap or click and drag multiple selected scenes. It's possible to bring them together. (The selected scene has a blue outline.)

Drag a Uilabel to the first view controller (the currently displayed caption is "Item 1"), double-click, and set the label's title to "Primary tab". Then drag a uilabel in the second view controller ( "Item 2"), set the title of this label as "Second tab". When you switch between the two controllers, you do see that some changes have occurred.

Note:

When you zoom out of the editor, you can't drag controls into those controllers. You can return to the normal scale size by double-clicking on the work interval.

After compiling and running (build & Run), you will see an error message similar to the following in the console:
RATINGS[18955:1293100] Failed to instantiate the default view controller for Uimainstoryboardfile ' Main '-perhaps the DES Ignated entry point are not set?
Fortunately, the error message is very clear-you never set an entry point, meaning that after you delete the default created controller, you do not have the initial View controller set up. To solve this problem, select the tab controller and then on the right Attributes Inspector Check is Initial View Controller.

In the work area, this arrow points to the deleted view controller, which now points to the tab controller.

This means that when you run the app, UIApplication will have the tab controller as the home screen. Run the app and try it. The app now has a tab Bar and you can have two two view Switch between controllers:

TIP:

To change the initial view controller, you can also drag the arrow between the View controller.

Xcode comes with a template for building a tagged app (also called a tag app template), you can use this template, but it doesn't really know how this works, so if you feel the need, you can also create a tab Bar Controller manually.

Note:

If your tab controller is connected to more than 5 sub-controllers, when you run the app, he will automatically add the controllers. What a simple thing to do!

Add a table View Controller

Currently, only two Uiviewcontroller are connected to the tab Bar Controller. Now you need to replace the first uiviewcontroller with a uitableviewcontroller.

Click the first view controller in the Document Outline column and press DELETE to delete. Then drag a new Table view controller from the object library to the previous view Controller's location.

Now you need to put this table view controller in a navigation control. In the case of Table View controller selection, editor\embed in\navigation is selected in the menu bar of Xcode. Controller. This also adds another director.

You may also drag a navigation Controller that has been embedded in the TableView from the object library, and this embedded command can save you a lot of time.
Because this navigation controller is also a container for the View controller (as in the case of tab-Controller), it has a relationship to the table View Controller. You can also see document See this relationship in Outlin.

Notice that the table View controller is embedded in a navigation bar. Interface Builder will automatically put it there because this controller will show up in this navigation Controller's frame. That's not a real Uinavigationbar object, but it's a mock object. Simulated metrics will infer the context in this controller, and then the navigation controller will display a navigation bar. In a tab bar controller, a tab bar is displayed, and so on ...

The new controller is square. When you embed them into the Tab-Bar controller, for an instant, they change their size to match their parent view controller.
To connect the two new controllers to the tab controller, hold down CONTROL and drag the tab controller to the navigation controller. When you put the first place, There will be a small one. Select the Relationship Segue–view controllers option:

This creates a new arrow relationship between the two controllers. This is also an embedding relationship, as you can see in the Tab Bar controller.
TAB BAR Controller has two embedding relationships, corresponding to each label. The navigation controller itself also has an embedding relationship with the table View controller.

When you create this new connection, the tab controller adds a new tag. And there is a simple name for "Item". For this app, if you want this new controller to be the first tag, then you can only drag to change the order of them.

Try running the app. The label in the first navigation controller now contains a table view.

As soon as you connect a view controller to the tab bar controller, you can see that a tab bar item object is generated at the bottom of document outline or the controller. You can tab bar The controller uses the tab BAR item to configure the label's caption and icon.
Select the tab Bar Item in the Navigation controller and then set the title to players in the attributes inspector.

Rename the tab Bar item of the view controller to gestures in the same way. A well-designed app should also put some pictures on these tags, and the tutorial's resources contain a subfolder for images. Drag this folder into the project Assets.xcassets in the paper.

As you may have guessed, the gestures is gestures.png.
A View controller embedded in the navigation controller has a navigation Item that is used to configure the navigation bar (navigation bar). Select Table View from Document Outline The controller's navigation item then changes its title to players in attributes Inspector.

Have you noticed? Now the item in document outline has become players.

Alternatively, you can double-click the navigation bar and change the title. It should be noted that you should double-click the simulation navigation bar in the table View controller instead of the real navigation bar object in the navigation controller.

Run the app and you'll marvel at your beautiful tab bar, yet not write a single line of code!

"Go" IOS 9 Storyboard Tutorial (one on)