Dorado 9 : 表单式布局(sample-center)

表单式布局就等同于HTML中的Table布局,如果你熟悉<table></table>标记,那可能以下所有的内容都是废话,但是如果你不熟悉在了解和掌握表单式布局后也请建议你抽空了解一下<Table>这个HTML标记。

由于采用Table布局,则表单式布局的灵活性与局限性与Table布局是一样的。

如下的一个页面:

这是一个采用表单式布局的典型页面,在表单式布局中行和列都有固定的数量,如上图我们很轻易的就可以区分出该布局一共有四列:

只是有的元素会横跨多个列,在表单式布局中一个表单布局有多少个列是通过布局控件的cols属性定义的,如下图:

cols范例:

  • 100,200,300,400:共分四列,第一列100像素,第二列200像素,第三列300像素,第四列400像素
  • 200,300,300:共分三列,第一列200像素,第二列300像素,第三列300像素

另外cols属性还支持宽度自适应设定,如:

  • 300,*:表示共分两列,第一列300像素,第二列表示容器刨去第一列后的剩余空间
  • 120,*,120,*:表示共分四列,第一列120像素,第二列自适应,第三列120像素,第四列自适应。
  • /*,/*:表示共分两列,各占50%的空间

"*"这种设计方式,在页面的大小发生变化会自动适应屏幕的变化,从而在不同分辨率或屏幕大小不同情况下有一致的用户体验。

另外在容器内部的控件,默认情况下之占据容器内部表单布局中的一个单元格,但是我们也可以通过其rowSpan和colSpan属性使的某一个控件可以占据表单时布局中的多行或多列,如下图的几个控件:

IDE中rowSpan和colSpan属性的设计视图如下(注意切换到LayoutConstraint标签):