一如输、UIStackView簡介
概念:
一個堆疊視圖的容器,iOS9的新特性秘豹。
用途:StackView及其子視圖會自適應(yīng)界面,減少我們設(shè)置約束的工作量骤肛。
特點:
類似ContainView,不會渲染到界面上。
StackView中的子視圖只能朝一個方向進(jìn)行排布,要么水平要么垂直也殖。
StackView支持多層嵌套
約束比StackView的自適應(yīng)優(yōu)先級高,可以通過設(shè)置約束來調(diào)整StackView的布局
支持屬性動畫
不能滾動
屬性:
axis軸: -> 用來設(shè)置子視圖的排列方式(H/V)
aligement: -> 用來設(shè)置子視圖的對齊方式
distribution -> 用來設(shè)置子視圖的分布方式(fill-填充)
spacing -> 子視圖之間的間距
二土思、屬性詳解
- axis
主要設(shè)置UIStackView布局的方向:水平方向或垂直方向务热。
typedefNS_ENUM(NSInteger,UILayoutConstraintAxis) {
UILayoutConstraintAxisHorizontal =0, //水平
UILayoutConstraintAxisVertical =1 //垂直
};
- alignment
主要設(shè)置非軸方向子視圖的對齊方式。
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
UIStackViewAlignmentFill, // 子視圖填充
UIStackViewAlignmentLeading, // 子視圖左對齊(axis為垂直方向而言)
UIStackViewAlignmentTop = UIStackViewAlignmentLeading, // 子視圖頂部對齊(axis為水平方向而言)
UIStackViewAlignmentFirstBaseline, // 按照第一個子視圖的文字的第一行對齊己儒,同時保證高度最大的子視圖底部對齊(只在axis為水平方向有效)
UIStackViewAlignmentCenter, // 子視圖居中對齊
UIStackViewAlignmentTrailing, // 子視圖右對齊(axis為垂直方向而言)
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing, // 子視圖底部對齊(axis為水平方向而言)
UIStackViewAlignmentLastBaseline, // 按照最后一個子視圖的文字的最后一行對齊崎岂,同時保證高度最大的子視圖頂部對齊(只在axis為水平方向有效)
} API_AVAILABLE(ios(9.0));
具體顯示效果如下:
(圖片查看原文)
fill
(圖片查看原文)
top
(圖片查看原文)
center
(圖片查看原文)
bottom
(圖片查看原文)
first base line
(圖片查看原文)
last base line
- distribution
設(shè)置軸方向上子視圖的分布比例(如果axis是水平方向,也即設(shè)置子視圖的寬度闪湾,如果axis是垂直方向冲甘,則是設(shè)置子視圖的高度)。
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
UIStackViewDistributionFill = 0,
UIStackViewDistributionFillEqually,
UIStackViewDistributionFillProportionally,
UIStackViewDistributionEqualSpacing,
UIStackViewDistributionEqualCentering,
} API_AVAILABLE(ios(9.0));
下面以
axis = UILayoutConstraintAxisHorizontal,
alignment = UIStackViewAlignmentCenter
為例:
往UIStackView中添加三個UIView:
第一個UIView設(shè)為40100
第二個UIView設(shè)為8080
第三個UIView設(shè)為120*60
通過實例來說明每個屬性的區(qū)別:
(1)UIStackViewDistributionFill = 0,默認(rèn)屬性途样,軸方向上填充UIStackView江醇。如果axis為水平方向,則所有子視圖的寬度等于UIStackView的寬何暇,所以如果只有一個子視圖陶夜,則子視圖的寬度就等于UIStackView的寬,如果有兩個子視圖裆站,且優(yōu)先級一樣条辟,則會拉伸或壓縮某個子視圖,使兩個子視圖的寬度之和等于UIStackView的寬……宏胯,如果axis是垂直方向羽嫡,則所有子視圖的高度等于UIStackView的高,必要時會拉伸或壓縮某個子視圖胳嘲。
上面是在子視圖優(yōu)先級一致的情況下厂僧,如果子視圖優(yōu)先級不一致,則會按優(yōu)先級從高到低設(shè)置子視圖的位置了牛,對優(yōu)先級最低的子視圖進(jìn)行必要的拉伸或壓縮颜屠。
設(shè)置distribution = UIStackViewDistributionFill后顯示效果:
(圖片查看原文)
UIStackViewDistributionFill
如圖所示,由于三個子視圖的寬度之和不夠UIStackView的寬度鹰祸,優(yōu)先級又一致甫窟,所以第三個子視圖被拉伸了。當(dāng)然蛙婴,我們可以修改某個子視圖的優(yōu)先級來讓其被拉伸粗井。
(2)UIStackViewDistributionFillEqually,該屬性設(shè)置后使所有子視圖在軸方向上等寬或等高街图。即如果是水平方向浇衬,所有子視圖都會被必要的拉伸或壓縮,使得每個子視圖的寬度一致餐济,原來設(shè)置的子視圖的寬度都會被忽略耘擂;如果是垂直方向,所有子視圖的高度也會保持一致絮姆,如下所示:
(圖片查看原文)
UIStackViewDistributionFillEqually
(3)UIStackViewDistributionFillProportionally 該屬性設(shè)置后會根據(jù)原先子視圖的比例來拉伸或壓縮子視圖的寬或高醉冤,如實例中三個子視圖原先設(shè)置的寬度是1:2:3秩霍,所以水平方向上顯示時,會按照這個比例進(jìn)行拉伸蚁阳,如下圖所示,拉伸后的寬度依然是1:2:3铃绒。
(圖片查看原文)
UIStackViewDistributionFillProportionally
(4)UIStackViewDistributionEqualSpacing 該屬性會保持子視圖的寬高,所有子視圖中間的間隔保持一致螺捐。如下圖所示颠悬,圖中子視圖的間隔(綠線所示的長度)都是一致的。
(圖片查看原文)
UIStackViewDistributionEqualSpacing
(5)UIStackViewDistributionEqualCentering 該屬性是控制所有子視圖的中心之間的距離保持一致归粉,如下圖所示椿疗,子視圖中心點之間的間隔(綠線所示的長度)是一致的。
(圖片查看原文)
UIStackViewDistributionEqualCentering
- spacing
該屬性控制子視圖之間的間隔大小糠悼,在distribution前三個屬性值設(shè)置的情況下,子視圖之間是沒有間隔浅乔,我們可以通過spacing屬性顯式的設(shè)置倔喂,如下圖在distribution=UIStackViewDistributionFillEqually情況下,設(shè)置子視圖間隔為10,子視圖之間間隔都為10靖苇,且子視圖依然等寬席噩。
三、subView和arrangedSubView
對于Stack View的子控件添加和移除贤壁,我們是這樣描述的悼枢。
添加 --> (Stack View管理的subview)
addArrangedSubview:
insertArrangedSubview:atIndex: arrangedSubviews
數(shù)組是subviews屬性的子集。
移除 --> (Stack View管理的subview)
removeArrangedSubview:–>移除是指移除Stack View內(nèi)部子控件的約束,并沒有真正的把控件從父視圖上移除脾拆。
removeFromSuperview–>從視圖層次結(jié)構(gòu)中刪除馒索,從父視圖上刪除
四、知識點小結(jié)
1名船、Axis表示Stack View的subview是水平排布還是垂直排布绰上。
2、Alignment控制subview對齊方式渠驼。
3蜈块、Distribution定義subview的分布方式。
4迷扇、Spacing 為subview間的最小間距百揭。
五、使用技巧
**可以hidden指定子view蜓席,根據(jù)動態(tài)拉伸規(guī)則器一,靈活使用組件。
————————————————
原文鏈接:https://blog.csdn.net/songzhuo1991/article/details/115626992