在實現網格布局前，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">xx@qq.com</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