在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：

  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