教程 > 特色功能 > 自动布局

自动布局

自动布局可以作用于任意容器或图层。可以减少间距计算、元素对齐调整的重复工作。

如何开启/关闭自动布局

选中需要开启/关闭自动布局的对象,可以通过属性面板、右键菜单、快捷键“Shift+A/Alt+Shift+A”开启/关闭自动布局。
  • 一般在选中单个容器、多个层级相同的图层时,可以直接在右侧属性面板开启。

  • 其它情况右侧属性面板没有入口。

自动布局属性介绍

排列方向

使当前容器内的图层呈水平排列/换行或垂直排列/换列:添加、删除图层时也将遵循该排列方向。

分布方式

开启分布方式时,容器内的图层将视作一个整体,参照容器自动调整位置。双击分布方式的九宫格,可以切换间距模式为堆叠或填充整行/列。

图层间距

自动布局内各图层之间的距离,可以在右侧属性面板设置,也可以在工作区使用鼠标拖拽调节。

容器内边距

容器的固定内边距,会影响自动布局方向和分布方式的生效范围,支持统一设置内边距或分别设置独立距离:
  • 统一设置内边距:输入1个数字(两侧内边距相同)或2个数字(英文逗号分开,两侧内边距不同)    

  • 独立距离:单独设置容器的固定内边距

高级设置

可设置自动布局的堆叠方向:可以选择最后一个图层显示在最上面还是最下面。

响应方式

响应方式决定了自动布局如何响应内容和大小的变化,还可分别调整水平(宽度) 和垂直(高度) 的响应方式。 响应功能位于属性面板宽高属性下方,可以分别设置父级容器和容器内子元素的响应方式。

父级容器的响应方式

添加自动布局属性的容器,空间属性新增宽高响应模式:
  • 固定宽度/高度:容器尺寸固定,不受内容尺寸影响。    

  • 适应内容:根据容器内图层的位置和大小,自动调整宽度和高度。

子元素的响应方式

1. 正常情况下,自动布局容器内的子元素,空间属性有两种宽高响应模式:
  • 固定宽度/高度:元素宽高固定,不受父级容器尺寸影响。

  • 填充容器:子元素宽高会自动调整,使整体内容自动填充容器内的可用空间。多个子元素都设置了填充容器时,会均分空间。

2. 子元素为自动布局容器/文本图层,既可以对子元素进行响应,又可以对父容器进行响应,响应方式各有三种:
  • 比普通子元素多了“适应内容”

绝对定位

子元素的绝对定位: 选中自动布局容器内的子元素,可以在宽高属性右侧开启“绝对定位”,开启后,子元素在容器内的位置会始终固定,不会受到自动布局设置和容器/其它元素响应方式设置的影响:
  • 该元素根据当前的堆叠规则重新调整层级,置于视觉上的最上层,可以在图层树手动调整元素层级

  • 该元素不能再设置响应方式

  • 可以手动调整该元素的坐标

  • 容器内剩余子元素需重新计算位置

  • 绝对定位的子元素可以进行约束设置


上一章节 字体管理
下一章节 切换团队