iOS9新特性UIStackView

概述


UIStackViewiOS9中新增的API,類似于Android中的線性布局。UIStackView提供了一個高效的接口用于平鋪一行或一列的視圖組合。對于嵌入到StackView的視圖,你不用再添加自動布局的約束了。Stack View管理這些子視圖的布局,并幫你自動布局約束。也就是說,這些子視圖能夠適應不同的屏幕尺寸。此外,你可以嵌入一個stack View到另一個stack view中來創建更為復雜的用戶界面。不要誤解我的意思,這并不意味著你就不需要處理自動布局了。你仍舊要定義一些布局約束來約束stack view。它只是幫你節約了為每個UI元素創建約束的時間,同時它更容易的從布局中添加/刪除一個視圖。


UIStackView的優點

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

UIStackView介紹

1.初始化

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

2.添加/移除子視圖

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


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

3.UIStackView排列方式

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) 
{ 
UILayoutConstraintAxisHorizontal = 0, //子視圖水平排列 
UILayoutConstraintAxisVertical = 1 //子視圖垂直排列
};
@property(nonatomic) UILayoutConstraintAxis axis;
//這個屬性是用來設置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
    根據UIStackView的排列方式,用子視圖鋪滿填充指定的 方向,
  • UIStackView:垂直排列:UIStackView中的子視圖將填充滿UIStackView的高度。
  • UIStackView:水平排列:UIStackView中的子視圖將填充滿UIStackView的寬度。
  • 由于每個視圖是由UIStackView自動添加約束的,要進行鋪滿操作就對視圖進行拉伸,指定某個視圖拉伸,可以更改其壓縮或者拉伸的優先級實現。
    • 拉伸優先級priority值越低 優先級越高 先被拉伸
    • 如果優先級相同 默認 拉伸第一個UI控件


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

    UIStackViewDistributionFillEqually

  • UIStackViewDistributionFillProportionally
    根據每個子視圖里面內容的尺寸來進行填充操作

UIStackViewDistributionFillProportionally
  • UIStackViewDistributionEqualSpacing
    排列視圖,保證每個子視圖之間的間距相等

    UIStackViewDistributionEqualSpacing

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

UIStackViewDistributionEqualCentering

  • 5、子視圖對齊方式
typedef NS_ENUM(NSInteger, UIStackViewAlignment) { 
UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下邊距 相等   垂直: subView的左右邊距和 StackView的所有相等 
UIStackViewAlignmentLeading,//垂直有效 :左對齊
UIStackViewAlignmentTop =UIStackViewAlignmentLeading, // 水平有效 上對齊
UIStackViewAlignmentFirstBaseline,//水平有效,第一行基準線對齊。
UIStackViewAlignmentCenter, //中心基準線對齊 1.水平 高度中點對齊 2.垂直:寬度中點對齊
UIStackViewAlignmentTrailing,  //垂直有效,右邊界對齊。
UIStackViewAlignmentBottom =UIStackViewAlignmentTrailing,// 水平有效 ,下邊界對齊。
UIStackViewAlignmentLastBaseline,//水平有效,最后一行基準線對齊。
 } NS_ENUM_AVAILABLE_IOS(9_0);
@property(nonatomic) UIStackViewAlignment alignment;//設置UIStackView中子視圖對齊的方式

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

UIStackView的創建

1、第一種方式

  • 直接創建UIStackView ,再向其中添加 UI控件
    先創建在添加
  • 接下來,放置一個ImageView到StackView里,這個時候你會發現imageview自動填充了這個Stackview,接下繼續拖入兩個imageview,神奇的事情發生了,Stackview內的圖片都做到了很好的自適應。
  • 前提是 你把Stackview的Distribution屬性設置成Fill Equally
Snip20160221_16.png
添加一個ImageView

添加第二個ImageView

添加第三個ImageView

2、第二種方式

  • 先創建控件 在通過控件 創建UIStackView
    先創建控件 在通過控件 創建`UIStackView`
  • 注意 : 如果是通過這種方法創建的UIStackView 會根據 控件的排列 自動判斷是創建豎直的還是水平的,可以通過下圖設置,按需求修改,豎直還是水平

3、通過代碼創建UIStackView

    //創建UIStackView
    UIStackView * stackView=[[UIStackView alloc] initWithArrangedSubviews:@[imageView1,imageView
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容

  • 該文章屬于劉小壯原創,轉載請注明:劉小壯[http://www.lxweimin.com/u/2de707c93d...
    劉小壯閱讀 15,589評論 5 73
  • 翻譯自“Auto Layout Guide”。 1 入門 1.1 理解自動布局 自動布局根據視圖層級結構中視圖上的...
    lakerszhy閱讀 3,622評論 3 26
  • 目錄 0、前言 一、Auto Layout前世今生 二、Auto Layout基礎知識 1.Auto Layout...
    浮游lb閱讀 24,811評論 3 89
  • 這是一篇挺老的文章,主要就是介紹在iOS9時推出的控件UIStackView。我發現網上的資料并不算多,而AppC...
    Liberalism閱讀 11,129評論 2 26
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,163評論 4 61