iOS界面布局之一——使用autoresizing進行動态布局

autoresizing是ios中傳統的界面自動布局方式，通過它，當父視圖frame變換時，子視圖會自動的做出相應的調整。

任何一個view都有autoresizingmask這個屬性，通過這個屬性可以設定目前view與其父視圖的相對關系。我們先來看uiviewautoresizing這個枚舉：

<a href="http://my.oschina.net/u/2340880/blog/423357#">?</a>

1

2

3

4

5

6

7

8

9

<code>typedef</code> <code>ns_options(nsuinteger, uiviewautoresizing) {</code>

<code>    </code><code>uiviewautoresizingnone                 = 0,</code><code>//預設</code>

<code>    </code><code>uiviewautoresizingflexibleleftmargin   = 1 &lt;&lt; 0,</code><code>//與父視圖右邊間距固定，左邊可變</code>

<code>    </code><code>uiviewautoresizingflexiblewidth        = 1 &lt;&lt; 1,</code><code>//視圖寬度可變</code>

<code>    </code><code>uiviewautoresizingflexiblerightmargin  = 1 &lt;&lt; 2,</code><code>//與父視圖左邊間距固定，右邊可變</code>

<code>    </code><code>uiviewautoresizingflexibletopmargin    = 1 &lt;&lt; 3,</code><code>//與父視圖下邊間距固定，上邊可變</code>

<code>    </code><code>uiviewautoresizingflexibleheight       = 1 &lt;&lt; 4,</code><code>//視圖高度可變</code>

<code>    </code><code>uiviewautoresizingflexiblebottommargin = 1 &lt;&lt; 5</code><code>//與父視圖上邊間距固定，下邊可變</code>

<code>};</code>

下面我們通過效果來看這些屬性的作用：

先建立兩個view，為了區分，設定不同的背景色：

10

<code>- (</code><code>void</code><code>)viewdidload {</code>

<code>    </code><code>[super viewdidload];</code>

<code>    </code><code>// do any additional setup after loading the view, typically from a nib.</code>

<code>    </code><code>uiview * view1 = [[uiview alloc]initwithframe:cgrectmake(20, 40, 200, 200)];</code>

<code>    </code><code>view1.backgroundcolor=[uicolor redcolor];</code>

<code>    </code><code>uiview * view2 = [[uiview alloc]initwithframe:cgrectmake(10, 10, 100, 100)];</code>

<code>    </code><code>view2.backgroundcolor=[uicolor greencolor];</code>

<code>    </code><code>[view1 addsubview:view2];</code>

<code>    </code><code>[self.view addsubview:view1];</code>

<code>}</code>

設定view2的自動布局屬性如下：

<code> </code><code>view2.autoresizingmask=uiviewautoresizingflexiblebottommargin;</code>

這時的效果如下：

改變view1的frame如下：

<code>uiview * view1 = [[uiview alloc]initwithframe:cgrectmake(20, 40, 300, 300)];</code>

效果如下：

這時view2的下邊距離相對父視圖是可變的。

設定如下：

<code>   </code><code>view2.autoresizingmask=uiviewautoresizingflexibleheight;</code>

可以看出，這時子視圖的高度是随父視圖變化而自動改變的。

如下設定：

<code>view2.autoresizingmask=uiviewautoresizingflexibleleftmargin;</code>

這時子視圖的左邊是随父視圖變化而可變的。

同理，uiviewautoresizingflexiblerightmargin将使子視圖右邊與父視圖的距離可變。

uiviewautoresizingflexibletopmargin将使子視圖上邊與父視圖距離可變。uiviewautoresizingflexiblewidth将使子視圖的寬度可變。

注意：這些自動布局的屬性是可以疊加的，比如保持視圖與父視圖邊距不變，如下設定：

<code>view2.autoresizingmask=uiviewautoresizingflexiblewidth|uiviewautoresizingflexibleheight;</code>

在storyboard中我們可以更加輕松的進行autoresizing自動布局。在view設定欄中有autoresizing這個設定，點中相應的箭頭，就是剛才我們探讨的設定選項。并且我們把滑鼠放在這個上面的時候，右側會自動為我們預覽效果。

如果你覺得autoresizing很強大，那麼你就太容易滿足了，autoresizing可以滿足大部分簡單的自動布局需求，可是它有一個緻命的缺陷，它隻能設定子視圖相對于父視圖的變化，卻不能精确這個變化的度是多少，是以對于複雜的精準的布局需求，它就力不從心了。但是有一個好消息告訴你，ios6之後的autolayout自動布局方案，正是解決複雜布局的好幫手，我們在下一遍部落格中再進行詳細讨論。