講SizeClass之前,先講Layout,因為SizeClass 本質上就是AutoLayout的升級版。
AutoLayout到底是什麼?其實就是個約束布局,有點像Android的relativelayout,想想用代碼寫個UILabel怎麼寫?
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 460, 200, 200)];
[self.view addSubview:label];
有沒有想過CGRect為什麼要這麼寫?很簡單,因為你確定一個控件的位置,肯定要坐標,就是frame.origin,有了坐標就確定了這個控件的左上角的位置,(x1,y1),那麼有了寬和高,系統就能自己計算出右上角(x2,y2),左下角(x3,y3),和右下角的位置(x4,y4)。有了這四個點,系統就能繪制出一個矩形了(要知道原生的控件都是矩形的)。
其實AutoLayout本質上就是用各種條件來告訴系統這四個點的位置。用autolayout就不用frame了。
廢話不多說,開始學習。
1.打開XCode,建一個Single View Controller項目,就是帶storyboard的那種。
2.打開storyboard,在唯一的一個窗口拖一個UILabel上去。然後選中。
3.點擊右下角如圖所示的第二個小button.就出現了圖中右下角的選擇框.
最簡單的UILabel約束咱們現在只看帶4條紅虛線的那個框,下面寫著“Spacing to nearest neighbor”,相信大家都看得懂,意思就是離自己最近的鄰居控件的間距。
那現在這個界面上什麼控件都沒有,那最近的鄰居自然就是self.view了。
我們選中左邊的那條虛線,和上邊的那條虛線。現在虛線就會變成實線,表示已經處於選中狀態了。
這時候注意看左上角,是不是有個黃色的小箭頭,咱們點進去看看。
應該是下面這兩張圖。
大家不要害怕,這不是表示我們添加的這兩個約束錯誤了,其實意思是我們添加的約束在運行後顯示的大小和我們在storyboard上設置的大小不相符。因為ios在程序運行時會自動把label的高和寬和label.text相匹配。所以你的內容是“哈哈”,但是我拉的這個label的size明顯比內容大多了。所以你現在點一下黃色的三角,選擇update frame,storyboard會自動調整控件的大小。你這時候返回去看,是不是控件大小正合適了。 如下圖:
修改後的效果現在你最後運行一下這個程序,在模擬器裡看看效果。
現在你可能有這麼幾個問題。
1.我剛才拉的左邊和右邊的那兩個線到底干嘛用的?
2.為什麼在模擬器顯示的label距離左邊的間距好像要大一些。
現在解釋,其實你拉的兩條線,就是label的origin,也就是label的(x,y),你想想,label距離self.view的左邊距離和上邊距離不就是距離X軸,Y軸的距離嗎。那麼問題又來了。
你上面說系統要確定一個控件的四個點才能真正確定這個控件的位置,你現在只是有了label的x,y並沒有label的width和height,系統怎麼就沒提示錯誤(系統如果發現你添加的約束有錯誤,那麼就不是黃色小箭頭了,而是紅色小箭頭)。
其實是這樣的,我一開始也有點困惑,總感覺不設置固定長度和固定寬度怎麼就沒問題呢?主要是label這個控件有點特殊,因為storyboard會根據label的內容自動調整label的寬高,所以實際上系統是可以根據你內容知道label寬高的,那麼相應的,就不需要你提供了,你只需要提高X,Y兩個數值就可以了。
但是你因為某些需求就是想要設置固定高度和固定寬度怎麼辦?看下圖:
如果我就希望label有固定高度和寬度,也是可以設置的。只需要選中label,調出剛才的那個添加約束窗口,在width和height裡填入你想要的高度和寬度就行了。
你也可以試試光填大小不填位置約束系統會不會匯報約束錯誤(就是出現紅色小箭頭警告)。
其實類似於label這種只需要位置就可以的控件還真不少,像uibutton,uiimageview也可以。你可以多拖幾個控件自己試試。
剛才的第二個問題,為什麼運行起來好像距離左邊的距離比我剛才添加的約束要長?現在我添加的約束是距離self.view左邊39,上邊19.
為了驗證我的想法,我決定把左邊的約束改成0,看看到底怎麼回事。 怎麼修改已經添加的約束呢?選中我們的label,然後看這裡
現在我們把39改成0.
運行。
哎,我去什麼情況啊。我都改成0了怎麼label距離左邊還是有間距呢?其實這是xcode6新出得特性,在對self.view添加左右間距的約束的時候,系統會默認在你添加的數值上添加16px,所以你的空間總是沒法貼邊。但是這種情況只在你對self.view添加左右間距的時候才有.怎麼改呢?
先刪掉我們添加的約束
找到我們添加的約束,按delete鍵,刪掉。
然後再回到增加約束的小窗口。
把那個"constraints to margins"的框勾掉。這時候再在左邊距離添加0.
運行,搞定!
那麼先說這麼多,看完這篇你應該掌握了這麼幾個知識。
1.知道了怎麼添加位置約束。
2.知道了怎麼添加大小約束。
3.知道了某些控件只需要知道位置約束系統就可以自動添加。
別著急,autolayout的強大還在後面呢。