淺談stackView布局的使用

使用場景

UIStackView 是 iOS9新增的一個(gè)布局技術(shù)。stackView可以做一些相對(duì)簡單并且有規(guī)律的布局:

image.png

UIStackView的基礎(chǔ)使用

1旬蟋、先拖stackView,可以看到有垂直和水平分布兩種樣式:


image.png

2、拖一個(gè)豎直的樣式,然后再向里面拖動(dòng)3個(gè)view:


image.png

3飒硅、為stackView添加約束后砂缩,發(fā)現(xiàn)仍然報(bào)約束錯(cuò)誤:
image.png

image.png

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的高度:


image.png

image.png

如果將外殼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ò):


image.png

雖然約束報(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)約束沖突:

image.png

image.png

此時(shí)即使點(diǎn)擊 add missing也無法解決沖突問題沮焕。只能修改約束的priority(優(yōu)先級(jí))來解決問題,我們?yōu)?個(gè)view的優(yōu)先級(jí)均更改為100拉宗,更改stackView的高度為300和1200:

image.png

打印結(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
top

center

center

bottom

image.png

first Baseline

image.png

last baseline

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窗悯,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子偷拔,更是在濱河造成了極大的恐慌蒋院,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件莲绰,死亡現(xiàn)場離奇詭異欺旧,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)钉蒲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門切端,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人顷啼,你說我怎么就攤上這事踏枣。” “怎么了钙蒙?”我有些...
    開封第一講書人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵茵瀑,是天一觀的道長。 經(jīng)常有香客問我躬厌,道長马昨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任扛施,我火速辦了婚禮鸿捧,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘疙渣。我一直安慰自己匙奴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開白布妄荔。 她就那樣靜靜地躺著泼菌,像睡著了一般谍肤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上哗伯,一...
    開封第一講書人閱讀 51,287評(píng)論 1 301
  • 那天荒揣,我揣著相機(jī)與錄音,去河邊找鬼焊刹。 笑死系任,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的伴澄。 我是一名探鬼主播赋除,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼非凌!你這毒婦竟也來了举农?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤敞嗡,失蹤者是張志新(化名)和其女友劉穎颁糟,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喉悴,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡棱貌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了箕肃。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片婚脱。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖勺像,靈堂內(nèi)的尸體忽然破棺而出障贸,到底是詐尸還是另有隱情,我是刑警寧澤吟宦,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布篮洁,位于F島的核電站,受9級(jí)特大地震影響殃姓,放射性物質(zhì)發(fā)生泄漏袁波。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一蜗侈、第九天 我趴在偏房一處隱蔽的房頂上張望篷牌。 院中可真熱鬧,春花似錦踏幻、人聲如沸娃磺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽偷卧。三九已至,卻和暖如春吆倦,著一層夾襖步出監(jiān)牢的瞬間听诸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來泰國打工蚕泽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晌梨,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓须妻,卻偏偏與公主長得像仔蝌,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子荒吏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容