Preface
iOS devices are growing in size and may be adapted to a variety of devices for an app. Multiple sizes. So. We expect our app to be autoLayout
. This article is mainly about using in Xcode constraint
. This article will be updated on an irregular basis in the future.
Conventions
The view in this article refers to the various view dragged from the Objuect library.
Basis
A view is displayed at the interface with at least three decision conditions
- One, the size of itself: such as width, height
- Position relative to the parent container: fixed starting coordinate position or relative position
- Third, relative to the location of the brother view: such as top alignment, left and right distance, stacking level
Ideas
In the storyboard
, drag-and-drop view has a default style, in the process of dragging there will be blue guides, help us layout. But the position size and so on are fixed, we need to give each view setting constraint
, tell it how to behave in different situations.
Auxiliary line
Compile Execution
Label
and noVertical Horizontal Center
Compile results
Layout is the process of determining the horizontal position, vertical position, and relative position of the view
Demand
A common scenario: a search box, a search button
Search box: Length to be scaled as the interface changes. With OK button spacing 20, distance left 0. Top 10, Height 40
OK button: Top 10, right 0, and search box spacing 20, Width 50. 40 higher
Let's take a look at the results.
Vertical screen
Rotary Screen Implementation steps
- 1, drag one
text Field
, one Button
to storyboard
- 2. Note the button at the bottom of the storyboard
Constraintbutton
Each of the three buttons is
Align
: Mainly used for sibling view alignment
Pin
: Self size, relative container position
Resolve auto layout issues
: Applicationconstraint
Post-update Storyboard
3, check button
, click Pinbutton, Top margin 10, set left margin 20, right margin 0, height 40, Width 50 ( The width of the Button is basically fixed)
width and height are descriptive descriptions of their size, condition one
the top and right margins are relative to the parent container, condition two
left margin is relative to the location of the sibling view, condition three
Button Constraint
Click add 5 Constraints
The result will look the same as below
Results
4, this time, we click Resolve auto layout issues
, and select Selected Views
under theUpdate Frame
Update Frame
5. Now select at the same timeButton
Andtext Field
ClickAlign
button CheckTop Edges
, from the icon we can see, is the top of the meaning of the alignment
The top is the position relative to the sibling view. Condition three.
At the same time. Implied bytext Field
Position relative to the top of the parent container andButton
Same, condition two
Top Edges
ClickAdd 1 Constraints
Add 1 Constraints
ClickResolve auto layout issues
ChooseSelected Views
Under theUpdate Frame
Update Frame
- 6, now selected
text Field
, click pin
button. Set left margin 0 and height 40. Click add 2 Constraints
Height 40. Conditional one
left margin, condition two
implied, width is the position from the parent container to the left 20 of the search button, condition one
Set up
text Field
Left margin
ClickResolve auto layout issues
ChooseSelected Views
Under theUpdate Frame
Update Frame
Results
Change Button
the text for the search even if it is finished ~
iOS Development AutoLayout Constraint