AutoLayout constraint for iOS development and autolayout for ios development

AutoLayout constraint for iOS development and autolayout for ios development
Preface

Ios devices are growing in size. For an app, you may need to adapt to multiple devices and sizes. Therefore, we hope our app canautoLayout. This article describes how to useconstraint. This article will be updated occasionally in the future.

Conventions

In this document, view refers to various views dragged from the Objuect Library.

Basic

A view is displayed on the interface. There are at least three determining conditions.

• I. Self-size: such as width and height
• 2. position relative to the parent container: such as fixed start coordinate position or relative position
• 3. Relative to the sibling view: such as top alignment, left and right distance, stacked level

Ideas

InstoryboardIn the left-side navigation pane. However, the positions and sizes are fixed. We need to set each view.constraintIn different situations.

Guides
Compile and run LabelThere is no vertical horizontal center

Compilation result

The layout process is to determine the horizontal, vertical, and relative positions of the view.

Requirement

A common situation: a search box and a search button
Search box: the length will be scaled as the interface changes. The distance between the search box and the determined button is 20, 0 to the left, 10 to the top, and 40 to the height.
OK button: Top 10, right 0, 20 to the search box, width 50, height 40
Let's take a look at the final effect.

Portrait Screen

Procedure

• 1. Dragtext Field, OneButtonTo storyboard
• 2. Pay attention to the button at the bottom of the storyboard.
  
  Constraint button
  The three buttons are
  Align: Mainly used for sibling view alignment
  Pin: Size and relative container location
  Resolve auto layout issues: ApplicationconstraintThen update storyboard

• 3. SelectButton, Click the Pin button, top margin 10, respectively set the left margin of 20, right margin of 0, height of 40, width of 50 (the width of the button is basically fixed)
  Both width and height describe their own size. Condition 1
  The top margin and the right margin are relative to the parent container, condition 2
  The left margin is relative to the sibling view. Condition 3
  

  
  Button constraint
  ClickAdd 5 Constraints
  The result is shown below.
  
  Result

• 4. ClickResolve auto layout issuesAnd selectSelected ViewsUnderUpdate Frame
  

  
  Update Frame

• 5. Now select bothButtonAndtext Field, ClickAlignSelectTop EdgesWe can see from the icon that it means the top alignment.
  The top is relative to the sibling view. Condition 3,
  At the same time, the implicittext FieldPosition relative to the top of the parent container andButtonSame, condition 2

Top Edges

ClickAdd 1 Constraints

Add 1 Constraints

ClickResolve auto layout issues, SelectSelected ViewsUnderUpdate Frame

Update Frame

• 6. Select nowtext Field, ClickPinButton to set the left to 0 and the height to 40. ClickAdd 2 Constraints
  Height 40, condition 1
  Left margin, condition 2
  Implicitly, the width is from the parent container to the left 20 of the Search button. Condition 1

Set text FieldLeft margin

ClickResolve auto layout issues, SelectSelected ViewsUnderUpdate Frame

Update FrameResult

ModifyButtonThe search is complete ~

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.