iOS開發之autoLayout constraint

標籤：編譯   長度   mon   strong   alt   upload   load   line   center   

前言

ios裝置的尺寸越來越多，針對一款app可能要適配到多種裝置。多種尺寸。所以。我們期望我們的app可以autoLayout。本文主要介紹在Xcode中使用constraint。未來會不定期對此文進行更新。

約定

本文中view指代從Objuect Library中拖拽出來的各種view

基礎

一個view在介面顯示，至少有三種決定條件

• 一、自身大小：如width、height
• 二、相對於父容器的位置：如固定起始座標位置或相對位置
• 三、相對於兄弟view的位置：如頂部對齊、左右距離、堆疊層次

思路

在storyboard中，拖拽出來的view都有預設的樣式，在拖動的過程中會有藍色的輔助線，協助我們布局。可是位置大小等都是固定的，我們須要給每一個view設定constraint，告訴它在不同的情況下應該怎樣表現。

輔助線
編譯執行 Label並沒有垂直水平置中

編譯結果

布局的過程，就是確定view的水平位置、垂直位置以及相對位置

需求

一種常見的情況：一個搜尋方塊，一個搜尋button
搜尋方塊：長度要隨著介面變化進行伸縮。與確定button間距20，距離左邊0。頂部10，高40
確定button：頂部10，右邊0，與搜尋方塊間距20，寬50。高40
先來看下終於效果

豎屏

旋轉屏實現步驟

• 1、拖拽一個text Field,一個Button到storyboard
• 2、注意storyboard底部的button
  
  constraintbutton
  三個button各自是
  Align : 主要用來進行兄弟view對齊
  Pin ：自身大小、相對容器位置
  Resolve auto layout issues ：應用constraint後更新storyboard

• 3、選中Button ，點擊Pinbutton，上邊距10，分別設定左邊距20，右邊距0，高度40，寬度50(button的寬度基本是固定的)
  寬度和高度都是描寫敘述自身大小，條件一
  上邊距和右邊距都是相對父容器，條件二
  左邊距是相對於兄弟view的位置，條件三
  

  
  Button constraint
  點擊 Add 5 Constraints
  結果就變成下邊的樣子了
  
  結果

• 4、這個時候，我們點擊Resolve auto layout issues ，並選擇Selected Views下的Update Frame
  

  
  Update Frame

• 5、如今同一時候選中Button和text Field,點擊Align button。勾選Top Edges，從icon上我們就能夠看出來，是頂部對齊的意思
  頂部是相對於兄弟view的位置。條件三。
  同一時候。隱含的text Field相對父容器頂部的位置和Button一樣，條件二

Top Edges

點擊 Add 1 Constraints

Add 1 Constraints

點擊Resolve auto layout issues ，選擇Selected Views下的Update Frame

Update Frame

• 6、如今選中text Field,點擊Pin button。設定左邊距0和高度40。點擊 Add 2 Constraints
  高度40。條件一
  左邊距，條件二
  隱含的，寬度是從父容器到搜尋button的左邊20的位置，條件一

設定 text Field左邊距

點擊Resolve auto layout issues ，選擇Selected Views下的Update Frame

Update Frame結果

改動Button的文字為搜尋就算完畢啦~

iOS開發之autoLayout constraint