IOS AutoLayout Details (i)

Original blog, reproduced please indicate the source
Blog.csdn.net/hello_hwc

Objective:
AutoLayout is a key technique for adapting the UI to adaptive control device size changes. As iOS device sizes become more and more, it's hard to lay out the UI with some fixed numbers as before.
There are two ways to implement AutoLayout

• Storyboard
• Code

There are three alternative ways to implement with storyboard

• Blue guides for Xcode to automatically create
• Mouse drag and drop to achieve
• Some of the options in Xcode key configuration

The contents of this article include

• Some basic knowledge on the storyboard
• Create a AutoLayout based on a blue reference line

The next article will continue to be updated with storyboard to create the AutoLayout, and then an article will explain how to use code to implement AutoLayout

Storyboard some of the preparation knowledge

1 choice of different equipment storyboard

When the same program serves different size devices at the same time, it is sometimes configured as a different storyboard, and the Wany hAny (width any;height any) in the red circle is the key to select Storyboard. By default, a storyboard is available for all devices.

Click Wany HAny, for example. The red circle section describes which devices are currently storyboard.

View Preview on the 2 storyboard.
Previewing the view is important for AutoLayout, because it's too time-consuming to run-debug every time.
Opens the secondary editing window. ( Command+Option+Enter shortcut key)
Then, follow the motion diagram below

Opens the secondary editing window.
Here is a simple auxiliary editing window to see the effects of different devices

Xcode automatically creates AutoLayout

Xcode can automatically create AutoLayout, why do I say it is based on the blue reference floss? Because, if not based on blue guides, automatically created layout is likely to be much worse than desired.

The process of automatically creating with a blue reference line
1. Place the control according to the Blue reference line

As you can see, a blue guide appears in the process of dragging

1. Let Xcode automatically create
   Select the button, and then follow
   

Thus, the effect is as follows

As you can see, the screen rotates and the button is always in the upper right corner.

Subsequent

About AutoLayout Article I will update two, one continues to explain how to create on the storyboard, another article on how to use code implementation.

IOS AutoLayout Details (i)