iOS Development AutoLayout Constraint
Last Update:2015-07-24
Source: Internet
Author: User
<span id="Label3"></p><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; font-size:26px; line-height:1.8; color:rgb(47,47,47)"><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; font-size:26px; line-height:1.8; color:rgb(47,47,47)">Preface</span></span><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">iOS devices are growing in size and can be adapted to a variety of devices and sizes for an app. so, We expect our app to be able to <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">autoLayout</code> . This article is mainly about using in Xcode <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">constraint</code> . This article will be updated on an irregular basis in the Future.</p></p>Conventions<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">The view in this article refers to the various view dragged from the Objuect library.</p></p>Basis<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">A view is displayed at the interface with at least three decision conditions</p></p> <ul style="padding:0px; margin:0px 0px 20px 25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"> <ul style="padding:0px; margin:0px 0px 20px 25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"> <li style="line-height:30px">one, the size of itself: such as width, height</li> <li style="line-height:30px">Position relative to the parent container: fixed starting coordinate position or relative position</li> <li style="line-height:30px">third, relative to the location of the brother View: such as top alignment, left and right distance, stacking level</li> </ul> </ul>Ideas<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">In the <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">storyboard</code> , 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 <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">constraint</code> , tell it how to behave in different situations.<br></p></p><br>Auxiliary line<br style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">Compile Run</span></span><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Label</code></code><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">and no</span></span><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><span style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">Vertical Horizontal Center</span></span><br style="font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><br>Compile results<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><strong>Layout is the process of determining the horizontal position, vertical position, and relative position of the view</strong></p></p>Demand<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">A common scenario: a search box, a search button<br>Search box: length to be scaled as the interface changes, with the OK button spacing 20, distance left 0, top 10, height 40<br>OK button: top 10, right 0, distance to search box 20, width 50, height 40<br>First look at the final effect</p></p><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br>Vertical screen<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br>Rotary Screen Implementation steps <ul style="padding:0px; margin:0px 0px 20px 25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"> <li style="line-height:30px"><li style="line-height:30px">1, Drag one <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">text Field</code> , one <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Button</code> to storyboard</li></li> <li style="line-height:30px">2. Note the button at the bottom of the storyboard<br><br>Constraint button<br>Three buttons respectively are<br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Align</code></code>: Mainly used for sibling view alignment<br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Pin</code></code>: Self size, relative container position<br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Resolve auto layout issues</code></code>: Application<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">constraint</code></code>Post-update Storyboard</li> <li style="line-height:30px"><li style="line-height:30px"><p style="margin-top:0px; margin-bottom:25px; word-break:break-word; overflow:visible">3 , check <code style="padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">button </code> , Click the pin button, top margin 10, set the left margin 20, the right margin 0, height 40, width 50 (the width of the button is basically fixed) <br> Both width and height describe their size, the condition one <br> the top and right margins are relative to the parent container, condition two <br> The left margin is relative to the location of the sibling view, condition three <br> </p> <br> Button constraint <br> Click <code style="padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">add 5 Constraints </code> <br> The result will look the same as below <br> <br> Results </li></li> <li style="line-height:30px"><p style="margin-top:0px; margin-bottom:25px; word-break:break-word; overflow:visible"><p style="margin-top:0px; margin-bottom:25px; word-break:break-word; overflow:visible">4, This time, we click <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Resolve auto layout issues</code> , and select <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Selected Views</code> under the<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Update Frame</code><br></p></p><br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Update Frame</code></code></li> <li style="line-height:30px"><p style="margin-top:0px; margin-bottom:25px; word-break:break-word; overflow:visible">5. Now select simultaneously<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Button</code></code>And<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">text Field</code></code>Click<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Align</code></code>button, Tick<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Top Edges</code></code>, from the icon we can see, is the top of the meaning of the alignment<br>The top is relative to the location of the brother view, condition three,<br>At the same time, the implied<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">text Field</code></code>Position relative to the top of the parent container and<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Button</code></code>same, condition Two</p></li> </ul><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Top Edges</code></code><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">Click<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Add 1 Constraints</code></p></p><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">add 1 Constraints </code></code><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; Font-family: ' Lucida Grande ', ' Lucida Sans unicode ', lucida,helvetica, ' Hiragino sans GB ', ' Microsoft yahei ', ' Wenquanyi Micro Hei ', sans-serif; line-height:27.2000007629395px "> Click <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">resolve Auto Layout issues </code> Select <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">selected views </code> under <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">update Frame </code> </p></p><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Update Frame</code></code> <ul style="padding:0px; margin:0px 0px 20px 25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"> <li style="line-height:30px"><li style="line-height:30px">6, now selected <code style="padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">text Field </code>, Click <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">pin </code> button, set left margin 0 and height 40, click <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">add 2 Constraints </code> <br> Height 40, condition One <br> left margin, condition two <br> implied, width is from the parent container to the left 20 of the search button, Condition One </li></li> </ul><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br>Set up<code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">text Field</code></code>Left margin<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; Font-family: ' Lucida Grande ', ' Lucida Sans unicode ', lucida,helvetica, ' Hiragino sans GB ', ' Microsoft yahei ', ' Wenquanyi Micro Hei ', sans-serif; line-height:27.2000007629395px "> Click <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">resolve Auto Layout issues </code> Select <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">selected views </code> under <code style=" padding:2px 4px; font-family:menlo,monaco,consolas, ' Courier New ', monospace; font-size:12px; Color:rgb (217,111,93); border:none; white-space:pre; Background-color:rgb (250,229,226) ">update Frame </code> </p></p><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"></p></p><br><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)"><code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Update Frame</code></code>Results<p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; line-height:27.2000007629395px">Modified <code style="padding:2px 4px; font-family:Menlo,Monaco,Consolas,‘Courier New‘,monospace; font-size:12px; color:rgb(217,111,93); border:none; white-space:pre; background-color:rgb(250,229,226)">Button</code> text for search even if it is finished ~</p></p><br><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; color:rgb(47,47,47); font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; font-size:16px; line-height:27.2000007629395px"><p style="margin-top:0px; margin-bottom:25px; text-align:justify; word-break:break-word; color:rgb(47,47,47); font-family:‘lucida grande‘,‘lucida sans unicode‘,lucida,helvetica,‘Hiragino Sans GB‘,‘Microsoft YaHei‘,‘WenQuanYi Micro Hei‘,sans-serif; font-size:16px; line-height:27.2000007629395px"></p></p> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>iOS Development AutoLayout Constraint</p></p></span>
