天天看點

iOS 8 AutoLayOut入門

 iOS 8 AutoLayOut入門

自從iOS6帶來 Auto Layout這個特性以來,使用者界面的布局便變得簡單起來。iOS8更是做的更好

本文主要針對初學者分享一下自己最近學習AutoLayout的心得體會。Let’s Start!

首先,什麼是AutoLayout?

簡單來說,就是自動布局,當你旋轉螢幕或者縮放你的UI來适應不同大小的螢幕等,程式的視圖看起來依然很nice,你通過可以在IB中增加或者編輯限制(constraints)來實作。

啟用AutoLayout,可以直接在 Main.storyboard勾選AutoLayout

iOS 8 AutoLayOut入門

2.通過一個程式來認識Autolayout的一些操作和特性

首先在storyboard中拖入三個 UIButton建立如下的方塊,豎屏下顯示

iOS 8 AutoLayOut入門

(注意:Xcode6中,如果直接拖入UIView不增加constraint,當你拖入下一個UIView會直接導緻前一個的長寬都為零,是以當拖入一個UIview必須設定為reset to suggested constrains)

不做任何的改變,橫屏下

iOS 8 AutoLayOut入門

但是實際上,你想得到的是下面的效果

iOS 8 AutoLayOut入門

3.怎麼做呢

選中兩個Button,按住⌘,然後在Editor 菜單中,選擇Pin\Widths Equally

iOS 8 AutoLayOut入門

同樣地,選擇Editor\Pin\Horizontal Spacing.

Tips:當然你也可以通過選中一個Button然後按住control拖到另一個Button,在菜單中選擇這些。

接下來,對于這三個View分别應用:

左側:    Top Space to Superview

                Leading Space to Superview

右側: Top Space to Superview

            Trailing Space to Superview

下部: Leading Space to Superview

            Trailing Space to Superview

             Bottom Space to Superview

iOS 8 AutoLayOut入門

此時,“T”型的constraint還是橘黃色的,表示欠限制。

iOS 8 AutoLayOut入門

當然,從左側的Document Outline也可以看到有一個紅色的箭頭,表示欠限制。

接下來選中三個View,添加Heights Equally。

iOS 8 AutoLayOut入門

此時,運作,ok搞定!

iOS 8 AutoLayOut入門

4.下面介紹幾個常見的問題:

有些時候,我們運作程式會得到提示Unable to simultaneously satisfy constraints,表示constraints沖突,也就是過限制。一般來說,一個試圖四個限制就夠了,多了肯定得移去,不貴再多,恰到好處方好。

intrinsic content size(固有尺寸):

當我們拖入一個Button的時候會發現,button的大小是确定的。為什麼呢?這是因為它可以根據文字和背景自動計算它的大小,想要改變它的大小可以通過移除Width constraint,再設定自己偏好的大小。如果想取消,隻需要選擇Editor \Size to Fit Content.

Hugging priority (擁抱優先級)确定view有多大的優先級阻止自己變大。

其實content Hugging就是要維持目前view在它的intrinsic content size,可以想象成給view添加了一個額外的width constraint,此constraint試圖保持view的size不讓其變大。

Compression Resistance priority(壓縮阻抗優先級)确定有多大的優先級阻止自己變小。

Content Compression Resistance就是要維持目前view在他的optimal size(intrinsic content size),可以想象成給view添加了一個額外的width constraint,此constraint試圖保持view的size不讓其變小。

這兩個概念很抽象,自己在程式裡設定一下,運作幾次就清楚了!

此外還有其他的一些屬性,需要自己去檢視幫助文檔了。好了啰嗦這麼多,邏輯性也不強,很雜,歡迎大家批評指正。

繼續閱讀