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阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • 该文章属于刘小壮原创,转载请注明:刘小壮[https://www.jianshu.com/u/2de707c93d...
    刘小壮阅读 15,413评论 5 72
  • 翻译自“Auto Layout Guide”。 1 入门 1.1 理解自动布局 自动布局根据视图层级结构中视图上的...
    lakerszhy阅读 3,559评论 3 26
  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 24,314评论 3 89
  • 这是一篇挺老的文章,主要就是介绍在iOS9时推出的控件UIStackView。我发现网上的资料并不算多,而AppC...
    Liberalism阅读 11,067评论 2 26
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62