iOS Getting Started storyboard

Overview

iOS has developed three major genres in iOS development: Using the Code handwriting UI and layout, using a single xib file to organize Viewcontroller or view, and using storyboard to build a full UI from a single or few files. In recent years of development, Apple's development of the Storyboard has been increasing, adding more features and features, greatly facilitates the interface development, adaptation and improve code performance.

Let's take a look at the main differences in three ways:

Handwritten pages and logical code

If your goal is to write some highly reusable controls for other developers to use, There is no doubt that the best choice should be to use code to complete the subclass of UIView. Such further modifications and other developers in the use of a lot of convenience. Using code is also the most powerful, there will be xib or storyboard can not do things, but the use of code in the end must be able to complete the required requirements.

XIB

In fact, IB and Xib are bundled in the Developer Toolkit from the first launch of the iOS SDK, and have been integrated directly into Xcode after Xcode 4 as part of the IDE. One of the main purposes of xib design is good MVC: In general, a single xib file corresponds to a viewcontroller, and for some custom view, it is often loaded using a single xib and loading from the main bundle. IB helps with the creation of view, layout, and relational mapping with file owner, among other things.

But the biggest problem with Xib is that the settings in Xib are often not the final setup, In the code you will have the opportunity to overwrite the UI design you made in the Xib file. Setting the same property in different places will be a nightmare in later maintenance. Because IB is still limited, it has no logical judgment and is difficult to configure at runtime.

StoryBoard

Simply understood, storyboard can be seen as a set of Viewcontroller corresponding Xib, And a collection of ways to convert between them. In storyboard, you can see not only the layout style of each viewcontroller, but also the conversion relationship between each viewcontroller.
The biggest problem facing storyboard now is the collaboration of many people. Because all the UI is defined in a file, so many developers personally or the company's technical leaders believe that storyboard can not be collaborative development, in fact, this is more a kind of storyboard the unfamiliar caused by misunderstanding. While Apple is not explicitly mentioned in WWDC, but no one is required to have only one storyboard file for the entire project.
Now there are some concerns about storyboard performance. Because storyboard files tend to be larger and load slower relative to a single xib. But Apple is making a big improvement in this area.

Storyboard Essence

The essence of StoryBoard is an XML file that describes key information such as forms, components, Auto Layout constraints, and so on. Sample files
Https://github.com/johnlui/AutoLayout/blob/master/AutoLayout/Base.lproj/Main.storyboard
Storyboard's biggest benefit is separating the interface from the code, like the CSS description interface in WEB development, the HTML description, the JavaScript description behavior, the ability to make the code clearer and easier to read, the behavior of the interface, and the logic of each other to become more intuitive.

IOS projects that use StoryBoard initialize the StoryBoard file as an initialization entry for the entire program, and the Uiviewcontroller class is initialized by StoryBoard binding to launch the app and run.

Storyboard use

1. Create a storyboard file under Arc

2, in general, the program is written in the Xcode default Main.storyboard inside, you can also customize the storyboard to the corresponding module.

3, after creating the custom storyboard, remember to modify the main interface to define for yourself storyboard

Note: We remember the winner interface here is Initial View controller to remember to check, so that the red circle inside the small arrows will appear, indicating that the program runs from this interface.

Storyboard the lower right corner of Xcode, you can search for the type of control you want to add in the filter search bar below and drag it to the view controller in the center of the screen. This is similar to other interface development software.

Of course, you can also edit the properties of the control.

I'd like to see everyone here trying to get on with it. Here's how to get started, and then say how to write a code and page-separated iOS high-quality code specification.

Storyboard specification for Storyboard separation of use specifications

Unless it is a single-page application, in most cases, using a single Storyboard is often not feasible, because each App is usually made up of a variety of different complex modules, and whenever a property or location of an element in it changes, it causes the entire Storyboard file to produce multiple code changes. Especially under the control of Git code version, dealing with the conflicts caused by branch merging can become very cumbersome.

So, the separation of Storyboard has a 1-5 principle: each Storyboard as far as possible to separate into a person processing range, each Storyboard try to control less than 5 View. For example, the Settings page, registration page, information detail page, publishing page, etc., basically only need one person to be responsible, and the page in most cases will be less than 5 View (if more than 5 times, you can consider whether you can consider the separation of them). All View of the module is managed in the same Storyboard file. This can greatly reduce conflicting situations, and Storyboard read and render performance is much faster than opening a large Storyboard alone.

For example, we put all the storyboard of the project in a file maintenance.

Storyboard Naming conventions

A good set of code projects, the name of the variable, the language style of the code will have a corresponding specification, in order to facilitate communication between members and development. In Storyboard, various element identifiers also require a set of named specifications to facilitate communication between development. For example: Albumcollectionviewcontroller-Album Collection View Controller,passwordlabel-Password Label. This allows you to make a naming convention for each team and industry specification.

Storyboard Interface Specification

Storyboard, in addition to being the building language of the UI interface, plays a role in the preview of the interface. Interface specification has a principle, that is when the Storyboard show to other people, as far as possible to let others see what the Storyboard is doing, the interface between the logic is how, the interface of the approximate effect is how.

Layout specifications

Xcode itself has the layout of the auxiliary line hint function, when the drag, you can follow the tips of the guide to the alignment of the View or control, reasonable use of this feature can facilitate us to adjust the layout of the neat.

The layout between view and view can be logically arranged according to the principle of left to right, top to bottom. Because the connection algorithm between the view in the Storyboard is from the right edge of the view, to the left edge of another view end, if reversed, there will be a lot of overlapping lines, so that the interface looks very messy.

In Xcode 7, the new Storyboard Reference control is added (although it is new in iOS 9, but iOS 8 is also available). Reasonable use of this control allows Storyboard to describe the jump logic for View and other Storyboard. The data transfer between view can be Segue to standardize the code of jump between view, and make the logic clearer.

So we try to preview the actual effect when we write the layout.

Beginner Storyboard Some bug questions 1

Beginner IOS Development, if you use StoryBoard, you may have encountered this strange bug, such as the full black page.
When the APP starts, it starts the main StoryBoard, so be sure to remember to check the IS Initial View controller option.

Question 2

If we are writing multiple storyboard, for beginners often go back to the following situation.

This warning means that the form has no entry and cannot be reached. There are two ways of solving this:
1, set the initial form for the StoryBoard:

Set a StoryBoard ID for the form:

Then we can write the jump logic in the code.
Main interface

"Second"nil).instantiateInitialViewControllerUIViewControllerself.navigationController?.pushViewControllertrue)

Second interface

"Second"nil).instantiateViewControllerWithIdentifier("First"UIViewControllerself.navigationController?.pushViewControllertrue)

Of course, they can also be called with Self.presentviewcontroller.

iOS Getting Started storyboard