在SOUI中使用网格布局

在实现网格布局前，SOUI支持两种布局形式：相对布局，和线性布局，其中线性布局是2017年2月份才支持的布局。

这两年工作都在Android这里，Android里有号称5大布局（RelativeLayout, LinearLayout, FrameLayout, GridLayout，TableLayout)。

FrameLayout很简单，在SOUI里一般用TabCtrl就实现了。RelativeLayout和SOUI自己的相对布局功能类似，线性布局也有了，但是一直没有实现GridLayout（TableLayout和GridLayout类似）。

之所以没有做GridLayout，主要是觉得组合SOUI现有的布局功能可以模拟出GridLayout的效果，哲学说：如无必要，勿增实体。

前几天群里有人问做一个行列对齐的布局在SOUI里要怎么实现。我回答说用线性布局去组合。

后来认真想了想，虽然线性布局组合可以勉强达到效果，但是布局写起来还是会很难看，这时候我才感觉到了实现一个GridLayout的必要性。

好在SOUI的布局系统经过前一段时间的重构已经能够很容易的扩展，要实现一个GridLayout也不是什么困难的事。

经过近一周的打磨，SOUI版的GridLayout已经通过了主要的测试，至少能够满足我的布局要求了。

下面我们先看看效果，再看在SOUI里要如何使用。

上面是demos/demo中新增加的两个布局，一个是计算器布局，一个是行列对齐示例。

计算器布局是网络上介绍Android的GridLayout的必备例子，而行列对齐是开发中经常要用到的布局。

先看看上图的计算器布局XML：

           <window pos="10,[5,-10,-10" layout="gridLayout" colorBkgnd="#888888" columnCount="4" rowCount="6" xInterval="5" yInterval="5" xGravity="fill" yGravity="fill">
             <edit
               size="0,0"
             cueText="数值"
             columnSpan="4"
             rowWeight="2"
         />

             <button
               size="0,0"
             text="清除"
             columnWeight="1"
             rowWeight="1"
             colorText="#0000ff"
         />

             <button
               size="0,0"
             text="后退"
             columnWeight="1"
             rowWeight="1"
         />

             <button
               size="0,0"
             text="/"
             columnWeight="1"
             rowWeight="1"
         />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="x"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="7"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="8"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="9"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="-"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="4"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="5"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="6"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="+"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="1"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="2"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="3"
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--//列 行权重为1-->
             <button
               size="0,0"
                 text="="
                 rowSpan="2"
                 columnWeight="1"
                 rowWeight="2"
             />
             <button
               size="0,0"
                 text="0"
                 columnSpan="2"
                 columnWeight="2"
                 rowWeight="1"
             />
             <!--跨两列 自动填充 列权重2 行权重1-->
             <button
               size="0,0"
                 text="."
                 columnWeight="1"
                 rowWeight="1"
             />
             <!--列 行 权重1-->

           </window>

上面代码中，首先需要注意的是在window的layout属性里指定为gridLayout。

然后我们指定了columnCount, rowCount, xInterval, yInterval, xGravity, yGravity等属性。这些属性都是GridLayout才有的属性。

在这个window的子控件中，我们把每个控件的size都指定为"0,0"， 同时指定了columnWeight, rowWeight属性，这样可以保证大小只受weight控制，不受控件显示内容影响。也可以指定columnSpan, rowSpan来指定行列合并 ，具体属性含义这里不一一介绍，还是参考源代码更好。

计算器的例子演示了平均分割父窗口，GridLayout同样支持适应子窗口。

 <window pos="|0,[5" offset="-0.5,0" layout="gridLayout" columnCount="2" xInterval="5" yInterval="5" xGravity="right" colorBkgnd="#888888">
             <text size="-1,-1">所在地:</text>
             <edit size="200,50" layout_xGravity="fill">广东 广州</edit>

             <text size="-1,-1">邮箱:</text>
             <edit size="200,-1" layout_xGravity="fill">xx@qq.com</edit>

             <text size="-1,-1">兴趣:</text>
             <edit size="200,-1" layout_xGravity="fill">看小电影</edit>

           </window>

在上面代码中，我们让这个GridLayout水平居中，宽度是子窗口自适应。在父窗口中我们指定了xGravity="right", 使得它的每一列水平方向默认使用右对齐（如果不指定则是剧中对齐，如这里的垂直方向）。

第一列的3个文本控件都是自适应大小，第二列宽度指定为200，高度则有点变化。上面代码中还指定了一个layout_xGravity="fill"的属性，其实在这里是没有必要的（本来是想演示填充整个父窗口的右边）。

子控件的layout_xGravity和父控件的xGravity是一个主从关系。优先使用子控件指定的属性，如果子控件没有指定，则使用父窗口的属性。

GridLayout就介绍到这里。 UI，just so so!

启程软件  2017.7.5