iOS Development AutoLayout Constraint

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 Labeland 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: ApplicationconstraintPost-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 timeButtonAndtext FieldClickAlignbutton 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 FieldPosition relative to the top of the parent container andButtonSame, condition two

Top Edges

ClickAdd 1 Constraints

Add 1 Constraints

ClickResolve auto layout issuesChooseSelected ViewsUnder 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 FieldLeft margin

ClickResolve auto layout issuesChooseSelected ViewsUnder theUpdate Frame

Update FrameResults

Change Button the text for the search even if it is finished ~

iOS Development AutoLayout Constraint