xib相关（十四） —— UIStackView之UIStackViewAlignment使用（三）

版本记录

版本号	时间
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使用（二）

UIStackViewAlignment - API

/* Alignment—the layout transverse to the stacking axis.
 */
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
    /* Align the leading and trailing edges of vertically stacked items
     or the top and bottom edges of horizontally stacked items tightly to the container.
     */
    UIStackViewAlignmentFill,
    
    /* Align the leading edges of vertically stacked items
     or the top edges of horizontally stacked items tightly to the relevant edge
     of the container
     */
    UIStackViewAlignmentLeading,
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
    UIStackViewAlignmentFirstBaseline, // Valid for horizontal axis only
    
    /* Center the items in a vertical stack horizontally
     or the items in a horizontal stack vertically
     */
    UIStackViewAlignmentCenter,
    
    /* Align the trailing edges of vertically stacked items
     or the bottom edges of horizontally stacked items tightly to the relevant
     edge of the container
     */
    UIStackViewAlignmentTrailing,
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
    UIStackViewAlignmentLastBaseline, // Valid for horizontal axis only
} NS_ENUM_AVAILABLE_IOS(9_0);

详细解析

该枚举的作用就是对齐 - 横向于堆轴的布局，下面我们就详细的看一下这个枚举。

1. UIStackViewAlignmentFill

Align the leading and trailing edges of vertically stacked items or the top and bottom edges of horizontally stacked items tightly to the container

将垂直的stack item的边缘左边和右边对齐，或者水平的stack item的顶部或者底部边缘对齐。

可以理解为视图的纵向填充。

2. UIStackViewAlignmentLeading

Align the leading edges of vertically stacked items
or the top edges of horizontally stacked items tightly to the relevant edge of the container

将垂直stack item的前缘或水平stack item的顶部边缘紧紧对准容器的相关边缘。

3. UIStackViewAlignmentTop = UIStackViewAlignmentLeading

视图向上对齐，可以理解为Horizontal模式。

4. UIStackViewAlignmentFirstBaseline

根据上方基线布局所有子视图的y值(适用于Horizontal模式)。

5. UIStackViewAlignmentCenter

Center the items in a vertical stack horizontally or the items in a horizontal stack vertically

在垂直的stack中中心对齐item，或者在水平stack中中心对齐item。

可以理解为视图的居中对齐。

6. UIStackViewAlignmentTrailing

Align the trailing edges of vertically stacked items or the bottom edges of horizontally stacked items tightly to the relevant edge of the container

将垂直stack items的尾部边缘或者水平stack items的底部边缘与容器的相关边缘紧密。

7. UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing

视图向左对齐(适用于Vertical模式)

8. UIStackViewAlignmentLastBaseline

根据下方基线布局所有子视图的y值(适用于Horizontal模式)

结合下图，应该更容易理解下。

实例展示

1. 垂直的stack

首先我们给垂直的stack设置约束，如下所示。

让stackview距离上下左右距离都是20。

接着设置上面红色view的布局

下面就看一下几种效果。

Leading

Leading

Fill

Fill

Center

Center

Trailing

Trailing

2. 水平的stack

还是先给stack设置约束

然后设置蓝色视图的约束

下面我们就看一下几种对齐方式的效果。