UIStackView的使用

image.png

一匾二、了解 instric content size

instric content size 表示一個(gè) view 的固有的大小,對于 UILabel, UIImageView, UIButton 這些元素來說,在沒有顯式設(shè)置大小的時(shí)候樊卓,它總是有一個(gè)內(nèi)容撐開的大小
它們是通過方法 -(CGSize)instricContentSize 來返回的豪硅, UIView 返回的是一個(gè) zeroSize, 也是大小為0x0, 不可見其弊。

我們可以繼承UIView, 添加一個(gè)可以設(shè)置的固有大小值霍骄,來幫助我們更好的完成布局群嗤。

#import "ESView.h"

@implementation ESView

-(CGSize)intrinsicContentSize{
    CGSize size = [super intrinsicContentSize];
    if(self.es_intrinsicWidth && self.es_intrinsicHeight){
        return CGSizeMake(self.es_intrinsicWidth, self.es_intrinsicHeight);
    }
    return size;
}

@end

二、UIStackView 的特性

UIStackView 是一個(gè)容器決定內(nèi)容排版的布局模式氏淑,容器大小的變化勃蜘,會影響子項(xiàng)的排版。
類似前端體系中的 flexbox 的簡化版夸政。

  • UIStackView 是一個(gè)虛擬容器元旬,它的layer不被繪制榴徐,設(shè)置背景守问、邊框、陰影這些外觀是無效的坑资。
  • 官方中文文檔
  • 如果我們使用約束耗帕,不定義棧視圖的大小,只定義位置袱贮,這個(gè)時(shí)候仿便,棧視圖不會再改變管理內(nèi)容的大小,相反攒巍,它會自動計(jì)算出自己需要的大小嗽仪,也就是變成了不換行的流式布局。
    也就是它會生成一個(gè)固有大小柒莉,進(jìn)行內(nèi)容自適應(yīng)排版闻坚。

三、基本用法

1兢孝、創(chuàng)建一個(gè) UIStackView窿凤。

    CGSize size = self.view.bounds.size;
    
    UIStackView *sView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 64, size.width, size.height*0.5)];
    [self.view addSubview:sView];

可以為它指定固定的 frame, 也可以添加約束。

2跨蟹、設(shè)置軸向雳殊。

sView.axis = UILayoutConstraintAxisVertical;
//sView.axis = UILayoutConstraintAxisHorizontal;

軸向決定了子項(xiàng)的排列方向,分為水平與垂直兩種窗轩。

3夯秃、設(shè)置最小間距。

 sView.spacing = 2;

默認(rèn)間距是0, 最小間距的意思就是在子項(xiàng)大小超過容器時(shí),也必須保持的間距仓洼,真實(shí)間距有可能比它大箫措。

4、設(shè)置副軸上子項(xiàng)的對齊方式衬潦。

sView.alignment = UIStackViewAlignmentTop;

副軸指的是當(dāng)前axis的正交軸斤蔓,對齊方式有上、中镀岛、下弦牡、兩端4類。

  • UIStackViewAlignmentFill 在副軸方向兩端對齊漂羊,也就是拉伸填滿驾锰。
  • UIStackViewAlignmentTopUIStackViewAlignmentLeading 等效,也就是向開始端對齊走越。
  • UIStackViewAlignmentBottomUIStackViewAlignmentTrailing 類似椭豫,也就是向結(jié)束端對齊。
  • UIStackViewAlignmentCenter 居中旨指。
  • UIStackViewAlignmentFirstBaseline , UIStackViewAlignmentLastBaseline 對齊第一行或者最后一行文本的基線赏酥。

5、設(shè)置內(nèi)容軸向的寬度或者高度模式谆构。

 sView.distribution = UIStackViewDistributionEqualCentering;

它有5種模式:

  • UIStackViewDistributionFill裸扶,默認(rèn)的全軸填滿模式,在保證最小間距的前提下搬素,對子項(xiàng)進(jìn)行壓縮或者拉伸呵晨,調(diào)節(jié)時(shí)考慮子項(xiàng)的抗拉伸或者抗壓縮級別,如果有的話, 如果沒有先從第一個(gè)開始拉伸或者壓縮熬尺。
    UIView默認(rèn)是可以設(shè)置拉伸或者壓縮優(yōu)先級的, 優(yōu)先級越高的摸屠,越先做伸縮。
[view setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];

拉伸是無限的粱哼,所以一般來說季二,只會拉伸一個(gè)子元素,而壓縮是有限的皂吮,第一個(gè)壓縮完了不夠戒傻,就會壓縮第二個(gè)。

  • UIStackViewDistributionFillEqually, 忽略固有大小蜂筹,全部強(qiáng)制均分填滿需纳。
  • UIStackViewDistributionFillProportionally, 軸向填滿,等比例調(diào)節(jié)艺挪。
  • UIStackViewDistributionEqualSpacing, 等距模式不翩,在大小有剩余的時(shí)候兵扬,分配到間距上,如果不足口蝠,進(jìn)行壓縮器钟。
  • UIStackViewDistributionEqualCentering, 中心點(diǎn)等距模式,子項(xiàng)的中心點(diǎn)距離相同妙蔗,間距可能各有不同傲霸,固有尺寸越小,邊距越大眉反,其實(shí)就是先打均分中心點(diǎn)昙啄,再繪制。

所有模式都是讓子項(xiàng)均勻排版寸五,對于空間剩余的情況下梳凛,分配策略不同。
注意它們軸向兩端都是貼邊的梳杏, 也就是說韧拒,它的軸向?qū)R方式就是兩端對齊 just
可以設(shè)置margin來添加外邊距

    sView.layoutMarginsRelativeArrangement = YES;
    sView.layoutMargins = UIEdgeInsetsMake(10, 10, 10, 10);

如果只有一個(gè)子項(xiàng)的時(shí)候十性,總是被拉伸了叛溢。

適應(yīng)場景

適用于單行或者單列,已知容器大小的前提下排版烁试, 沒有flexbox那樣可以自動換行雇初。
至少要保證軸向大小是可知的,副軸方向可以取決于內(nèi)容大小减响。

  • 因?yàn)槔斓膬?yōu)先級特性,我們可以設(shè)計(jì)類似css中的雙飛翼郭怪、一邊固定支示,一邊自適應(yīng)的排版。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鄙才,一起剝皮案震驚了整個(gè)濱河市颂鸿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌攒庵,老刑警劉巖嘴纺,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異浓冒,居然都是意外死亡栽渴,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門稳懒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來闲擦,“玉大人,你說我怎么就攤上這事∈洌” “怎么了纯路?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長寞忿。 經(jīng)常有香客問我驰唬,道長,這世上最難降的妖魔是什么腔彰? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任定嗓,我火速辦了婚禮,結(jié)果婚禮上萍桌,老公的妹妹穿的比我還像新娘宵溅。我一直安慰自己,他們只是感情好上炎,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布恃逻。 她就那樣靜靜地躺著,像睡著了一般藕施。 火紅的嫁衣襯著肌膚如雪寇损。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天裳食,我揣著相機(jī)與錄音矛市,去河邊找鬼。 笑死诲祸,一個(gè)胖子當(dāng)著我的面吹牛浊吏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播救氯,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼找田,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了着憨?” 一聲冷哼從身側(cè)響起墩衙,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎甲抖,沒想到半個(gè)月后漆改,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡准谚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年挫剑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氛魁。...
    茶點(diǎn)故事閱讀 38,569評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡暮顺,死狀恐怖厅篓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捶码,我是刑警寧澤羽氮,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站惫恼,受9級特大地震影響档押,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜祈纯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一令宿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧腕窥,春花似錦粒没、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至入蛆,卻和暖如春响蓉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背哨毁。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工枫甲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扼褪。 一個(gè)月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓想幻,卻偏偏與公主長得像,于是被迫代替她去往敵國和親迎捺。 傳聞我的和親對象是個(gè)殘疾皇子举畸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2 348

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

  • 文:||18歲的小仙女???♀? 有些故事,你未曾觸碰凳枝,便不知里面的心酸。 “男的靠得住跋核,母豬會上樹岖瑰。” “不是我對...
    Visby閱讀 278評論 0 1
  • 親愛的思思: 最近你的心情好像不是很穩(wěn)定呢砂代,是又發(fā)生了什么不好的事嗎蹋订?沒關(guān)系啊沒關(guān)系,我還會陪你的刻伊。嗯露戒,一...
    Real王小七閱讀 200評論 0 2
  • 在南方的一個(gè)省會城市中心的湖畔公園椒功,一位身材清瘦,氣度不凡智什,戴著一幅金絲眼鏡动漾,衣著樸素的中年男士正倚靠在湖畔公園臨...
    竹子詠閱讀 425評論 2 3
  • 伊川王利珍堅(jiān)持原創(chuàng)分享第265天 “兒子,不要老拿著手機(jī)看荠锭,好不好旱眯?你都不知道,我看見你這樣子心里有多不舒服证九!” ...
    宛如初夏閱讀 1,001評論 0 3