xcode6 使用layout自動布局

2021-06-28 15:51:59 字數 4342 閱讀 6336

剛剛學習了xcode6的自動布局,發現網上的教程有很多,寫的也很詳細,但還是感覺很複雜,自己實現不了這個效果.但是最終還是嘗試出了一些方法,並且能夠實現較為固定的xib布局,可以作為layout的入門級別的吧.其實layout看上去很複雜,但是明白了最基本的原理之後就會變的清晰很多.

layout中的約束:

(固定值)

top spacing :檢視距離父檢視頂部保持乙個固定的距離

bottom spacing:檢視距離父檢視底部保持乙個固定的距離

trailing spacing:檢視距離父檢視右邊保持乙個固定的距離

leading spacing:檢視距離父檢視左邊保持乙個固定的距離

left:兩個檢視的左邊界相等

right:兩個檢視的右邊界相等

top:兩個檢視的上邊界相等

bottom:兩個檢視的底邊界相等

width:檢視自身的寬度是乙個固定的值

height:檢視自身的高度是乙個固定的值

center vertically:檢視與父檢視保持垂直方向的固定

center horizontally:檢視與父檢視保持水平方向的固定

(固定比例)

equal widths:兩個同級檢視保持相同的寬

equal heights:兩個同級檢視保持相同的高

aspect ratio:檢視自身保持固定的寬高比

以上就是xib中最常用的約束,

布局的狀態:

1.布局約束不足.(檢視的位置不能唯一的確定)

我們只給乙個檢視新增bottom spacing約束.現在處於的就是約束不足的狀態.

也就是其他的狀態都是未確定.

2.約束充足的狀態(檢視的位置能夠唯一的確定)

再為檢視新增leading,trailing spacing,aspect

先是通過三個固定值的約束固定了檢視的位置,這時只有上面沒有約束,並且檢視會因為尺寸的改變而在橫向拉伸,新增保持比例的約束之後,檢視的形狀保持不變,這樣無論在**顯示效果都是唯一個.這裡說明aspect實在所有的檢視效果生效後才起作用.也就是如果其他的約束限定了寬高.那麼他就不起作用了.我們讓乙個檢視的約束變得充足大都是需要4個方向的約束.

3.約束衝突(檢視的位置在固定值約束上有衝突)

如果我們在為檢視新增乙個約束width,這時約束就會發生衝突,使所有的約束失效.約束衝突是由於固定值的約束引起的,因為leading tailing 和width這三個就會固定住父檢視的寬,也就是不能夠在拉伸了.我們可以把固定值約束想象成磚頭,把比例約束想象成(可以保持自身和其他同級檢視的)水泥,這樣能夠讓我們更形象的布局.

所以我們利用約束實現布局的時候,就要避免會發生約束衝突.layout實現的效果就是子檢視之間保持固定的間隙,檢視本身做等比例的收放.

這裡有乙個方法可以讓我們快速的上手約束是怎樣的布置的.

首先我們先建立一些檢視並且為他們標記上顏色,注意這些檢視的擺放要和一些專案中的差不多.

然後採用點下面有乙個新增建議約束,按鈕為當前的檢視新增上約束.

然後我解釋一下這些建議的約束大致是乙個什麼情況首先由最外面的幾個檢視

他們由上到下垂直方向上加的都是固定值得約束,而且這些固定值的約束往往會讓上面的檢視高度不變,而最後乙個檢視的高度被拉伸.如果我們要實現的效果是垂直方向的尺寸不改變,這樣的約束就很適合我們.(我們只需要將最下面檢視的約束,修改一下,去掉底部space加上height約束),注意只關注三個大view的垂直方向.

top spacing :檢視距離父檢視頂部保持乙個固定的距離

bottom spacing:檢視距離父檢視底部保持乙個

固定的距離

水平方向的對其,如果xocde發現兩個檢視的(上,下,左,右)位置相同就會新增

left:兩個檢視的左邊界相等

right:兩個檢視的右邊界相等

top:兩個檢視的上邊界相等

bottom:兩個檢視的底邊界

相等的約束

然後在用第乙個大檢視新增

trailing spacing:檢視距離父檢視右邊保持乙個固定的距離

leading spacing:檢視距離父檢視左邊保持乙個固定的距離

這樣我們的外面檢視的布局就弄好了,他的思路其實是先固定第乙個檢視的位置然後在根據他以此建立其他檢視的位置,這也是建立檢視的乙個思路

檢視內部的布局和外面的遠離差不多,只不過xcode會根據檢視的種類新增不同的約束,例如uilabel他往往會給乙個height的約束.uiimage新增乙個witdh

而且建議的布局也是會讓乙個檢視的寬度拉伸,這裡的建議是根據自己的需求,然後調整一下看看是拉伸那乙個或者是那幾個

equal widths:兩個同級檢視保持相同的寬

equal heights:兩個同級檢視保持相同的高

如果有兩個以上的檢視要拉伸,要根據他們自身的款高比設定他們的係數.

center vertically:檢視與父檢視保持垂直方向的固定

center horizontally:檢視與父檢視保持水平方向的固定

這兩個約束的效果,是已檢視的中心向兩邊各拉伸一半的距離.配合上

equal widths:兩個同級檢視保持相同的寬

equal heights:兩個同級檢視保持相同的高

就能唯一確定乙個方向的約束了

所以自己看看建議的布局是怎樣的,就能夠很好的理解,並且能夠根據自己的需求新增約束到底那個需要拉伸,那個需要保持原來的距離.

但是相對布局和純**布局比起來也是有侷限的,他不能隨意的擺放view的位置.但是他可以較為直觀的看到布局而且不用新增子view.

如果你看懂了他的布局,並且按照一定的模式做了,發現布局的時候還是不起作用,這有可能是因為布局的的尺寸有問題,可以嘗試調整一下子檢視的邊界離開父檢視一定的距離,左邊的檢視離開右邊的檢視一定的距離.而且在布局的時候我們一定優先找到乙個切入點,優先固定位置,並作為其他檢視的切入點,而且確保檢視的約束沒有黃色了再去確定其他的檢視,而且所有的布局好的約束都可以再作為基準點,另外之前也有提到一些簡化約束的方法,例如

left:兩個檢視的左邊界相等

right:兩個檢視的右邊界相等

top:兩個檢視的上邊界相等

bottom:兩個檢視的底邊界

相等這些約束的使用,所以如果我們想要使用自動布局就要我們在布局的時候盡量使用方便布局的空間位置和大小,也就是一開始布局就要想到我們怎樣去布局.

還有一種比較蛋疼的警告和scrollview有關,就是你滿足了原則但是黃色的警告一直會存在,也不知道究竟是什麼原因,但是可以按照連線:

的這種做法去設計,警告就沒有了,估計是邊界上有什麼約定之類的.

後來關於scrollview的問題還是出現了,表現為scrollview裡面明明沒有黃色的警告但是還是不能滾動的問題.

首先可以參照部落格:

結合上面兩個關於scrollview的部落格我們可以知道,scrollview的尺寸是和內部的檢視相關的,所以我們要做的是

1.建立乙個尺寸固定的子view

width:檢視自身的寬度是乙個固定的值

height:檢視自身的高度是乙個固定的值

然後把他們的約束拉到控制器中去(方便我們的修改)

2.把子檢視和俯檢視的

top spacing :檢視距離父檢視頂部保持乙個固定的距離

bottom spacing:檢視距離父檢視底部保持乙個固定的距離

trailing spacing:檢視距離父檢視右邊保持乙個固定的距離

leading spacing:檢視距離父檢視左邊保持乙個固定的距離

屬性都設定成0

這樣做的目的,不是讓view適應scrollview,而是讓scrollview的contentsize根據view來計算,這就是scrollview和其他布局不同的地方(scrollview 的contentsize是根據子檢視來計算的,當然scroll的frame的遠離和普通的布局一樣).

3.這樣的布局完成之後,我們就可以把這個把這兩個操作等效為為scrollview新增了乙個contentsize的檢視,檢視內部的布局是普通布局型別.

updateframe這個約束其實時和我們的約束直接掛鉤的,(它的作用是反應在當前的螢幕尺寸上我們這樣的約束回事乙個什麼效果),所以我們不必害怕他會影響我們的布局,她只是布局的真實反應,所以放心的點吧.

自動布局是實時布局的:頁面上每一點改變都會遵循寫好的布局,布局在時刻發生著作用.

結合我的乙個錯誤說明:我有乙個按鈕在控制器檢視的最上面,下面有乙個scrollview,scrollview裡面有一些子控制項,然後我實現了scrollview的滾動(可以看到scrollview的條子在動),但是scorllview裡面的內容紋絲不動,產生這個現象的原因是因為我不小心把scrollview裡面最頂上的view的

top spacing :檢視距離父檢視頂部保持乙個固定的距離

約束,加到了scrollview上面的按鈕上面,造成了乙個如此奇葩的現象.

Xcode6中新增pch檔案

1.新建工程 2 建立pch檔案 3 修改pch檔案,import 需要的標頭檔案 4 在setting中進行設定 5 pch標頭檔案的內容能被專案中的其他所有源檔案共享和訪問。pch檔案的作用 1.存放一些全域性的巨集 整個專案中都用得上的巨集 2.用來包含一些全部的標頭檔案 整個專案中都用得上的...

xcode6模擬器路徑

1 xcode6模擬器路徑的變更 在xcode6中,將模擬器的位置進行了變更,位址如下 users username library developer coresimulator,開啟後會發現如下情況 在這裡,蘋果對模擬器進行了編碼處理,並不是以模擬器系統版本進行的命名和分類,而是對xcode6中...

xcode6中新增pch檔案

一直在用xcode6開發,但專案都是在xcode5上建立的,所以一直沒注意到,xcode6竟然乾掉pch檔案了。簡單地看 我們在寫專案的時候,大部分巨集定義,標頭檔案匯入都在這裡,xcode6去掉precompile prefix header的主要原因可能在於prefix header大大的增加了...