在實現網格布局前，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">[email protected]</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

在SOUI中使用網格布局