iOS UIStackView

一如输、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 -> 子視圖之間的間距

二土思、屬性詳解

  1. axis
    主要設(shè)置UIStackView布局的方向:水平方向或垂直方向务热。
typedefNS_ENUM(NSInteger,UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal    =0, //水平
    UILayoutConstraintAxisVertical      =1  //垂直
};
  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

  1. 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è)為80
80
第三個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

  1. 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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瓮床,一起剝皮案震驚了整個濱河市盹舞,隨后出現(xiàn)的幾起案子产镐,更是在濱河造成了極大的恐慌,老刑警劉巖踢步,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件癣亚,死亡現(xiàn)場離奇詭異,居然都是意外死亡获印,警方通過查閱死者的電腦和手機(jī)述雾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來兼丰,“玉大人玻孟,你說我怎么就攤上這事△⒄鳎” “怎么了黍翎?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長艳丛。 經(jīng)常有香客問我匣掸,道長,這世上最難降的妖魔是什么氮双? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任碰酝,我火速辦了婚禮,結(jié)果婚禮上戴差,老公的妹妹穿的比我還像新娘送爸。我一直安慰自己,他們只是感情好暖释,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布袭厂。 她就那樣靜靜地躺著,像睡著了一般饭入。 火紅的嫁衣襯著肌膚如雪嵌器。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天谐丢,我揣著相機(jī)與錄音爽航,去河邊找鬼鹦筹。 笑死沉删,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的毁菱。 我是一名探鬼主播窄瘟,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼衷佃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蹄葱?” 一聲冷哼從身側(cè)響起氏义,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤锄列,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后惯悠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體邻邮,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年克婶,在試婚紗的時候發(fā)現(xiàn)自己被綠了筒严。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡情萤,死狀恐怖鸭蛙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情筋岛,我是刑警寧澤娶视,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站泉蝌,受9級特大地震影響歇万,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜勋陪,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望硫兰。 院中可真熱鬧诅愚,春花似錦、人聲如沸劫映。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽泳赋。三九已至雌桑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間祖今,已是汗流浹背校坑。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留千诬,地道東北人耍目。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像徐绑,于是被迫代替她去往敵國和親邪驮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

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