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

推荐阅读更多精彩内容

  • 该文章属于<金沙第一娱乐娱城官网 — 刘小壮>原创,转载请注明: <金沙第一娱乐娱城官网 — 刘小壮> 什么是UIStackView? 在iOS9...
    刘小壮阅读 12,946评论 4赞 64
  • 翻译自“Auto Layout Guide”。 1 入门 1.1 理解自动布局 自动布局根据视图层级结构中视图上的...
    lakerszhy阅读 1,991评论 3赞 24
  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础常识 1.Auto Layout...
    浮游lb阅读 12,341评论 2赞 62
  • 这是一篇挺老的文章,主要就是先容在iOS9时推出的控件UIStackView。我发现网上的资料并不算多,而AppC...
    Liberalism阅读 8,925评论 2赞 24
  • 小孩之乐~小孩的笑容会瞬间让你融化,今天我遇到一个小孩,我坐在旁边,他妈妈带着他,他坐在推车里,他妈妈一边逗他,一...
    和自己独处阅读 31评论 0赞 1