UIStackView的使用

一、UIStackView简介

UIStackView是iOS9中新增的API，类似于Android中的线性布局。UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图，你不用再添加自动布局的约束了。Stack View管理这些子视图的布局，并帮你自动布局约束。也就是说，这些子视图能够适应不同的屏幕尺寸。此外，你可以嵌入一个stack View到另一个stack view中来创建更为复杂的用户界面。不要误解我的意思，这并不意味着你就不需要处理自动布局了。你仍旧要定义一些布局约束来约束stack view。它只是帮你节约了为每个UI元素创建约束的时间，同时它更容易的从布局中添加/删除一个视图。

[图片上传中...(截屏2020-01-16下午4.08.36.png-fcd3df-1579162309216-0)]

截屏2020-01-16下午4.08.20.png

截屏2020-01-16下午4.08.36.png

实现像上面等宽、等间距的排布，如果你使用UIStackView那么只需要这样:

- (void)creaEqualViewWithCount:(NSInteger)count{
    UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.distribution =  UIStackViewDistributionFillEqually;
    containerView.spacing = 10;
    containerView.alignment = UIStackViewAlignmentFill;
    [self.view addSubview:containerView];
    for (int i=0; i

简简单单的几行就了事，甚是，对于嵌入到StackView的视图，你不用再添加自动布局的约束了。Stack View管理这些子视图的布局，并帮你自动布局约束。

二、入门学习

• axis:决定布局方向，水平或垂直；
• distribution:设置布局方向的布局方式；
• alignment:设置垂直于布局方向的方向的布局方式；
• spacing:使用该属性可以设置子视图的最小间距；

2.1、axis（ 排列方向）

UILayoutConstraintAxisHorizontal = 0,水平方向
UILayoutConstraintAxisVertical = 1，垂直方向

UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.spacing = 10;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable.text = @"33测试测试";
    [containerView addArrangedSubview:lable];
    
    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable1.translatesAutoresizingMaskIntoConstraints = NO;
    lable1.text = @"测试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];

 UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisVertical;
    containerView.spacing = 10;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable.text = @"33测试测试";
    [containerView addArrangedSubview:lable];
    
    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable1.translatesAutoresizingMaskIntoConstraints = NO;
    lable1.text = @"测试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];

2.2、distribution（布局方式）

UIStackViewDistributionFill = 0,//指定方向充满
UIStackViewDistributionFillEqually,//等item布局
UIStackViewDistributionFillProportionally,//该属性设置后会根据原先子视图的比例来拉伸或压缩子视图的宽或高
UIStackViewDistributionEqualSpacing,//所有子视图中间的间隔保持一致
UIStackViewDistributionEqualCentering//该属性是控制所有子视图的中心之间的距离保持一致

UIStackViewDistributionFill ：

- (void)viewDidLoad {
    [super viewDidLoad];
    UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.distribution = UIStackViewDistributionFill;
    containerView.spacing = 10;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    [[lable.heightAnchor constraintEqualToConstant:10]setActive:YES];
    lable.text = @"33测试测试";
    [containerView addArrangedSubview:lable];

    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable1.translatesAutoresizingMaskIntoConstraints = NO;
    lable1.text = @"测试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];
}

• 1、使线性排列的items按指定的方向填充整个UIStackView
• 2、只有alignment=UIStackViewAlignmentFill时，填充的方向就是横向和纵向，也就是填满整个UIStackView。其它的填充的方向就是所排列的方向。
• 3、默认alignment的值就是UIStackViewAlignmentFill
• 4、 当排列方向横向时，且alignment=UIStackViewAlignmentFill时 ,再去设置垂直方向上的约束是无效的。

    UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.distribution = UIStackViewDistributionFill;
    containerView.spacing = 10;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable.text = @"33测试";
    [containerView addArrangedSubview:lable];
    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable1.text = @"测试试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];

    UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.distribution = UIStackViewDistributionFill;
    containerView.spacing = 10;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable.text = @"33测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试试测试测试测试试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试试测试测试测试试测试测试测试";
    [containerView addArrangedSubview:lable];
    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
    lable1.text = @"测试试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];

• 5、当items自身超出UIStackView,或者没有充满UIStackView,items会自动根据约束的 compressionResistance 或者hugging属性进行调整压缩或者拉伸保证刚好充满。

   UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
   containerView.axis = UILayoutConstraintAxisHorizontal;
   containerView.distribution = UIStackViewDistributionFill;
   containerView.spacing = 10;
   UIView *view = [[UIView alloc] init];
   view.backgroundColor = [UIColor redColor];
   [containerView addArrangedSubview:view];
   [[view.widthAnchor constraintEqualToConstant:100]setActive:YES];
   UIView *view1 = [[UIView alloc] init];
   view1.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
   [containerView addArrangedSubview:view1];
   [self.view addSubview:containerView];

   UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.distribution = UIStackViewDistributionFill;
    containerView.spacing = 0;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor redColor];
    [lable setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    lable.text = @"33测试测试测试测试测试测试测试测测呃";
    [containerView addArrangedSubview:lable];
    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor greenColor];
    lable1.text = @"测试试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];}

2.3、alignment（垂直布局方向的布局方式）

UIStackViewAlignmentTop =UIStackViewAlignmentLeading//视图向上对齐
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing//视图向下对齐
UIStackViewAlignmentCenter//视图居中对齐
UIStackViewAlignmentFirstBaseline//根据上方基线布局所有子视图的y值
UIStackViewAlignmentLastBaseline//根据下方基线布局所有子视图的y值

    UIStackView *containerView = [[UIStackView alloc] initWithFrame:CGRectMake(0, 100, 375, 200)];
    containerView.axis = UILayoutConstraintAxisHorizontal;
    containerView.distribution =  UIStackViewDistributionFill;
    containerView.spacing = 0;
    containerView.alignment = UIStackViewAlignmentLeading;
    UILabel *lable = [[UILabel alloc] init];
    lable.backgroundColor = [UIColor redColor];
    lable.text = @"33测试测试试测试测测呃";
    [containerView addArrangedSubview:lable];
    UILabel *lable1 = [[UILabel alloc] init];
    lable1.backgroundColor = [UIColor greenColor];
    lable1.text = @"测试试";
    [containerView addArrangedSubview:lable1];
    [self.view addSubview:containerView];

三、实用

 UIStackView *containerView = [[UIStackView alloc] init];
     containerView.axis = UILayoutConstraintAxisHorizontal;
     containerView.distribution =   UIStackViewDistributionFillEqually;
     containerView.spacing = 10;
     [self.view addSubview:containerView];
     CGFloat screenWidth =[UIScreen mainScreen].bounds.size.width;
     double width = (screenWidth-30)/3;
        containerView.frame = CGRectMake(0, 100, screenWidth, width);
     for (int i=0; i<3; i++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor redColor];
        [containerView addArrangedSubview:view];
     }