iOS9新特性UIStackView

概述

UIStackView是iOS9中新增的API，類似于Android中的線性布局。UIStackView提供了一個(gè)高效的接口用于平鋪一行或一列的視圖組合。對于嵌入到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)

  • 對于一些開發(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對象上并且讓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)行鋪滿操作就對視圖進(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、子視圖對齊方式
typedef NS_ENUM(NSInteger, UIStackViewAlignment) { 
UIStackViewAlignmentFill, //水平:subView的上下和StackView的上下邊距 相等   垂直: subView的左右邊距和 StackView的所有相等 
UIStackViewAlignmentLeading,//垂直有效 ：左對齊
UIStackViewAlignmentTop =UIStackViewAlignmentLeading, // 水平有效 上對齊
UIStackViewAlignmentFirstBaseline,//水平有效，第一行基準(zhǔn)線對齊。
UIStackViewAlignmentCenter, //中心基準(zhǔn)線對齊 1.水平 高度中點(diǎn)對齊 2.垂直：寬度中點(diǎn)對齊
UIStackViewAlignmentTrailing,  //垂直有效，右邊界對齊。
UIStackViewAlignmentBottom =UIStackViewAlignmentTrailing,// 水平有效 ，下邊界對齊。
UIStackViewAlignmentLastBaseline,//水平有效，最后一行基準(zhǔn)線對齊。
 } NS_ENUM_AVAILABLE_IOS(9_0);
@property(nonatomic) UIStackViewAlignment alignment;//設(shè)置UIStackView中子視圖對齊的方式
  • 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)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 該文章屬于劉小壯原創(chuàng)，轉(zhuǎn)載請注明：劉小壯[http://m.itdecent.cn/u/2de707c93d...
    劉小壯閱讀 15,808評(píng)論 5贊 73
  • 翻譯自“Auto Layout Guide”。 1 入門 1.1 理解自動(dòng)布局 自動(dòng)布局根據(jù)視圖層級(jí)結(jié)構(gòu)中視圖上的...
    lakerszhy閱讀 3,979評(píng)論 3贊 26
  • 目錄 0、前言 一、Auto Layout前世今生 二、Auto Layout基礎(chǔ)知識(shí) 1.Auto Layout...
    浮游lb閱讀 25,476評(píng)論 3贊 90
  • 這是一篇挺老的文章，主要就是介紹在iOS9時(shí)推出的控件UIStackView。我發(fā)現(xiàn)網(wǎng)上的資料并不算多，而AppC...
    Liberalism閱讀 11,257評(píng)論 2贊 26
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,839評(píng)論 4贊 61

友情鏈接更多精彩內(nèi)容