剛剛學習了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有關,就是你滿足了原則但是黃色的警告一直會存在,也不知道究竟是什麼原因,但是可以按照連接配接:http://www.lanou3g.com/bbs/forum.php?mod=viewthread&tid=5193
的這種做法去設計,警告就沒有了,估計是邊界上有什麼約定之類的.
後來關于scrollview的問題還是出現了,表現為scrollview裡面明明沒有黃色的警告但是還是不能滾動的問題.
首先可以參照部落格:http://blog.csdn.net/kmyhy/article/details/41846027
結合上面兩個關于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上面的按鈕上面,造成了一個如此奇葩的現象.