在SOUI中使用网格布局

Posted 2020-09-26 启程软件

在实现网格布局前，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：

  1           <window pos="10,[5,-10,-10" layout="gridLayout" colorBkgnd="#888888" columnCount="4" rowCount="6" xInterval="5" yInterval="5" xGravity="fill" yGravity="fill">
  2             <edit
  3               size="0,0"
  4             cueText="数值"
  5             columnSpan="4"
  6             rowWeight="2"
  7         />
  8 
  9             <button
 10               size="0,0"
 11             text="清除"
 12             columnWeight="1"
 13             rowWeight="1"
 14             colorText="#0000ff"
 15         />
 16 
 17             <button
 18               size="0,0"
 19             text="后退"
 20             columnWeight="1"
 21             rowWeight="1"
 22         />
 23 
 24             <button
 25               size="0,0"
 26             text="/"
 27             columnWeight="1"
 28             rowWeight="1"
 29         />
 30             <!--//列 行权重为1-->
 31             <button
 32               size="0,0"
 33                 text="x"
 34                 columnWeight="1"
 35                 rowWeight="1"
 36             />
 37             <!--//列 行权重为1-->
 38             <button
 39               size="0,0"
 40                 text="7"
 41                 columnWeight="1"
 42                 rowWeight="1"
 43             />
 44             <!--//列 行权重为1-->
 45             <button
 46               size="0,0"
 47                 text="8"
 48                 columnWeight="1"
 49                 rowWeight="1"
 50             />
 51             <!--//列 行权重为1-->
 52             <button
 53               size="0,0"
 54                 text="9"
 55                 columnWeight="1"
 56                 rowWeight="1"
 57             />
 58             <!--//列 行权重为1-->
 59             <button
 60               size="0,0"
 61                 text="-"
 62                 columnWeight="1"
 63                 rowWeight="1"
 64             />
 65             <!--//列 行权重为1-->
 66             <button
 67               size="0,0"
 68                 text="4"
 69                 columnWeight="1"
 70                 rowWeight="1"
 71             />
 72             <!--//列 行权重为1-->
 73             <button
 74               size="0,0"
 75                 text="5"
 76                 columnWeight="1"
 77                 rowWeight="1"
 78             />
 79             <!--//列 行权重为1-->
 80             <button
 81               size="0,0"
 82                 text="6"
 83                 columnWeight="1"
 84                 rowWeight="1"
 85             />
 86             <!--//列 行权重为1-->
 87             <button
 88               size="0,0"
 89                 text="+"
 90                 columnWeight="1"
 91                 rowWeight="1"
 92             />
 93             <!--//列 行权重为1-->
 94             <button
 95               size="0,0"
 96                 text="1"
 97                 columnWeight="1"
 98                 rowWeight="1"
 99             />
100             <!--//列 行权重为1-->
101             <button
102               size="0,0"
103                 text="2"
104                 columnWeight="1"
105                 rowWeight="1"
106             />
107             <!--//列 行权重为1-->
108             <button
109               size="0,0"
110                 text="3"
111                 columnWeight="1"
112                 rowWeight="1"
113             />
114             <!--//列 行权重为1-->
115             <button
116               size="0,0"
117                 text="="
118                 rowSpan="2"
119                 columnWeight="1"
120                 rowWeight="2"
121             />
122             <button
123               size="0,0"
124                 text="0"
125                 columnSpan="2"
126                 columnWeight="2"
127                 rowWeight="1"
128             />
129             <!--跨两列 自动填充 列权重2 行权重1-->
130             <button
131               size="0,0"
132                 text="."
133                 columnWeight="1"
134                 rowWeight="1"
135             />
136             <!--列 行 权重1-->
137 
138           </window>

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

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

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

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

 1 <window pos="|0,[5" offset="-0.5,0" layout="gridLayout" columnCount="2" xInterval="5" yInterval="5" xGravity="right" colorBkgnd="#888888">
 2             <text size="-1,-1">所在地:</text>
 3             <edit size="200,50" layout_xGravity="fill">广东 广州</edit>
 4 
 5             <text size="-1,-1">邮箱:</text>
 6             <edit size="200,-1" layout_xGravity="fill">[e-mail]</edit>
 7 
 8             <text size="-1,-1">兴趣:</text>
 9             <edit size="200,-1" layout_xGravity="fill">看小电影</edit>
10 
11           </window>

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

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

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

 

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

启程软件  2017.7.5