概述
UIStackView
是iOS9
中新增的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
保证铺满后如果是垂直排列所有的子视图高度相等,如果是水平排列所有的子视图宽度相等。
UIStackViewDistributionFillProportionally
根据每个子视图里面内容的尺寸来进行填充操作
-
UIStackViewDistributionEqualSpacing
排列视图,保证每个子视图之间的间距相等
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
2、第二种方式
- 先创建控件 在通过控件 创建
UIStackView
- 注意 : 如果是通过这种方法创建的
UIStackView
会根据 控件的排列 自动判断是创建竖直的
还是水平的
,可以通过下图设置,按需求修改,竖直
还是水平
。
3、通过代码创建UIStackView
//创建UIStackView
UIStackView * stackView=[[UIStackView alloc] initWithArrangedSubviews:@[imageView1,imageView