天天看点

iOS9新特性——堆叠视图UIStackView(二)

四、再来深入理解下UIStackView

       通过上面的介绍,我们已经基本了解了StackView的使用和特点,下面我们再来仔细介绍一下与其相关的属性和方法的使用,使我们能够更加得心应手。

有关被管理视图的添加与移除:

//初始化方法,通过数组传入被管理的视图

- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;

//获取被管理的所有视图

@property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;

//添加一个视图进行管理

- (void)addArrangedSubview:(UIView *)view;

//移除一个被管理的视图

- (void)removeArrangedSubview:(UIView *)view;

//在指定位置插入一个被管理的视图

- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

与StackView布局设置相关:

1.布局模式:

@property(nonatomic) UILayoutConstraintAxis axis;

上面这个属性用于设置布局的模型,枚举如下:

//stackView只有两种布局模式 水平和竖直

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {

   //水平布局

   UILayoutConstraintAxisHorizontal = 0,

   //竖直布局

   UILayoutConstraintAxisVertical = 1

};

2.对齐模式:

@property(nonatomic) UIStackViewAlignment alignment;

这个属性用于设置控件的对其模式,枚举如下:

typedef NS_ENUM(NSInteger, UIStackViewAlignment) {

  //水平布局时为高度充满,竖直布局时为宽度充满

   UIStackViewAlignmentFill,

   //前边对其

   UIStackViewAlignmentLeading,

   //顶部对其

   UIStackViewAlignmentTop = UIStackViewAlignmentLeading,

   //第一个控件文字的基线对其 水平布局有效

   UIStackViewAlignmentFirstBaseline,

   //中心对其

   UIStackViewAlignmentCenter,

   //后边对其

   UIStackViewAlignmentTrailing,

   //底部对其

   UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,

   //基线对其,水平布局有效

   UIStackViewAlignmentLastBaseline,

} NS_ENUM_AVAILABLE_IOS(9_0);

在上面的例子中,我们设置了对其方式为充满,这样的话,我们就不需要再做过多控件尺寸的约束,如果我们被管理的控件高度或者宽度不一,我们可以设置中心对其,这样的话,我们还需要为每个控件添加一个宽度或者高度的约束,如下:

   NSMutableArray * array = [[NSMutableArray alloc]init];

   for (int i =0 ; i<5; i++) {

       UIView * view = [[UIView alloc]init];

       view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];

       float height = arc4random()%90+10;

       [view mas_makeConstraints:^(MASConstraintMaker *make) {

           make.height.equalTo([NSNumber numberWithFloat:height]);

       }];

       [array addObject:view];

   }

   stackView = [[UIStackView alloc]initWithArrangedSubviews:array];

   [self.view addSubview:stackView];

   [stackView mas_makeConstraints:^(MASConstraintMaker *make) {

       make.centerX.equalTo(self.view.mas_centerX);

       make.centerY.equalTo(self.view.mas_centerY);

       make.leading.equalTo(self.view.mas_leading).offset(20);

       make.trailing.equalTo(self.view.mas_trailing).offset(-20);

       make.size.height.equalTo(@100);

   }];

   stackView.axis = UILayoutConstraintAxisHorizontal;

   stackView.distribution = UIStackViewDistributionFillEqually;

   stackView.alignment = UIStackViewAlignmentCenter;

效果如下:

iOS9新特性——堆叠视图UIStackView(二)

这样,参差不齐的控件布局我们也可以轻松完成。

3.排列方式

@property(nonatomic) UIStackViewDistribution distribution;

排列方式的枚举如下:

typedef NS_ENUM(NSInteger, UIStackViewDistribution) {

   //充满,当只有一个控件时可以使用

   UIStackViewDistributionFill = 0,

   //平分充满,每个控件占据相同尺寸排列充满

   UIStackViewDistributionFillEqually,

   //会优先按照约束的尺寸进行排列,如果没有充满,会拉伸最后一个排列的控件充满

   UIStackViewDistributionFillProportionally,

   //等间距排列

   UIStackViewDistributionEqualSpacing,

   //中心距离相等

   UIStackViewDistributionEqualCentering,

注意,除了我们选择fill属性时不需约束控件视图的尺寸,其他都需要进行约束,例如如果我们选择等间距,我把改成如下代码:

    [view mas_makeConstraints:^(MASConstraintMaker *make) {

           make.width.equalTo(@50);

    stackView.distribution = UIStackViewDistributionEqualSpacing;

iOS9新特性——堆叠视图UIStackView(二)

4.其他

//设置最小间距

@property(nonatomic) CGFloat spacing;

//设置布局时是否参照基线

@property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;

//设置布局时是否以控件的LayoutMargins为标准,默认为NO,是以控件的bounds为标准

@property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;

五、UIStackView的嵌套

       一个StackView不允许我们进行水平和竖直的交叉布局,但是我们可以通过嵌套的方式来实现复杂的布局效果,比如我们实现一个类似电影表标签,可以使用水平布局的StackView中嵌套一个竖直布局的StackView:

iOS9新特性——堆叠视图UIStackView(二)

十分轻松就可以实现如下的效果:

iOS9新特性——堆叠视图UIStackView(二)

看到了吧,通过StackView,我们没有添加过多的约束,使我们布局起来更加轻松了。如果你常常使用storyBoard进行开发,还有一个小技巧可以方便的将两个控件整合到一个StackView中,按住command,选中两个控件,之后点击右下角的如下图标,系统会自动帮我们生成一个StackView,将选中的两个控件整合进去,很酷吧!

继续阅读