天天看點

初識Auto Layout和Size Classes

之前一直沒有接觸過Auto Layout,本人自從工作以後一直純代碼完成項目,很少用到StoryBoard和XIB了.自從Apple釋出了iPhone 6和iPhone 6 plus,要完美适配螢幕,就必須接觸Auto Layout了,StoryBoard看來也是要學習一下怎麼使用了。最近不是特别忙,就看了一下蘋果官方的Auto Layout的介紹文檔。至于Auto Layout的詳細教程,個人覺得這篇文章開始iOS 7中自動布局教程(一)介紹的蠻詳細的了,很适合沒有接觸過Auto Layout的人學習一下。下面是我自己看了蘋果的官方文檔後的一點筆記,後面在實際項目中使用Auto Layout後有深入的體會了再另開博文記錄。

一、Auto Layout

Auto Layout是一個讓你可以通過建立一個界面元素之間數學上的關系描述來進行app界面布局的系統。你可以定義單獨元素或者元素之間的這種限制關系描述。利用自動布局,你可以建立針對不同螢幕尺寸、不同螢幕方向和不同地區的動态多變的使用者界面。

限制是自動布局的最基本的構模組化塊。限制表達了元素在你的視圖中的布局規則。比如,你可以建立一個限制來規定一個元素的寬度或者它在水準方向上與另一個元素的距離。你可以添加或者移除限制,或者修改限制的屬性來影響界面的布局效果。當計算界面元素的運作時的位置時,自動布局系統會考慮全部限制并且以最好的方式滿足所有的限制。

1.限制的基礎知識

你可以認為限制是人類可描述語言的一種數學描述。如果你頂一個按鈕的位置,比如你會說“讓按鈕的左邊距離它父視圖左邊的距離為20像素。”更正式一點,它将被翻譯為“button.left = container.left + 20”,反過來,就是表達式 y =m*x = b(其中,y和x是視圖的屬性,m和b是浮點數。)

限制有這些屬性left, right, top, bottom, leading, trailing, width, height, centerX,centerY, and baseline.

選中一個限制,可以看到類似這樣的屬性:(注意左邊的加号。預設限制是加載Size Class為Width Any,Height Any模式下的,點選加号可以添加其他Size Class模式下的限制。Size Class後面介紹。)

初識Auto Layout和Size Classes
初識Auto Layout和Size Classes

其中leading和trailing在從左到右的語言(比如英文)中相當于left和right.在從右到左的語言中相當于right和left。在建立限制的時候,leading和trailing有它們的預設值,你在使用它們的時候應該要保證你的界面可以在不同語言環境下布局良好。

Constant :實體尺寸或者偏移量。

Relation : 視圖元素之間的關系,可取:lessthan or equal、equal、greater than or equal。比如view’s width >= 20, or even that textview.leading >=(superview.leading + 20)。

Priority : 限制的級别,預設1000,級别高的限制會比級别低的限制先被滿足。預設級别是required,意思是限制必須被準确的滿足。

Multiplier : 乘數,預設1.0,也就是Constant的倍數。

Placeholder : 預設是不勾選的。是針對那些運作時才知道自己尺寸的元素,需要設定placeholder限制,如果限制屬于Placeholder,記得勾選上這一項,實際運作的時候限制會被移除。當一個元素包含了placeholder限制,選擇該視圖元素,可以在這裡

初識Auto Layout和Size Classes

将Intrinsic Size由Default改為Placeholder,再設定視圖在布局設計的時候的大小。下面的解釋很清楚,視圖在運作時并不擁有這個尺寸,隻是為了友善布局設計。

初識Auto Layout和Size Classes

Installed : 預設是勾選的,對限制來說,即限制是否在目前Size Class尺寸下有效。對子視圖來說,即子視圖在目前Size Class尺寸下是否可見。

使用限制,可以利用Interface Builder或者利用VFL代碼寫。之前在想以後要不要堅持純代碼完成項目,現在感覺還是利用Interface Builder比較友善快捷,利用VFL的話太複雜不說,還要寫大量的布局代碼,不好了解,更不好維護。

在Interface Builder中添加限制,有三種方式:一是選中視圖元素,按住Ctr在某個方向上拖動或者拖動到另一個視圖;二是選中某個視圖或者某兩個視圖選擇Editor->選擇Pin下面可用的限制類型;三是裡面StoryBoard右下角的四個快捷按鈕。Xcode提供了很強大的限制編輯功能,如果存在不明确或者沖突的限制,會看到有紅色或者黃色圓點,點選會彈出提示哪裡的限制有問題。還有其他友善的功能,這個需要在具體使用中去體會。

2.使用限制需要注意幾點:

1.限制是累加的,并不會一個限制覆寫另外一個限制。如果你已經有了一個限制,你又加了一個跟這個限制一樣類型的限制,并不會覆寫之前的限制。比如,再加一個限制寬度的限制并不會删除或者修改之前的限制寬度的限制。

2.如果一個視圖體系中,包含了一個視圖,并且會在實作方法(比如UIView的layoutSubviews或者NSView的layout方法)中會手動修改子視圖的位置和大小。那麼你就不能讓一個限制橫穿這種視圖體系。如果一個比如UIScrollView,bounds會轉變的視圖,你也不可設定一個限制橫穿這種視圖。你可以認為那種視圖是一種障礙物,障礙物裡面的世界和外面的世界是不通的。(不知道翻譯的對不對,這個要在以後的使用過程中感悟才會了解的更深,後期再做修改。)

3.限制一旦加上去,不能再修改它的類型,比如一個限制寬度的限制,不能修改為限制高度的限制。

4.限制必須加在被限制的元素的共同的最近的父視圖上面。

二、Size Classes

我們知道了利用Auto Layout可以進行界面元素的布局。假如不同尺寸的螢幕界面差異很大,怎麼區分呢,之前我們可以建立不同的XIB來跟不同尺寸的螢幕對應起來。現在的StoryBoard中加入了Size Class,對于寬度和高度而言,都有三種情況:緊湊 (Compact) 、任意 (Any) 、 正常 (Regular) ,是以一共有9個類别,在設定 Size Class 的時候頁面會有提示。比如寬為 Compact 高為 Any 的情況,提示為 3.5-inch、4-inch、4.7-inch的橫豎狀态下的螢幕。是以說現在的StoryBoard是可以控制所有螢幕尺寸的StoryBoard了,非常強大。Size Class 的作用是将不同尺寸的螢幕進行分類處理,而最後進行布局管理的還是Auto Layout。當然,Size Class是依賴于Auto Layout的,這兩者一般在項目中都是同時勾選上的。

看了蘋果官網https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewIniOS/Articles/iOS8.html#//apple_ref/doc/uid/TP40014205-SW30 對Regular的解釋:A regular size class denotes either a large amount of screen space, such as on an iPad, or a commonly adopted paradigm that provides the illusion of a large amount of screen space, such as scrolling on an iPhone. Every device is defined by a size class, both vertically and horizontally.大概意思就是說Regular尺寸是指要麼像iPad那樣有較大的螢幕空間,要麼像iPhone上面的ScrollView提供了較大的螢幕空間。

感覺這種解釋還是不太清楚,自己也不太清楚蘋果到底是怎麼區分這三者的,隻能在Xcode中布局的時候在最下面選擇不同的Size Class,會有提示是适合什麼尺寸螢幕的。等以後有一定了解之後再做介紹吧。

利用Size Class我們可以對不同螢幕的界面進行設計。然後利用Auto Layout來對不同尺寸下的界面進行自動布局。

具體怎麼使用,這裡就不再贅述了,可以參考這裡一篇介紹Size Class的詳細教程:[iOS] 初探 iOS8 中的 Size Class 這位部落客堪稱大神啊,看了他的部落格目錄,瞬間感覺自己弱爆了,慚愧萬分,自己要努力向大神們學習。另外這一篇文章寫得也非常詳細:為iPhone 6設計自适應布局

三、總結

Size Class用來區分不同的螢幕尺寸,Auto Layout用來對不同尺寸進行界面布局。确實比代碼适配友善很多,不過初學起來,還是有很多細節要注意的。以後打算不再純代碼寫了,既然蘋果極力推薦大家使用SB、AL和Size Class,自己也該學習學習怎麼掌握它們了。隻有在實際項目中使用它,才可以發現自己掌握的有哪些不足,以及有哪些使用技巧,後期再單獨開篇介紹。

下面是一個朋友整理的Auto Layout和Size Class學習資源:

sizeClass和autolayout學習資源整理

今天又發現一篇不錯的博文:iOS 8 AutoLayout與Size Class自悟