iOS9 每日學習第4天:UIStack View

發表於2015-10-29

在 iOS9 中,Apple 引入了 UIStackView,他讓你的應用可以通過簡單的方式,縱向或橫向的疊放你的 views。UIStackView 採用 auto layout 的方式來管理他的子檢視的位置和尺寸。讓你更簡單的構建自適應的 UI。

如果在 iOS9 之前,你想要建立類似 UIStackView 為你提供的這種佈局,你需要構建大量的 constraints。你需要編輯許多諸如邊距、高度、x/y 軸的位置,還有它們的依賴關係等。

UIStackView 把這些全部幫你做了。甚至在你新增或者移除某些 view 時,還提供了平滑的動畫。當 view 狀態改變時,他會自動的改變 layout 的屬性值。

使用 UIStackView

現在我們通過建立一個例子來說明怎麼使用 UIStackView,最終的程式碼放在了 Github,你可以下載來研究.我們要建立一個簡單的示範,演示 UIStackView 是怎麼工作的?這個頁面底部有2個segmented controls,用來控制 UIStackView 的對齊和分佈的屬性。

result

上面的圖片就是我們要建立的示例。如你所見,我們顯示了4個朋友的圖片,還有2個 segmented controls 在下面。這些 UI 使用了auto layout 佈局,可以適配多種尺寸。

一會兒的製作過程,會讓你感到驚喜,我們僅僅手動的新增了4個 layout positioning constraints。所有在這個UIStackView中的view都由它自動控制位置。我們一共有4個 UIStackView, 只有第一個我們需要設定一下他的 constraints。這是我們頁面中 stackview 所在的位置。

constraints

當你從 Interface Builder 中拖拽了一個 vertical stack view 到頁面上後,你可以開啟它的 constraint 皮膚,像上圖一樣編輯它的屬性。這會把這個主 stack view 放在頁面的中央,正確的位置上。

從 Interface Builder 中拖拽3個 horizontal stack view 到剛才建立好的 UIStackView 中。在最上面的 stack view,包含四個 UIImageView ,每個 imageView 中展示一個我們的朋友的照片。你拖拽四個 UIImageView 到 stack view 中就可以了。每個圖片的大小尺寸都是不一樣的。為了避免變形,我們給 imageView 的 contentMode 設定為 Aspect Fit。這意味著,不去管圖片的尺寸,圖片總會以正確的比例展示在 imageView 中。

你可能注意到了,在最終的 demo 中,每個 imageView 之間有個間隔,這是因為設定了 stackView的 spacing 屬性為5的原因。在 interface builder 的 attributes inspector 皮膚可以設定 spacing 的值,同時還可以設定 alignment 和 distribution 的屬性。這裡我們預設的設定為 Fill。因為一會兒我們會通過選擇 segment 來改變它的值。

另外兩個 stackView,同樣是 horizontal stack view。非常簡單,每個 stack view 中包含一個 label 和一個 segmented control。設定 segmented control為下面的內容。

Distribution

Fill

Fill Equally

Fill Proportionally

Equal Spacing

Equal Centering

 

Alignment

Fill

Top

Center

Bottom

我們一會兒就能看到,這些屬性是如何影響佈局的。很多時候,他們的排列方式依賴 contentSize的值。好在,我們這個例子非常簡單,image 的大小就是照片的實際大小。

現在我們的 UI 都建立好了。我們需要給 segment 設定選中後的動作。首先把最上面的 stack view 拖拽 outlet 到 viewController 中,命名為 peopleStackView。然後分別拖拽一個 action 給segmented control。在 action 中對 peopleStackView 的 alignment 和 distribution 屬性進行調節,對齊和排列方式由使用者決定。


code

你可以看到,我給每個動作加了一個動畫的效果,但這不是必須的。如果你移除動畫效果,對齊和排列的方式依然會改變。好現在執行一下程式吧。

你可以看到視訊中的結果,點選開啟視訊

嘗試著使用不同的排列組合,看一下會是什麼結果。它會讓你知道UIStackView時多麼強大,在不同尺寸的裝置上開發使用者介面有多方便。

為現有的view,新增UIStackView

如果你想為你現在已經做好的 view 新增 UIStackView,也很簡單。先移除掉你的 view 上的constraint,然後選中他們,點選一下 interface builder 的底部右手邊,第一個按鈕。(就是原來你給 view 新增 constraint 的那些按鈕,左邊多了一個)。這會立刻把你選中的view,全部放入一個 UIStackView 中。


ibSupport

這會把你原來的佈局方式轉為stack view的佈局方式,由stack view來控制佈局。

延伸閱讀

想要了解更多關於Xcode7中 UIStackView的內容,推薦閱讀 WWDC 2015 的 session 218 Mysteries of Auto Layout, Part 1.在視訊前15分鐘裡,Jason Yao 介紹了 UIStackView,並且現場製作了一個Demo演示如何操作的。

相關文章