iOS9新特性UIStackView

概述


UIStackViewiOS9中新增的API瞳别,類似于Android中的線性布局痘绎。UIStackView提供了一個(gè)高效的接口用于平鋪一行或一列的視圖組合。對(duì)于嵌入到StackView的視圖帚桩,你不用再添加自動(dòng)布局的約束了纤怒。Stack View管理這些子視圖的布局,并幫你自動(dòng)布局約束峭状。也就是說克滴,這些子視圖能夠適應(yīng)不同的屏幕尺寸。此外优床,你可以嵌入一個(gè)stack View到另一個(gè)stack view中來創(chuàng)建更為復(fù)雜的用戶界面劝赔。不要誤解我的意思,這并不意味著你就不需要處理自動(dòng)布局了胆敞。你仍舊要定義一些布局約束來約束stack view着帽。它只是幫你節(jié)約了為每個(gè)UI元素創(chuàng)建約束的時(shí)間杂伟,同時(shí)它更容易的從布局中添加/刪除一個(gè)視圖。


UIStackView的優(yōu)點(diǎn)

  • 對(duì)于一些開發(fā)者來說使用autolayout設(shè)計(jì)一些復(fù)雜的交互界面是比較困難的仍翰。UIStackView正好能幫助到并讓我們的開發(fā)者的工作變得更容易些赫粥。(StackView內(nèi)部的控件 StackView會(huì)自動(dòng)給它們添加約束的) 但是 并不是 就完全不需要 AutoLayout了 。你仍舊要定義一些布局約束來約束stack view
  • 更容易的從布局中添加/刪除一個(gè)視圖予借。

UIStackView介紹

1.初始化

- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;//初始化方法傳入需要用UIStackView管理的存放子視圖的數(shù)組,并按照數(shù)組中的順序添加這些子視圖越平。

2.添加/移除子視圖

- (void)addArrangedSubview:(UIView *)view;//添加view到UIStackView對(duì)象上并且讓UIStackView管理這個(gè)view布局
- (void)removeArrangedSubview:(UIView *)view;//取消UIStackView的管理,但是這個(gè)view不從UIStackView上移除  如果想從UIstackView從移除 還要配合 removeFromSuperview 使用


- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;//UIStackView管理存放子視圖的數(shù)組灵迫,按照順序來布局喧笔,這個(gè)方法是向這個(gè)數(shù)組里指定位置添加view

3.UIStackView排列方式

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) 
{ 
UILayoutConstraintAxisHorizontal = 0, //子視圖水平排列 
UILayoutConstraintAxisVertical = 1 //子視圖垂直排列
};
@property(nonatomic) UILayoutConstraintAxis axis;
//這個(gè)屬性是用來設(shè)置UIStackView中子視圖的排列方式

4.子視圖分布樣式

typedef NS_ENUM(NSInteger, UIStackViewDistribution) 
{
UIStackViewDistributionFill = 0, 
UIStackViewDistributionFillEqually, 
UIStackViewDistributionFillProportionally,
UIStackViewDistributionEqualSpacing, 
UIStackViewDistributionEqualCentering,} 
NS_ENUM_AVAILABLE_IOS(9_0);
@property(nonatomic) UIStackViewDistribution distribution;
//UIStackView中子視圖的分布樣式
  • UIStackViewDistributionFill
    根據(jù)UIStackView的排列方式,用子視圖鋪滿填充指定的 方向龟再,
  • UIStackView:垂直排列:UIStackView中的子視圖將填充滿UIStackView的高度。
  • UIStackView:水平排列:UIStackView中的子視圖將填充滿UIStackView的寬度尼变。
  • 由于每個(gè)視圖是由UIStackView自動(dòng)添加約束的利凑,要進(jìn)行鋪滿操作就對(duì)視圖進(jìn)行拉伸,指定某個(gè)視圖拉伸嫌术,可以更改其壓縮或者拉伸的優(yōu)先級(jí)實(shí)現(xiàn)哀澈。
    • 拉伸優(yōu)先級(jí)priority值越低 優(yōu)先級(jí)越高 先被拉伸
    • 如果優(yōu)先級(jí)相同 默認(rèn) 拉伸第一個(gè)UI控件


  • UIStackViewDistributionFillEqually
    UIStackViewDistributionFillEqually保證鋪滿后如果是垂直排列所有的子視圖高度相等,如果是水平排列所有的子視圖寬度相等度气。

    UIStackViewDistributionFillEqually

  • UIStackViewDistributionFillProportionally
    根據(jù)每個(gè)子視圖里面內(nèi)容的尺寸來進(jìn)行填充操作

UIStackViewDistributionFillProportionally
  • UIStackViewDistributionEqualSpacing
    排列視圖割按,保證每個(gè)子視圖之間的間距相等

    UIStackViewDistributionEqualSpacing

  • UIStackViewDistributionEqualCentering
    排列視圖,保證每個(gè)子視圖中心直接的間距相等

UIStackViewDistributionEqualCentering

  • 5磷籍、子視圖對(duì)齊方式
typedef NS_ENUM(NSInteger, UIStackViewAlignment) { 
UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下邊距 相等   垂直: subView的左右邊距和 StackView的所有相等 
UIStackViewAlignmentLeading,//垂直有效 :左對(duì)齊
UIStackViewAlignmentTop =UIStackViewAlignmentLeading, // 水平有效 上對(duì)齊
UIStackViewAlignmentFirstBaseline,//水平有效适荣,第一行基準(zhǔn)線對(duì)齊。
UIStackViewAlignmentCenter, //中心基準(zhǔn)線對(duì)齊 1.水平 高度中點(diǎn)對(duì)齊 2.垂直:寬度中點(diǎn)對(duì)齊
UIStackViewAlignmentTrailing,  //垂直有效院领,右邊界對(duì)齊弛矛。
UIStackViewAlignmentBottom =UIStackViewAlignmentTrailing,// 水平有效 ,下邊界對(duì)齊比然。
UIStackViewAlignmentLastBaseline,//水平有效丈氓,最后一行基準(zhǔn)線對(duì)齊。
 } NS_ENUM_AVAILABLE_IOS(9_0);
@property(nonatomic) UIStackViewAlignment alignment;//設(shè)置UIStackView中子視圖對(duì)齊的方式

  • 5.子視圖之間的間距
@property(nonatomic) CGFloat spacing//每個(gè)子視圖之間的間距强法,在某些布局的情況下spacing將作為最小的間距万俗。

UIStackView的創(chuàng)建

1、第一種方式

  • 直接創(chuàng)建UIStackView 饮怯,再向其中添加 UI控件
    先創(chuàng)建在添加
  • 接下來闰歪,放置一個(gè)ImageView到StackView里,這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)imageview自動(dòng)填充了這個(gè)Stackview硕淑,接下繼續(xù)拖入兩個(gè)imageview课竣,神奇的事情發(fā)生了嘉赎,Stackview內(nèi)的圖片都做到了很好的自適應(yīng)。
  • 前提是 你把Stackview的Distribution屬性設(shè)置成Fill Equally
Snip20160221_16.png
添加一個(gè)ImageView

添加第二個(gè)ImageView

添加第三個(gè)ImageView

2于樟、第二種方式

  • 先創(chuàng)建控件 在通過控件 創(chuàng)建UIStackView
    先創(chuàng)建控件 在通過控件 創(chuàng)建`UIStackView`
  • 注意 : 如果是通過這種方法創(chuàng)建的UIStackView 會(huì)根據(jù) 控件的排列 自動(dòng)判斷是創(chuàng)建豎直的還是水平的公条,可以通過下圖設(shè)置,按需求修改迂曲,豎直還是水平靶橱。

3、通過代碼創(chuàng)建UIStackView

    //創(chuàng)建UIStackView
    UIStackView * stackView=[[UIStackView alloc] initWithArrangedSubviews:@[imageView1,imageView
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末路捧,一起剝皮案震驚了整個(gè)濱河市关霸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌杰扫,老刑警劉巖队寇,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異章姓,居然都是意外死亡佳遣,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門凡伊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來零渐,“玉大人,你說我怎么就攤上這事系忙∷信危” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵银还,是天一觀的道長风宁。 經(jīng)常有香客問我,道長蛹疯,這世上最難降的妖魔是什么杀糯? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮苍苞,結(jié)果婚禮上固翰,老公的妹妹穿的比我還像新娘。我一直安慰自己羹呵,他們只是感情好骂际,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著冈欢,像睡著了一般歉铝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上凑耻,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天太示,我揣著相機(jī)與錄音柠贤,去河邊找鬼。 笑死类缤,一個(gè)胖子當(dāng)著我的面吹牛臼勉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播餐弱,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼宴霸,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了膏蚓?” 一聲冷哼從身側(cè)響起瓢谢,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎驮瞧,沒想到半個(gè)月后氓扛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡论笔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年幢尚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翅楼。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖真慢,靈堂內(nèi)的尸體忽然破棺而出毅臊,到底是詐尸還是另有隱情,我是刑警寧澤黑界,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布管嬉,位于F島的核電站,受9級(jí)特大地震影響朗鸠,放射性物質(zhì)發(fā)生泄漏蚯撩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一烛占、第九天 我趴在偏房一處隱蔽的房頂上張望胎挎。 院中可真熱鬧,春花似錦忆家、人聲如沸犹菇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽揭芍。三九已至,卻和暖如春卸例,著一層夾襖步出監(jiān)牢的瞬間称杨,已是汗流浹背肌毅。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留姑原,地道東北人悬而。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像页衙,于是被迫代替她去往敵國和親摊滔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

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

  • 該文章屬于劉小壯原創(chuàng)店乐,轉(zhuǎn)載請(qǐng)注明:劉小壯[http://www.reibang.com/u/2de707c93d...
    劉小壯閱讀 15,500評(píng)論 5 73
  • 翻譯自“Auto Layout Guide”艰躺。 1 入門 1.1 理解自動(dòng)布局 自動(dòng)布局根據(jù)視圖層級(jí)結(jié)構(gòu)中視圖上的...
    lakerszhy閱讀 3,569評(píng)論 3 26
  • 目錄 0、前言 一眨八、Auto Layout前世今生 二腺兴、Auto Layout基礎(chǔ)知識(shí) 1.Auto Layout...
    浮游lb閱讀 24,409評(píng)論 3 89
  • 這是一篇挺老的文章,主要就是介紹在iOS9時(shí)推出的控件UIStackView廉侧。我發(fā)現(xiàn)網(wǎng)上的資料并不算多页响,而AppC...
    Liberalism閱讀 11,084評(píng)論 2 26
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件段誊、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評(píng)論 4 62