使用場景
UIStackView 是 iOS9新增的一個(gè)布局技術(shù)。stackView可以做一些相對(duì)簡單并且有規(guī)律的布局:
UIStackView的基礎(chǔ)使用
1旬蟋、先拖stackView,可以看到有垂直和水平分布兩種樣式:
2、拖一個(gè)豎直的樣式,然后再向里面拖動(dòng)3個(gè)view:
3飒硅、為stackView添加約束后砂缩,發(fā)現(xiàn)仍然報(bào)約束錯(cuò)誤:
4、原因是雖然為stackview這個(gè)“外殼”添加了約束狡相,但是里面的子控件的約束是怎么樣的并不清楚梯轻,默認(rèn)distribution是fill的。即是充滿的意思尽棕,但是如何充滿系統(tǒng)并不知道喳挑,所以會(huì)報(bào)錯(cuò)(此時(shí)storyboard上雖然顯示的是等比例,但實(shí)際運(yùn)行并不是如此)滔悉。簡單的做法是將fill更改為fill Equally等比例填充:3個(gè)view會(huì)平分這個(gè)stackview的高度:
如果將外殼stackView的高度去掉伊诵,而設(shè)置3個(gè)view中任意一個(gè)view的高度為明確高度,此時(shí)也不會(huì)報(bào)錯(cuò)回官,因?yàn)椴捎玫氖莊ill Equally填充曹宴,3個(gè)view的高度將保持一致,并“撐出”外殼stack的高度歉提。其實(shí)采用fill的原理也是一致的:如果給定了外殼的高度笛坦,那么如果兩個(gè)子view的高度明確指定了,那么剩下的高度就是第三個(gè)view的高度苔巨。
關(guān)于UIStackViewDistributionFillProportionally(按照比例填充)的理解:
1版扩、指定stackview的高度為600,設(shè)置3個(gè)view的高度分別為100侄泽,200礁芦,300,即比例為1:2:3悼尾。更改distribution為UIStackViewDistributionFillProportionally柿扣,此時(shí)約束報(bào)錯(cuò):
雖然約束報(bào)錯(cuò),但運(yùn)行程序闺魏,發(fā)現(xiàn)顯示正常未状。這是因?yàn)槲覀兊膕tackview的高度正好可以被3個(gè)view給填充滿,所以并不具有代表性析桥。如果我們更改stackview的高度比600多(設(shè)置為700)娩践,發(fā)現(xiàn)顯示就不正常了(綠色將多余的高度充滿,100烹骨,200,400)材泄,并且代碼報(bào)約束沖突:
此時(shí)即使點(diǎn)擊 add missing也無法解決沖突問題沮焕。只能修改約束的priority(優(yōu)先級(jí))來解決問題,我們?yōu)?個(gè)view的優(yōu)先級(jí)均更改為100拉宗,更改stackView的高度為300和1200:
打印結(jié)果為(三個(gè)view按照比例1:2:3縮放):
stackView:(20.0, 60.0, 374.0, 300.0)
redView:(0.0, 0.0, 374.0, 50.0)
blueView:(0.0, 50.0, 374.0, 100.0)
greenView:(0.0, 150.0, 374.0, 150.0)
stackView:(20.0, 60.0, 374.0, 1200.0)
redView:(0.0, 0.0, 374.0, 200.0)
blueView:(0.0, 200.0, 374.0, 400.0)
greenView:(0.0, 600.0, 374.0, 600.0)
注意:加入spacing后峦树,高度的計(jì)算是有誤差的辣辫,例如我們制定spacing為10,高度為500,通過計(jì)算
(x + 2x + 3x + 20 = 500 )
得到x為80:
stackView:(20.0, 60.0, 374.0, 500.0)
redView:(0.0, 0.0, 374.0, 80.6666666666667)
blueView:(0.0, 90.6666666666666, 374.0, 161.333333333333)
greenView:(0.0, 262.0, 374.0, 238.0)
至于每個(gè)view的priority不同魁巩,那么高度就不定相同了急灭,優(yōu)先級(jí)高的越容易被滿足,至于如何計(jì)算的谷遂,我還沒有搞清楚葬馋。
UIStackViewDistributionEqualSpacing
UIStackViewDistributionEqualSpacing 該屬性會(huì)保持子視圖的寬高,所有子視圖中間的間隔保持一致肾扰。
UIStackViewDistributionEqualCentering
UIStackViewDistributionEqualCentering 該屬性是控制所有子視圖的中心之間的距離保持一致畴嘶。
alignment
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
UIStackViewAlignmentFill,//子視圖填充StackView
UIStackViewAlignmentLeading,//子視圖左對(duì)齊(axis為垂直方向而言)
UIStackViewAlignmentTop = UIStackViewAlignmentLeading,//子視圖頂部對(duì)齊(axis為水平方向而言)
UIStackViewAlignmentFirstBaseline, // 按照第一個(gè)子視圖的文字的第一行對(duì)齊,同時(shí)保證高度最大的子視圖底部對(duì)齊(只在axis為水平方向有效)
UIStackViewAlignmentCenter,//子視圖居中對(duì)齊
UIStackViewAlignmentTrailing,//子視圖右對(duì)齊(axis為垂直方向而言)
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,//子視圖底部對(duì)齊(axis為水平方向而言)
UIStackViewAlignmentLastBaseline, // 按照最后一個(gè)子視圖的文字的最后一行對(duì)齊集晚,同時(shí)保證高度最大的子視圖頂部對(duì)齊(只在axis為水平方向有效)
} NS_ENUM_AVAILABLE_IOS(9_0);
#### top