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模式)

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

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第1张图片

实例展示

1. 垂直的stack

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

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第2张图片

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

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

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第3张图片

下面就看一下几种效果。

Leading

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第4张图片
Leading

Fill

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第5张图片
Fill

Center

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第6张图片
Center

Trailing

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第7张图片
Trailing

2. 水平的stack

还是先给stack设置约束

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第8张图片

然后设置蓝色视图的约束

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第9张图片

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

Fill

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第10张图片
Fill

Top

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第11张图片
Top

Center

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第12张图片
Center

Bottom

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第13张图片
Bottom

后记

主要介绍stackview的对齐方式Alignment,感兴趣的给个赞或者关注~~~~

xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三)_第14张图片

你可能感兴趣的:(xib相关(十四) —— UIStackView之UIStackViewAlignment使用(三))