UIStackView to resize/layout
自適應(yīng)、適配、布局這幾個關(guān)鍵詞一直伴隨著iOS開發(fā),從以前的單一尺寸屏幕,到現(xiàn)在的多尺寸屏幕,Apple一直致力于讓開發(fā)人員盡可能少在這些事上耗費過多的精力,所以Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年iOS 9中又增加了新的控件:UIStackView。這些無一不是我們開發(fā)者做適配的利器。
UIStackView簡介
The UIStackView class provides a streamlined interface for laying out a collection of views in either a column or a row. Stack views let you leverage the power of Auto Layout, creating user interfaces that can dynamically adapt to the device’s orientation, screen size, and any changes in the available space. The stack view manages the layout of all the views in its arrangedSubviews property. These views are arranged along the stack view’s axis, based on their order in the arrangedSubviews array. The exact layout varies depending on the stack view’s axis, distribution, alignment, spacing, and other properties.
simple display
UIStackView提供了一個高效的接口用于平鋪一行或一列的視圖組合。對于嵌入到StackView的視圖,你不用再添加自動布局的約束了。Stack View管理這些子視圖的布局,并幫你自動布局約束。
StackView其實一個視圖容器,不過它會對它的子視圖根據(jù)一定規(guī)則自動布局,將子視圖按棧的排列方式進行布局。
UIStackView主要的屬性
一般情況下,我們不需要對stackView.subviews做任何約束,只需要通過對stackView的axis, distribution, alignment, spacing屬性進行修改 2
-
Axis 方向
StackView有水平和垂直兩個方向的布局模式
axis Spacing 間隔
StackView可以設(shè)置子視圖之間的間隔-
Alignment 對齊方式
StackView可以設(shè)置子視圖的對齊方式(水平方向和垂直方向的該屬性值有所區(qū)別):
alignment- Fill:子視圖填充StackView。
- Leading:靠左對齊。
- Trailing:靠右對齊。
- Center:子視圖以中線為基準對齊。
- Top:靠頂部對齊。
- Bottom:靠底部對齊。
- First Baseline:按照第一個子視圖中文字的第一行對齊,同時保證高度最大的子視圖底部對齊(只在axis為水平方向有效)。
- Last Baseline:按照最后一個子視圖中文字的最后一行對齊,同時保證高度最大的子視圖頂部對齊(只在axis為水平方向有效)。
-
Distribution 分布方式
StackView可以設(shè)置子視圖的分布方式:
- Fill:默認分布方式。
- Fill Equally:子視圖的高度或?qū)挾缺3忠恢隆?/li>
- Fill:Proportionally:按比例分布。
- Equal Spacing:子視圖保持同等間隔。
- Equal Centering:每個子視圖中心線之間保持一致。
baselineRelativeArrangement
determines whether the vertical spacing between views is measured from the baselines.
決定了其視圖間的垂直間隙是否根據(jù)基線測量得到,選中 Baseline Relative 將根據(jù)subview的基線調(diào)整垂直間距。3layoutMarginsRelativeArrangement
determines whether the stack view lays out its arranged views relative to its layout margins.
決定了 stack 視圖平鋪其管理的視圖時是否要參照它的布局邊距,選中 Layout Margins Relative 將相對于標準邊界空白來調(diào)整subview位置。
UIStackView的嵌套
Typically, you use a single stack view to lay out a small number of items. You can build more complex view hierarchies by nesting stack views inside other stack views.
既然UIStackView繼承了UIView,那么UIStackView也可以看做是一個UIView而被包含在UIStackView內(nèi),亦及嵌套使用。
UIStackView 與 UICollectionView 的選取
UIStackView 實現(xiàn)有對齊要求的視圖布局非常非常得簡單,而使用 UICollectionView 和 UITableView 來實現(xiàn),相對而言就比較麻煩。
相比于collectionView而言,stackView更加小巧靈活,然而想要完成更精致的效果,最終還是得使用UICollectionView。
注意!
Be careful to avoid introducing conflicts when adding constraints to views inside a stack view. As a general rule of thumb, if a view’s size defaults back to its intrinsic content size for a given dimension, you can safely add a constraint for that dimension.
1. Distribution 分布方式的方向垂直于Axis。
2. 有時可能排版較亂,除了設(shè)置屬性來布局之外,我們還可以手動添加屬性,且"手動添加的享有更高的優(yōu)先級"。
(Apple官方建議開發(fā)人員應(yīng)優(yōu)先采用StackView來設(shè)計用戶界面,然后再根據(jù)實際需求來添加約束)
后記
The UIStackView is a nonrendering subclass of UIView; that is, it does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no effect on the stack view. Similarly, you cannot override layerClass, drawRect:, or drawLayer:inContext:.
UIStackView不是萬能的,但它可以在布局和自適應(yīng)方面給開發(fā)者帶來便利,在恰當(dāng)?shù)那樾蜗率褂肧tackView可以事半功倍。而且因為UIStackView是UIView的子類,所以也可以將動畫效果作用于UIStackView上,在方便布局之余還能提高用戶體驗。
隔桌安卓小伙伴不滿了,這不就是
LinearLayout
嗎?
額 -_-!
ThanksTo:
[1] UIStackView Class Reference --
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/index.html#//apple_ref/occ/instp/UIStackView/distribution
[2] UIStackView小窺 --
http://www.devtalking.com/articles/uistackview/?utm_source=tuicool&utm_medium=referral
[3] 簡便的自動布局,對UIStackView的個人理解! --
http://www.cnblogs.com/bokeyuanlibin/p/5693575.html
// 純代碼的下次再總結(jié)