iOS開發之autoLayout constraint

標籤：

前言

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

約定

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

基礎

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

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

思路

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

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

編譯結果

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

需求

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

豎屏

旋轉屏實現步驟

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

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

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

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

  
  Update Frame

• 5、現在同時選中Button和text Field,點擊Align 按鈕，勾選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 按鈕，設定左邊距0和高度40，點擊 Add 2 Constraints
  高度40，條件一
  左邊距，條件二
  隱含的，寬度是從父容器到搜尋按鈕的左邊20的位置，條件一

設定 text Field左邊距

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

Update Frame結果

修改Button的文字為搜尋就算完成啦~

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

iOS開發之autoLayout constraint