自动布局

我们很高兴地宣布,「自动布局」现已在 MasterGo 中启用!

  • 按钮可以通过调整文本内容来控制整个按钮的大小;
  • 列表可以通过添删内容、调整内容顺序来重新排列布局;
  • 元素可以通过复杂的调整设置来响应布局容器

基本设置

我们希望把主轴方向、两轴对齐方式尽可能的融合到设计方案当中。 主轴方向(水平或垂直),主轴/交叉轴除了基本对齐方式(左/右/顶/底等对齐)外,还增加了复杂对齐方式:Space between、Space around、Space evenly。 这个方案在使用过程中发现了一些问题:

  • 首先,主轴和交叉轴的概念对于设计师来说理解起来比较困难;
  • 其次,复杂对齐方式无法通过简单几个字解释清楚,同时用户对复杂对齐方式会混淆,记不住对应的都是什么效果;
  • 单行/列模式下,交叉轴间距和交叉轴复杂对齐方式并没有实质性的设计场景。

根据上述问题进行逐一调整:

  • 主轴或交叉轴概念换成了水平排列和垂直排列,理解起来非常简单:以列排序还是以行排序;
  • 主轴对齐方式进行优化和调整,保留比较有特点的复杂对齐方式,减少使用上出现混淆的情况;
  • 移除交叉轴间距与其复杂对齐方式,设计场景不太多,设置了也没有实质的意义;
  • 图形化对齐方式操作,减少文字的表述,图标或许更直观。

最后我们针对对齐方式交互方式进行了调整,采用齐面板 + 对齐菜单的形式。这样可以减少用户在切换布局方式时产生疑惑,当我们开启分布式排列(Space between)时,对齐方式交互上会有较小的变化。 例如,水平布局开启分布式排列时,对齐面板将会改变,同时水平对齐方式变为自动且不可操作。

调整设置

调整设置,自动布局最强大的功能之一是它能够控制自动布局容器本身及其内部图层的尺寸,而两者相互有着非常强的依赖关系。 以「自动布局容器」为例。当它是水平布局,同时父级也是「自动布局容器」。那么它的调整设置就拥有三个选项:

  • 适应内容:将「自动布局容器」设置为「适应内容」,在遵循边距及间距规则的情况下,容器将保持尽可能小的尺寸包围其所有子图层;
  • 固定内容:当「自动布局容器」设置为「固定宽度或高度」时,容器尺寸的值将保持不变,同时子图层排列布局方式不被影响;
  • 充满容器:「自动布局容器」中设置为「充满容器」时,将拉伸到其父容器的宽度或高度。

我们设计调整设置方案时,同样采用了面板 + 菜单的形式(即调整面板 + 调整菜单),设计师通过点击面板或者点击菜单就可以切换宽度/高度的调整设置,每个选项会对应不同的展示效果,并配合动画效果,来帮助用户理解调整设置的作用。

「自动布局」是如何工作的

将「自动布局」添加到容器时,内部的图层彼此相邻(水平或垂直)排列。然后,容器的大小由容器中各个图层的总大小决定。自动布局容器可以具有边距,填充,描边和角半径,因此你可以创建按钮而无需添加其他图层。 自动布局按钮在编辑文本时,容器会自动调整大小。而且,如果你将一些按钮排列在一起,它们都会按照你的期望移动。 除了按钮之外,在使用重复的 UI 元素(如列表和菜单)创建设计时,「自动布局」非常有用。现在只需简单的拖放即可完成操作,而不是无数次单击以将图层移到正确的位置。

嵌套自动布局容器

通过嵌套自动布局容器,可以将这些单独的自动布局图层组合为完整的界面,其方式与 div 标签可以嵌套在 HTML 中的方式几乎相同。就像在生产环境中一样,你可以轻松地编辑内容并将内容移入或移出自动布局容器。 希望借助「自动布局」,我们可以在 MasterGo 中运用代码结构来设计界面,现在就可体验。