在Xcode7中,如果你注意的話,在菜單欄中Editor下拉列表中沒有了Pin這個選項.如圖1-6-1

圖1-6-1 Xcode7下的Editor菜單

而相反的在IB界面會出現(xiàn)一個Stack,如圖1-6-2和1-6-3

圖1-6-2 Xcode7新增加的Stack View

圖1-6-3 在對象庫中搜索Stack

如圖1-6-2中也是本小節(jié)的實例, 下面簡單介紹下Stack.

Stack View是Xcode7后新增的.從字面意思翻譯為"棧",顧名思義就可以看出他是放控件并管理棧內(nèi)視圖的地方.它分為水平和垂直方向來布局多個子控件.它也可以解決間距的問題.并進行很好的布局工作.

本節(jié)實例最終效果如圖1-6-4和圖1-6-5

圖1-6-4 實例豎屏

圖1-6-5 實例橫屏

下面就開始一步一步來認識Stack View:

??創(chuàng)建工程

??添加三張圖像到"First Stack"棧中并設(shè)置屬性

??添加 兩個按鈕和一個文本到" Second Stack"棧中

??將以上的兩個棧添加到"All Stack"棧中并添加"Grape Stack"

??代碼編寫

1?? 創(chuàng)建工程

我們打開Xcode7及以上版本,命名為"1.6-layout(Stack)"并導(dǎo)入相關(guān)資源圖片(聰樂寶logo和一張葡萄圖)如圖1-6-6

圖1-6-6 創(chuàng)建工程并添加圖片資源

2??添加三張圖像到"First Stack"棧中并設(shè)置屬性

我們先從對象庫中找到Image View,并將它拖入視圖中,并附上聰樂寶logo.然后我們選中ImageView按快捷鍵command + =將ImageView視圖的大小和圖片的大小做好匹配.然后我們再復(fù)制出另外兩個.選擇ImageView Command + C進行復(fù)制.Command + V進行粘貼.完成之后如圖1-6-7

圖1-6-7添加三張聰樂寶logo

添加完logo之后我們就開始進行將這三個logo放到"First Stack"棧中去.添加過程如圖1-6-8

圖1-6-8三個logo放到"First Stack"棧中

我們選中左邊的Stack View,并按回車鍵進行對棧命名"First Stack".選中First Stack 在右邊可以看到如圖1-6-9的屬性列表:

圖1-6-9 Stack的屬性

Axis(軸):表示Stack子控件是按水平布局還是按照垂直布局.

Alignment(對齊):控制子控件的對齊方式默認為Fill,我們在這里不需要改變.

Distribution(分配):控制子控件的分布方式,在這里我們需要圖片的寬高不變,因此選擇Equal Spacing(等間距).

Spacing(間距):控制子控件的最小間距.

Baseline Relative:決定了子視圖間的間隙是否根據(jù)基線測量得到

3??添加 兩個按鈕和一個文本到" Second Stack"棧中

以同樣的方法將"添加葡萄""移除葡萄"兩個按鈕和"聰樂寶"文本添加到視圖中.如圖1-6-10

圖1-6-10 添加兩個按鈕以及一個文本

添加完成之后并將文本的字體大小調(diào)節(jié)為27,當(dāng)我們增加字體之后可以看到,文字顯示不全.這時候我們選擇文本控件,用快捷鍵command + = 進行匹配.并進行文字居中顯示.下面我們進行添加第二個棧如圖1-6-11

圖1-6-11 將兩個按鈕一個文本放到Second Stack中去

4??將以上的兩個棧添加到"All Stack"棧中并添加"Grape Stack"

以上我們添加了First 和Second兩個棧,其實到此就可以了,但是為了讓大家看到Stack的強大功能,棧中棧,所以我就有了第4??步.我們選中First Stack 和 Second Stack,并加入棧中,布局方式改為垂直方式,如圖1-6-12

圖1-6-12將兩個棧添加到"All Stack"棧

添加Grape Stack 棧如圖1-6-13

圖1-6-13 添加葡萄活動棧

添加完Grape Stac之后需要在屬性編輯器中更改它的Distribution為Fill Equally.不然在添加的時候布局會出問題.

5??代碼編寫

下一步就開始連接視圖和代碼進行代碼編寫了,如圖1-6-14將視圖中所用控件連接到代碼中去

圖1-6-14將視圖中所用控件連接到代碼中

下面就開始進行代碼編寫,如圖1-6-15

圖1-6-15 實例代碼部分編寫

subView和arrangedSubView

如果想添加一個subView給Stack View來管理,我們應(yīng)該代用public func addArrangedSubview(view: UIView)或者public func insertArrangedSubview(view: UIView, atIndex stackIndex: Int).? arrangedSubviews數(shù)組是subviews屬性的子集潮瓶。

在這里注意

①---無論何時 stack 視圖增加了一個視圖到它的 arrangedSubviews 數(shù)組圣絮，其也將把這個視圖作為子視圖增加. (如實例中并沒有將圖片用addSubview方法添加).

②---無論何時一個子視圖從 stack 視圖中被移除奇颠，那么 stack 視圖也將將其從 arrangedSubviews 數(shù)組中移除盈简。(當(dāng)然在實例中g(shù)rapeStack.removeArrangedSubview(grapeImageLast!)方法可以刪除.)

③---從 arrangedSubviews 移除一個視圖并不會將其作為子視圖移除。stack 視圖將不再管理該視圖的尺寸和位置陶因，但是該視圖仍將是視圖結(jié)構(gòu)的一部分堰汉，并且當(dāng)其可見的情況下仍會被渲染到屏幕上。(如實例中將圖片移除棧時,仍然需要將其從父視圖移除).

如果在敲代碼中遇到任何問題,請以以下方式聯(lián)系.

源碼地址:Github

歡迎加入Swift QQ交流群:513653400