(translated) Getting started--1.2.2 desinging a user Interface (design UI)

? Users need to interact with the application interface in the simplest way. Should design the page from the user's point of view, make the interface more efficient, simple and direct.

Storyboard helps you design and implement the interface in a graphical way. In the process of designing and implementing the interface, you can see exactly what interface you are implementing, what is appropriate on the interface, what is inappropriate, and how you adjust the interface at any time.

When you use storyboard to build the interface, as you learned in the previous tutorial, you have been working with views (view) to show the content to the user. A view is a basic unit for building a user interface that is used to present content effectively, elegantly, and clearly. If you are developing more complex applications, you can use multiple scenes and multiple view.

View Hierarchy

On the screen, the view does not display itself and does not respond to user input, they can only provide a window for placing other views. As a result, the view in the application is managed by the east of the view hierarchy. The view hierarchy defines the layout of the view relative to other views. In a hierarchy, a view that is contained in another view is called a child view, and a view that contains other views is called a parent view. Even if there is more than one child view in a view, it has only one parent view.

The top-level object of the view hierarchy is the Window object. It is an instance of the UIWindow class, which is the basic container on the screen for adding view objects. In order to display the content, you need to add a content view object (the content View object as a child view of the window) to the window.

The content view and its child views are visible to the user, and the content view must also be inserted into the view hierarchy of the window. When you use storyboard, the location where the content view is placed is automatically configured for you. When the app is launched, the Application object loads storyboard, creates an instance of the view controller class, extracts the view hierarchy from each view controller, and then adds the view content in the view control as the start to the window. In the following sections, you will learn how to manage the view controller. Now you need to focus on how to create a hierarchy in Storyboard's single view controller.

Types of views

When you design your app, it's important to understand which view is used under what kind of intent. For example, if you want to collect information about a user (such as a text), you can use the text field, and if you want to display a static text, you should use a label. When you apply drawing, views using the Uikit framework are easier to create because you can use them to quickly assemble a basic interface. The View object for a Uikit frame is an instance of the UIView class or subclass. The Uikit framework provides different types of views to help you represent and organize your data.

Although each view has its own specific functionality, in general, the Uikit view can be categorized into the following types:

View Type	Intention	Example
Content	Display specific types of content, examples, or text	Image View,label
Collections	Display a collection or a group of views	Collection view,table View
Controls	Perform actions or display information	Button,slider,switch
Bars	navigating or performing actions	Toolbar,navigation Bar,tab Bar
Input	Receiving text input from a user	Search Bar,text View
Containers	Providing containers for other views	View,scroll View
Modal	Interrupts application of normal processes to allow users to perform actions	Action Sheet,alert View

You can assemble the view visually in Interface Builder. Interface Builder provides a standard library of view, control, etc. that you use when building your interface. Drag objects from this library, place them in the canvas, and arrange them your way. Use inspector to configure these objects before saving. You'll see the results immediately, without having to write any line of code, and you can run the program.

The Uikit framework provides a standard view to display various types of content, and you can also inherit UIView (or its subclasses) to create your own view. The custom view must be a subclass of UIView, and in the custom view you need to handle all the drawing events yourself and handle all the event handles. In this tutorial, you will not use a custom view, and if you are interested, you can learn more about how to implement a custom view in defining a custom view article.

Placing a view using storyboard

in a visual environment, use storyboard to place your own view hierarchy. Storyboard provides a direct, visual way to let you manipulate views and build interfaces.

As you saw in the previous tutorial, storyboard is composed of scenes with a view hierarchy associated with each scene. By dragging a view from the object library and placing it on the scene, storyboard automatically adds it to the view hierarchy of the current scene. In the view hierarchy, the position of the view is up to you, where you put the view and where it appears. After you've added a view to your scene, you can resize, configure, move, and position the image on the canvas.

The canvas can also display a view outline of an object on the interface, which is displayed on the left side of the canvas, and you can see clearly the hierarchy of objects in the canvas from the outline.

The view hierarchy created in the storyboard scene is actually a series of compressed Objective-c objects. At run time, these objects are decompressed. The result of the decompression is that you use the inspector of the utility area to display the hierarchy of the property values set for instances of the related class.

As you learned in the previous tutorial, in storyboard, the default interface configuration for your work is applied to each version of the interface. When you need to adjust your interface for specific device sizes and orientations, you should assign this change to a specific size class. The size class is a high-level way to describe horizontal or vertical space in a display environment, such as a vertical iphone or a landscape ipad. There are two types of dimension classes: normal, compact. The presentation environment is characterized by a pair of dimension classes, a description of the horizontal space, and a description of the vertical space. On the canvas, you can use the size class controller to preview and edit the interface for a combination of normal and compact dimensions.

In this tutorial, you don't work in a specific size, but if you're curious about the size class, read the size Classes Design help section.

Using inspector to configure a view

Utility area, the contents of the Inspector panel above the object library are displayed as follows:

Each element of the inspector provides important configuration options for elements on the interface. When you select an object (such as a view), Inspector will update the properties in the panel based on the object you select, and you can set the properties.

1. File: Specifies general general information about the storyboard.

2. Quick Help: Get useful information about the object.

3. Identity: Specify a custom class for the object and define the properties it can access.

4. Attributes: A visual property of a custom object.

5. Size: Specifies the size of the object and the auto layout property.

6. Connections: Create a connection between the interface and the source code.

In the previous section of the tutorial, you used the attributes Inspector. In the remainder of the tutorial, you will continue to use other inspector to configure the views and objects. In particular, use the attributes inspector to configure the view, use the Identity inspector to create the view controller, and use the Connections inspector to create a connection between the view and the view controller.

Locating a view using auto layout

When you start to position the view in storyboard, you need to consider a variety of situations. iOS apps run on a large number of different devices, with different screen sizes, different orientations, different languages, and so on. You need a dynamic interface that should be able to respond seamlessly when the device's screen size, orientation, localization, metrics, and so on are changed.

If you've learned the previous tutorial, you'll see that Xcode provides a tool called auto layout to help you create a common, adaptable interface. Auto layout is the system that interprets the relationship between views. In a single view or between multiple views, it lets you define a series of conventions.

Click the Auto layout icon at the bottom right of the canvas to add different types of conventions to the views on the canvas, solve layout problems, and check the conventions used to constrain behavior.

1.Align: Create a constraint on a row or column. For example, place a view in the middle of a container, or put a view on the left side of a two-view.

2.Pin: Create a spatial constraint. For example, define the height of a view, or specify its horizontal distance from another view.

3.Resolve Auto Layout issues: Based on recommendations, resolve layout issues by adding or resetting constraints.

4.Resizing Behavior: Specifies how the constraint is affected when the size is reset.

At this point, you don't need to learn further about the auto layout for a simple page you create in the ToDoList app. Because, the interface of the application is very complex, you need to add different constraints to specify precisely, in different devices and directions, the interface should be placed in the view. At the end of the tutorial, there will be a link to the Auto layout tutorial, which will help you use constraints to define more complex and adaptive interfaces.

(translated) Getting started--1.2.2 desinging a user Interface (design UI)