xib相关（十五） —— UIStackView之工程实践（四）

版本记录

版本号	时间
V1.0	2018.04.29

前言

iOS中的视图加载可以有两种方式，一种是通过xib加载，另外一种就是通过纯代码加载。它们各有优点和好处，xib比较直观简单，代码比较灵活但是看着很多很乱，上一家公司主要风格就是用纯代码，这一家用的就是xib用的比较多。这几篇我们就详细的介绍一个xib相关知识。感兴趣的可以看上面写的几篇。
1. xib相关（一） —— 基本知识（一）
2. xib相关（二） —— 文件冲突问题（一）
3. xib相关（三） —— xib右侧标签介绍（一）
4. xib相关（四） —— 连线问题（一）
5. xib相关（五） —— 利用layout进行约束之界面（一）
6. xib相关（六） —— 利用layout进行约束之说明和注意事项（二）
7. xib相关（七） —— Storyboard中的segue （一）
8. xib相关（八） —— Size Classes（一）
9. xib相关（九） —— 几个IB修饰符（一）
10. xib相关（十） —— xib的国际化（一）
11. xib相关（十一） —— xib的高冷用法之修改视图的圆角半径、边框宽度和颜色（一）
12. xib相关（十二） —— UIStackView之基本介绍（一）
13. xib相关（十三） —— UIStackView之枚举UIStackViewDistribution使用（二）
14. xib相关（十四） —— UIStackView之UIStackViewAlignment使用（三）

回顾

上一篇主要介绍了UIStackView的对齐方式UIStackViewAlignment枚举，这一篇主要根据实际工程实践说明UIStackView的使用。

---

基础准备

理解几个属性

下面看一下基础准备。

• Axis表示Stack View的subview是水平排布还是垂直排布。
• Alignment控制subview对齐方式。
• Distribution定义subview的分布方式。
• Spacing 为subview间的最小间距。

你可这样理解：Alignment 用于控制X 和 Y值，而Distribution 用于控制高度和宽度。另两个值都会影响对齐。

区分两个概念

开始使用Stack View前，我们先看一下它的属性subViews和arrangedSubvies属性的不同。如果你想添加一个subview给Stack View管理，你应该调用addArrangedSubview:或insertArrangedSubview:atIndex:，arrangedSubviews数组是subviews属性的子集。

要移除Stack View管理的subview，需要调用removeArrangedSubview:和removeFromSuperview。移除arrangedSubview只是确保Stack View不再管理其约束，而非从视图层次结构中删除，理解这一点非常重要。

需要注意的是：调用removeFromSuperview是把subview从视图层级中移除。调用removeArrangedSubview只是告诉Stack View不再需要管理subview的约束。而subview会一直保持在视图层级结构中直到调用removeFromSuperview把它移除。

---

工程实践

关于stackview的工程实践，可以参考下面这两篇文章。

• iOS 9: Getting Started with UIStackView

• iOS 9: UIStackView入门

这篇根据那两篇的指引，做一个这方面的类似的实践例子。

1. 放入两个stackview

在xib中放入两个stackview，上边的是纵向的，下边的是横向的。

下面对这两个stackview进行配置。

垂直stackview

水平stackview

设置上面stackview的约束，如下所示：

接着，设置下面stackview的约束，如下所示：

设置好了下面我们就要往里面添加控件了。

2. 为上面的stackview添加控件

下面我们就为上面的stackview添加控件。从上往下一次放入UILabel、UIImageView和UIButton三个控件。

添加控件如下所示。

3. 增加星星

将addStar按钮和水平的stackview连线到view中，如下所示。

下面添加代码

- (IBAction)addStarButtonDidClick:(UIButton *)sender
{
    UIImageView *starImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"star1"]];
    [self.horizontalStackView addArrangedSubview:starImageView];
    [UIView animateWithDuration:0.25 animations:^{
        [self.horizontalStackView layoutIfNeeded];
    }];    
}

下面看一下运行效果

运行效果

可见下面的图片被拉伸了。

选择下面的Stack View，查看Attributes Inspector会看到问题所在。由于Alignment 和Distribution 都设置成了Fill，Stack View 拉伸了星星以适应其大小。

这在添加更多的星星的时候会引起更多问题。我们希望星星居中显示，而不是被拉伸来适应Stack View的宽度。

修改Alignment 的值为Center ，修改Distribution 的值为Fill Equally。

所以进行如下设置

并添加一句代码

starImageView.contentMode = UIViewContentModeScaleAspectFit;

下面我们看一下实际效果

可以看见实现了自动布局。

4. 减少星星

下面我们就看一下减少星星。

首先这里涉及到一个stackview的嵌套，上面的垂直的stackview里面只有addStar一个按钮，这里我们需要在垂直stackview里面，嵌套一个水平的stackview，并将addStar和removeStar放在里面。

具体配置如下所示。

下面配置新的stackview如下

下面将Remove Star！按钮进行连线，并添加代码。

- (IBAction)removeStarButtonDidClick:(UIButton *)sender
{
    UIImageView *starImageView = self.horizontalStackView.arrangedSubviews.lastObject;
    [self.horizontalStackView removeArrangedSubview:starImageView];
    [starImageView removeFromSuperview];
    [UIView animateWithDuration:0.25 animations:^{
        [self.horizontalStackView layoutIfNeeded];
    }];
}

运行可以查看效果

可见，这就实现了简单的视图自动布局。

后记

本篇主要介绍了UIStackView一个简单示例，感兴趣的给个赞或者关注~~~