设计师不应该花太多的时间在排版上。
但是，修改按钮文字要排版、调整顺序要排版、适配多种屏幕要排版......设计师们不是在排版就是在排版的路上.......
想让排版这件事变得更轻松？一定要试试 MasterGo 自动布局功能。
从简短的文字描述，没 Get 到有啥好处？
那么，我们具体点儿，先举几个例子，看看他到底能做啥！
自动变化宽度的按钮
以往设计一个按钮时，当文字长度发生变化，需要手动重新调整按钮的宽高尺寸。
而添加了自动布局后，修改按钮内的文字时，按钮会自动跟随文字长短变化宽高。
任意增减内容的表格
B 端设计师会经常遇到表格设计需求，做好表格后，有时会需要增加或者删除某一行，或者调整某一行的顺序，以往只能手动挪动多行来变更层级顺序，增删之后还需要重新调整表格高度。
添加自动布局后，增加、删除某行时，表格会自动调整尺寸。想要改变表格中某行的顺序，只需按方向键上、下移动某行就搞定了。
懂你心意的神奇卡片
卡片是设计中经常会遇到的组件，通常情况下，卡片内容需要是随卡片宽度的变化调整，这样才能更好地适配跨设备的不同屏幕。
添加了自动布局后，不需要为不同屏幕尺寸设计不同的卡片样式，拉伸容器就能让它跟随你的心意变化。
人人都会自动布局
自动布局看起来很复杂，其实明白了其中原理，用起来会非常简单高效。下面通过 4 个操作步骤，带领大家一起体验自动魔法的奥秘。
➜ 快速创建自动布局
MasterGo 设计模式下，选择一个容器或者多个图层后，你有三种方式可以创建自动布局容器。
- 点击右侧属性面板中自动布局的“ + ”
- 右键菜单列表中选择“添加自动布局”
- 或者使用快捷键 Shift + A
另外，如下图演示的一样，选择多个图层添加自动布局时，会自动将这些图层按照水平或垂直方向对齐排列。
一个小Tip
自动布局有水平、垂直两个布局选项，但一个自动布局容器只能添加一个布局方向。
所以，在添加自动布局之时，我们还需要根据目标对象的特点想清楚排列方向。
➜ 调整间距和边距
自动布局容器内，图层与图层之间的距离称为间距，图层与容器边框之间的距离称为边距。我们可以在画布中或者自动布局面板中调整自动布局内图层间的距离。
如何在右侧面板处修改间距/边距？
在右侧栏自动布局面板中，我们可以手动修改或直接按住间距图标左右拖动调整【间距】【上下边距】【左右边距】的数值，让容器内所有小框按照你希望的间距排列。
另外，点击【展开】图标还可以逐一调整容器与内部元素的上、下、左、右边距，满足不同调整需求。
在右侧面板中，你还可以使用快捷键，同时调整四边边距。
按住 Command 键再单击任一边距输入框，会变成一个同时修改四边边距的框，可以同时调整四边边距
如何在画布上修改间距/边距？
选中一个自动布局时，在画布中可以很直观地看到间距和边距的调节手柄，拖动手柄就可以快速调节间距和边距了。当然，也可以像在右侧属性面板上的操作一样，点击手柄即可输入数值来精确控制自动布局内图层之间的距离。
一个小 Tip
间距可以为负数，此时图层之间会形成堆叠效果。
在画布中，还有两个可以快速调整边距的快捷键，快去试试吧～
按住 Option（Alt） 键并拖动手柄或单击边距区域，可以同时修改水平或垂直边距。
按住 Shift + Option（Alt） 键，拖动手柄或单击边距区域，可以同时修改四边边距。
➜ 设置对齐方式
自动布局提供了多种对齐的方式，更改对齐方式，可以改变这些图层在自动布局内的位置。
选中自动布局容器时，在对齐面板中选择对齐方式，自动布局内的所有子图层会按照所选方式进行对齐。
➜ 熟记增/删/调整顺序快捷键
增加 可以通过快捷键 Command + D 来复制子图层
删除 通过 Delete 键来删除一个子图层
调整顺序 通过方向键来快速调整图层的顺序
高手之路
通过上面 4 个步骤，我们已经了解自动布局的基础操作，可以满足一些简单的响应式效果。
但是，想要实现更复杂的整体界面自动响应的效果，还需要我们进一步掌握调整大小的组合技，嵌套容器大法等技巧，实现更高阶的自动魔法。
这里，我们列了 5 个进阶技巧，帮助大家玩转酷炫的响应式设计，一起来看看吧～
调整大小，响应式的开始
调整大小决定了自动布局如何响应内容大小的变化，在宽高属性的下方，可以分别设置水平和垂直的响应方式。响应方式分为三种：适应内容，充满容器，固定宽高。
适应 自动布局容器的宽和高都可以设置为「适应」，当选择适应时，容器会随子图层大小发生变化
固定 可以固定自动布局容器的宽、高，也可以固定内部元素的宽、高。
- 固定容器的宽高后，调整内部元素的宽、高，容器不会跟随变化。
- 同理，当将内部元素的宽、高设置为固定时，调整外部容器，内部元素不会跟随变化。
充满 子图层的宽度和高度都可以设置为“充满”，当父级容器大小发生变化时，子图层会充满容器以适应它的变化。
通过自动布局调整大小的设置，可以快速创建响应式设计，确保文本、按钮和图片都响应其组件的宽度或高度。
嵌套自动布局，成为高手
由于每个自动布局容器只支持一个布局方向。如果你需要构建既有水平又有垂直方向的完整界面，可以将他们组合嵌套在一起。
比如，下方的专属歌单，歌曲列表中的每一行都是一个水平排列的自动布局，它们嵌套在一个垂直排列的自动布局容器内。
MasterGo 支持嵌套多个自动布局容器来创建响应式界面，从而创建出更加灵活的组件。
你可以轻松地编辑、添加、删除内容，也可以对每一个自动布局的容器和子图层设置调整大小的适应方式，从而让它做出你想要的响应效果。
分布式开关，小功能，大作用
在自动布局面板中，有这样的一个小开关，叫“分布式排列”，它可以控制自动布局容器内图层之间的间距。
当开启“分布式排列”后，自动布局会自动计算图层间的距离，使它们平均分布。用好这个功能，可以快速实现很多意想不到的设计效果。
MasterGo 支持 6 种分布式排列方式
水平布局状态下，可以选择上、中、下三种分布式排列方式，横向拉伸和收缩容器时，元素间距自动跟随调整。
垂直布局状态下，可以选择左、中、右三种分布式排列方式，纵向拉动容器，平均分布的元素会跟随容器尺寸变动调整间距。
绝对定位，一键摆脱约束
我们无法自由控制自动布局容器内图层的位置。但是在某些场景下，我们需要让容器内的元素脱离自动布局约束的限制，移动到特定位置，绝对定位可以帮我们解决这个问题。
以上图中的小红点为例，当选中红点时，点击属性面板中的绝对定位开关，此时红点可以自由地移动，这样我们就可以把它移动到图标的右上角了。
堆叠顺序，让图像堆叠更简单
前面有提到，当间距为负数时，子图层之间会形成堆叠效果。但有时候堆叠的顺序不是我们想要的效果，这时候你可以在自动布局设置中改变堆叠的样式，让第一个元素在最上面或者让最后一个元素在最上面。
以上就是本期 MasterGo 功能研习社的内容，这么多关于自动布局的使用方法和技巧，你都学到了吗？
