图层布局设置

图层测距

支持使用图层测距的对象：

• 矢量形状和路径
• 文字图层
• 画板
• 组件
• 实例
• 组合
• 参考线

测量距离

测量互相独立、嵌套在画板、组合或组件中的对象之间的距离，

使用方法：

• 选择画布中的第一个对象
• 按住修饰键：
• Windows：Alt
• macOS：⌥ Option
• 将鼠标悬停在第二个对象上。
• Pixso将在两个对象之间显示水平、垂直红色测量参考线，并显示相对距离测量值。

测量嵌套层之间的距离

使用方法：

• 选择嵌套图层任意层级对象。
• 按住修饰键：
• Windows：Ctrl + Alt
• macOS：⌘ Command + ⌥ Option
• 将鼠标悬停在嵌套图层第二个对象上。
• Pixso将在两个对象之间显示上、下、左、右四条测量红色参考线和对应的测量值。

自动布局

自动布局是您可以添加到画板和组件的属性。通过自动布局功能，您创建的元素会随着内容的变化按照可自定义的规则进行自适应排版。例如：在您进行添加新图层、修改元素尺寸、文本内容等修改时，当前使用自动布局的组合内的元素能够时刻保持对齐。

有很多场景可以使用自动布局：

• 创建在编辑文本标签时会增大或缩小的按钮；
• 构建适应项目添加、删除或隐藏的列表；
• 结合自动布局框架来创建完整的界面。

添加自动布局

仅画板支持自动布局，若选取的图层中没有画板，则会自动创建包含所选内容的画板，并进行自动布局。

您可以选中以下对象创建自动布局：

• 新的或空的画板；
• 现有内容的画板；
• 组件和组件集；
• 图层或对象的组合。
• 添加自动布局的方式：
• 使用键盘快捷键 Shift + A；
• 在右侧边栏中，单击选择自动布局中的加号；

• 右键单击画板或对象并选择添加自动布局。

自动布局属性

具有自动布局的画板与常规画板具有不同的属性，当您应用自动布局时，您可以在右侧自动布局模块中调整布局模式以及属性值。

属性说明：

1、自动布局仅支持一个方向的布局自动化，水平或垂直，若需要两个方向的设计，可以嵌套使用自动布局

2、根据自动布局方向设置的不同，可以调整不同方向上自动布局对象间的间距

3、可以调整对象到自动布局画板间的边距距离，当四个方向的距离一致时，显示绝对的数值，当距离不一致时，显示混合。点击独立边距按钮，可以对四个方向上的数值进行单独调整。

调整边距后，自动布局的画板将随内部元素的变化而自动扩展画板大小

4、分布方式及对齐

集中分布：根据用户输入的间距值进行排列

对齐位置：左上、顶部中心、右上、中左、中心、中右、左下、底部中心、右下

均匀分布：自动间距，将画板内的对象按照画板大小均匀分配间距，自动调整

对齐位置：根据自动布局方向的不同，有不同的选项

• 垂直自动布局：左、中、右
• 水平自动布局：顶部、中心、底部

5、自动布局中的约束分为自动布局画板的约束和自动布局内对象的约束

• 自动布局画板的约束
• 自动布局内对象的约束

6、自动布局画板暂不支持以下操作：

• 将布局网格添加到该画板
• 将约束应用于自动布局画板内的任何对象
• 对画板内的任何对象使用智能选择

自动布局换行

除了垂直和水平方向，我们新增了自动布局换行布局，支持将内容换行到新行

在这里，您可以指定要应用的水平和垂直间隙。

当图层应用换行布局之后，默认垂直间距和水平间距相同，可通过在间距处输入自动，或者双击右侧来实现间距。

智能排列

智能选择可让您快速调整两个或多个图层选择之间的排列或间距。使用智能选择：

• 统一调整图层之间的垂直和水平间距
• 从选择的图层创建均匀或非均匀网格
• 在行、列或网格布局中重新排列或重新排序图层
• 从选择中复制或删除图层并让其他图层重排
• 智能选择减少了对繁琐重复任务的需求，节省您的时间并让您更快地构建和安排布局。

进行智能选择

要进行智能选择，所有图层之间的距离必须相等，并且在 x 轴或 y 轴或两者上重叠。如果图层之间的距离不相等，您可以使用整理工具重新排列图层并创建智能选区。

智能选择支持一维和二维方向的设置，一维智能选择可以在列或行进行排列。二维智能选择可以在行和列进行排列，例如以网格或表格形式排列的图层。

1、选择您想要包含在智能选择中的任何图层，图层不需要具有相同的大小或形状。您可以选择单个图层、组合、画板或组件。

2、Pixso为您在画布上的选择添加智能手柄，每个不同的物体的中心都有一个粉红色的环。

3、当您将鼠标悬停在智能选择上时，每个图层之间会出现额外的粉红色手柄。这些手柄允许您调整图层之间的垂直或水平间距。

在智能选择中调整图层

做出选择后，您可以对选择中的各个图层进行更改。这允许您移动、添加或删除图层，而无需离开选择。

• 调整间距
• 移动或重新排序
• 复制图层
• 调整图层大小
• 删除图层

您可以通过标记来选择要调整的选区中的哪些图层。标记图层的智能手柄是一个纯粉色圆圈。

1、调整间距

调整选择中图层之间的垂直或水平间距。您可以使用智能手柄调整画布上的间距，或使用右侧边栏中的字段间距：

• 使用画布中的手柄，可以拖动调整间距

• 从右侧面板中调整属性值

2、重新排序或重新排列图层

您还可以更改图层在智能选择中出现的顺序或位置：

• 单击图层中心的粉红色环进行标记；
• 将其拖动到选择中的另一个位置；
• 释放以确认图层的新位置，调整后将保持排列状态。

3、复制图层

您可以在智能选择中创建任何图层的副本

• 单击图层中心的粉红色手柄以标记它；
• 使用键盘快捷键：
• MacOS：Command + D
• Windows：Ctrl + D；
• 复制图层并将其粘贴到原始图层旁边,智能选择中的其他图层将移动以适应它。

4、调整图层大小

智能选择可让您调整选择范围内的图层大小，同时保持图层之间的相等距离。

5、删除图层

您还可以删除智能选择中的单个图层：

• 单击图层中心的粉红色手柄以标记它；
• 按键盘上的 Delete 或 Backspace 键删除标记的图层；
• 选择中的其他图层将重新排列以填充创建的间隙。

标尺

当您尝试在设计中精确定位图层或对象时，可以通过标尺辅助定位。

添加标尺

您首先需要确保标尺为“打开”状态，若标尺未在画布上显示，可以使用 Shift + R 快速打开，或者在菜单中选择标尺。

从左侧或顶部的标尺处，按住鼠标左键并向画布的方向进行拖拽，在指定位置松开鼠标，可以在画布或画板中创建标尺。

标尺可以添加到画板中。

删除标尺

除了单击并将指南拖回标尺之外，还可以通过选中标尺线，并按 Delete 键或 Backspace 键。

布局网格

什么是布局网格

布局网格帮助我们对齐画板内的对象，它们为我们的设计提供视觉结构，它们帮助我们的设计在不同的平台和设备上保持逻辑和一致。

布局网格不依赖于像素网格，这意味着它们不依赖于特定的分辨率或尺寸。

您只能将布局网格应用于画板，这可以是顶级画板，也可以是嵌套在另一个画板中的画板。

你可以使用布局网格进行：

• 跨多个平台建立一致性。
• 在定义布局时少做决定。
• 减少为模型或线框定义布局所花费的时间。
• 支持多种布局技术，如画廊、图标或整个页面布局。
• 使用布局网格的方法：选中画板或组件，点击右侧面板中布局网格中的加号，创建布局网格。
• 可以创建多个布局网格，以实现多维度的结构设计。

布局网格属性

共支持设置三种布局网格的属性：网格、行、列

• 使用网格时，可以设置网格的间隙及网格的颜色

• 使用列或行时，可以设置行或列的数量、类型、宽度、边距、间距。
• 可以设置的类型：左侧、右侧、中间、拉伸，使用拉伸时，可以根据边距和间距规则，自动将画板铺满。类型的设置通常与画板中对象的约束方式搭配使用。

设置布局网格可见性

使用键盘快捷键，可以设置布局网格的可见性：

macOS：Command + G

Windows：Ctrl + Shift + 4

布局约束

约束方式决定当调整他们大小时应该如何相应。

水平约束

当您沿 x 轴调整画板的大小时，水平约束定义了图层的行为方式：

• 左保持图层的位置，相对于画板的左侧；
• 保持图层相对于画板右侧的位置；
• 左右两侧保持图层相对于画板两侧的大小。这可能会导致图层在调整大小时沿 x 轴增长或缩小；
• 居中保持图层的位置，相对于画板的水平中心；
• 缩放会将图层的大小和位置定义为画板尺寸的百分比。然后，它会在您调整大小时保持这些比例。

垂直约束

当您沿 y 轴调整画板大小时，垂直约束定义了层的行为方式：

• 上保持图层相对于画板顶部的位置；
• 下保持图层相对于画板底部的位置；
• 上下左右保持图层相对于画板顶部和底部的大小。这可能会导致图层在调整大小时沿 y 轴增长或缩小；
• 居中保持图层的位置，相对于画板的垂直中心；
• 比例将定义图层的大小和位置为画板尺寸的百分比。然后，它会在您调整大小时保持这些比例。

约束的使用

您可以将约束应用于画板内的任何层。无法对画板外的图层或自动布局画板中的图层应用约束。

• 您还可以对嵌套在其他画板中的画板应用约束；
• 您可以对图层应用水平和垂直约束；
• 您不能将约束应用于组合。

要为图层设置约束：

• 选择画板内的图层或父级，画布上的蓝色虚线显示当前应用了哪些约束：

• 在属性面板的约束设置中调整垂直和水平约束。

• 使用下拉菜单设置图层的约束。
• 或者单击交互式图表中的线条来选择一个约束。

• 如果您希望图层保持在同一位置，即使在滚动时，请选中滚动时保持固定旁边的框。

忽略约束

有时您可能想要调整画板或图层的大小，而不使用应用到它的约束。您可以通过按住快捷键暂时忽略应用到图层的任何约束。

• macOS：调整大小时按住 Command；
• Windows：调整大小时按住 Ctrl。