天天看點

iOS 8 SizeClass同Auto Layout的使用

在螢幕越來越多的蘋果圈裡,就算單單是做手機應用,在螢幕尺寸的判斷上也不再是一個if就能解決的問題。在iOS8上apple新出了sizeClass這一功能配合以前的Autolayout使用,完美的解決了螢幕适配的問題。

SizeClass将螢幕的寬度和高度都抽象為三種情況:緊湊 (Compact) 、任意 (Any) 、 正常 (Regular),兩兩組合下,一共有9種類别,是以SizeClass看起來就像一個可以随意切換螢幕的九宮格,在設定 Size Class 的時候頁面會提示目前界面适配哪種螢幕。這樣把各種尺寸的界面放在一個Storyboard中,我們在為各種螢幕做适配工作的時候就可以在一個檔案中完成,然後根據不同裝置螢幕大小的不同進行調整。

建立一個項目,裝置選擇Universal,預設的都是啟用了SizeClass 和Autolayout ,Storyboard的預設尺寸寬高均為 Any:

iOS 8 SizeClass同Auto Layout的使用

在(w:Any | h: Any)下添加一個按鈕到Storyboard上:

iOS 8 SizeClass同Auto Layout的使用

SizeClass的作用是将不同尺寸的螢幕抽象出來進行分類處理,後面進行布局管理的還是Autolayout,接下來開始向按鈕添加限制,點選右鍵選中按鈕,向上拖(control鍵+左鍵向上拖也可以達到這個效果),選擇“Top Space to Top Layout Guide”限制按鈕距離螢幕頂部的距離,确定按鈕的Y

iOS 8 SizeClass同Auto Layout的使用

添加第一個限制後,左邊視圖出現一個紅色剪頭提示:

iOS 8 SizeClass同Auto Layout的使用

點進去,系統提示X也需要限制

iOS 8 SizeClass同Auto Layout的使用

右鍵選中按鈕向左拖動(或者control鍵+左鍵向左拖)選擇"Leading Space to Container Margin”,确定按鈕的X:

iOS 8 SizeClass同Auto Layout的使用

這時左上角的紅色錯誤已經消失,剩下一個警告,提示預期的按鈕大小和實際按鈕大小不一緻:

iOS 8 SizeClass同Auto Layout的使用

右鍵選中按鈕,拖動到自己會出現下圖,選擇width和height固定按鈕的寬高:

iOS 8 SizeClass同Auto Layout的使用

或者點選下方的按鈕,将width和height都勾上,然後點選 add 2 constraints:

iOS 8 SizeClass同Auto Layout的使用

這樣下來對這個按鈕的限制就完成了,左上角的警告也消除,點選按鈕,可以在右邊看到按鈕上的限制并修改限制值:

iOS 8 SizeClass同Auto Layout的使用

随意選中一個限制,可以在右邊去掉Installed前面的√,點選加号從sizeClass的9中界面類型中選擇在哪種類型的界面隐藏或顯示此限制:

iOS 8 SizeClass同Auto Layout的使用

剛剛都是在單獨的講解SizeClass和AutoLayout,現在将它們聯合起來進行螢幕适配,打開九宮格,選擇iPhone屏(w:Compact | h:Any):

iOS 8 SizeClass同Auto Layout的使用

在上面放幾個label:

iOS 8 SizeClass同Auto Layout的使用

接下來将螢幕切換到iPad(w:Regular | h:Regular),可以看到在iPad界面工作時,iPhone界面下拖的label是灰色的,表示不可用。

iOS 8 SizeClass同Auto Layout的使用

接下來就讓程式在iphong和iPad上分别跑起來:

iOS 8 SizeClass同Auto Layout的使用
iOS 8 SizeClass同Auto Layout的使用

如果有童鞋建立的項目隻選擇了iPhone的話,那麼不論你在iPad屏上怎麼設定模拟器上顯示出來的都是在iPhone上設計的樣式(血淚教訓,當時還認為自己環境有問題)依照這個功能,我們就能在iPhone和iPad上充分利用螢幕的特性設計UI了。

想要删除某個螢幕上的限制用 command+delete鍵删除,這樣就隻是在iPhone屏上删除掉此限制,顯示為灰色,表示不可用其他尺寸不受影響。

選擇iphone屏,在上面建立一個按鈕:

iOS 8 SizeClass同Auto Layout的使用

右鍵選中黃色按鈕拖動到紅色按鈕,選擇Horizontal Spacing(設定黃色按鈕到紅色按鈕的橫向間距)确定X:

iOS 8 SizeClass同Auto Layout的使用

點開左邊的錯誤,提示Y也需要限制:

iOS 8 SizeClass同Auto Layout的使用

右鍵向上拖動按鈕,選擇“Top Space to Top Layout Guide”,确定Y:

iOS 8 SizeClass同Auto Layout的使用

現在又剩下一個警告,提示預期的按鈕大小和實際按鈕大小不一緻,這次我們把黃色按鈕的大小限制設定到紅色按鈕上去,讓它們一樣大小:

iOS 8 SizeClass同Auto Layout的使用

右鍵拖動到紅色按鈕,選擇寬,高相等:

iOS 8 SizeClass同Auto Layout的使用

點開左邊的警告,選擇update frame,更新架構:

iOS 8 SizeClass同Auto Layout的使用

更新後的界面應該是這個樣子的:

iOS 8 SizeClass同Auto Layout的使用

和想象中有點不一樣,黃色按鈕低了一點,在右邊修改黃色按鈕到頂部的長度和紅色按鈕一樣:

iOS 8 SizeClass同Auto Layout的使用

這下就沒問題了:

iOS 8 SizeClass同Auto Layout的使用

大小除了寬高相等之外,還可以在設定中按比例設定兩個按鈕的寬高(可自定義輸入比例):

iOS 8 SizeClass同Auto Layout的使用

對于有特殊需求的還可以選擇”Aspect Ration“設定兩個按鈕寬和高的比例進行大小設定:

iOS 8 SizeClass同Auto Layout的使用
iOS 8 SizeClass同Auto Layout的使用

當然,如果要進行寬高比例進行大小限制,前面設定的大小限制就要删除掉,不然會造成限制沖突,總之,限制就是為了确定一個控件在螢幕上的唯一位置,确定X,Y,然後賦大小。

因為自己也是學了之後沒有進行項目就寫的這篇部落格,可能大家看着會感覺很混亂,沒水準,有錯誤,但也是自己對這個知識點的一個了解了,希望能讓大家有所收獲,提出錯誤和不足之處。