Sailing - 备忘 - UI组件布局算法调整

Sailing

grid

现有的UI布局算法建立在基于行列的grid概念之上, grid的概念解决了"组件对齐"这一数据密集型表单最头痛的问题.

行优先流式布局

在grid的基础上, 采用行优先的流式布局. 这一设计的最初目的是为今后的响应式做准备, 但在实际使用过程中发现这种算法会给设计时UI布局造成很大的困扰, 并且如果需要空出某个格子也需要引入额外的empty元素.

绝对定位

要解决这个问题, 需要在保留grid概念的基础上, 使用基于行列的绝对定位算法.
采用绝对定位后, 设计时会变得十分直观. 但也会出现组件遮盖, runtime无法调整组件尺寸等问题.
另外绝对定位也会使得响应式设计变得困难.

绝对定位+行调整

绝对定位的组件遮盖问题, 可以通过设计时的调整来解决; 但动态调整尺寸的时候, 必须引入一个定位调整算法来防止布局空白或者组件遮盖.
正在调整尺寸的组件本身是不适合调整定位的, 那么只能调整周边组件.
因为grid确定了列数, 而纵向是开放的, 因此runtime调整尺寸也需要限制只能调整行数. 从实际需要动态调整尺寸的场景(主要就是一组相关表单字段的展开/折叠)来说, 这个限制也是合理的.

当组件的行数变大后, 把被遮盖组件给挤开.
被遮盖组件向下挤之后, 可以进一步遮盖其他组件, 导致连锁调整, 但整个调整的结果应该保持相对顺序不变.

当组件函数变小后, 位于下面的组件需要能够上移填补空白.

由于存在占用多列的组件, 当这些组件扩大或者缩小后, 会引起其他列的调整. 调整策略有很多种,

• 一种算法上相对简单的策略是:
  
  • 组件扩大后, 所属容器中该组件之下整行下移;
  • 组件缩小后, 所属容器中该组件缩小后, 如果整行空出, 那么删除该行.
  • 为了兼容原来的做法, 没有设定定位的组件, 按行优先的流式布局算法排到前一个组件的后面.
• 一种理解上更加接近物理世界的策略是将组件看成矩形积木, 某个积木变大后, 按照物理规律向下挤压其他组件:
  
  • 组件扩大后, 如果额外占据了空白区域, 那么什么也不发生; 如果覆盖了其他组件, 则被覆盖组件向下移动, 如果进一步覆盖了其他组件, 也依次类推.
  • 组件缩小后, 如果留出的区域去掉整行空白.

目前采用第二种策略.