Android 4.0開發之GridLayOut佈局實踐

　【IT168技術】在最新的Android 4.0 SDK中，新引入了GridLayout的佈局樣式，這個佈局樣式看上去可能有點象以前的TableLayout,但實際上仍是有所不一樣的。

　　在上一篇教程中(http://tech.it168.com/a2011/1122/1277/000001277274.shtml),咱們初步學習瞭解了GridLayout的佈局基本知識，經過學習知道，GridLayout能夠用來作一個象TableLayout這樣的佈局樣式，但其性能及功能都要比tablelayout要好，好比GridLayout的佈局中的單元格能夠跨越多行，而tablelayout則不行，此外，其渲染速度也比tablelayout要快。在本文中，將指導讀者進一步加深對GridLayout的認識，帶你們實作一個簡單的數字鍵盤佈局，從中體會GridLayout的用法。

　　開始設計

　　首先，咱們先設計下將要設計的鍵盤佈局圖，以下圖：

　　能夠看到這個佈局的一些特色：

　　1) 有5行4列

　　2)每行的單元格和列方向的單元格的大小都是不必定相等的，好比「+」號這個按鈕，在縱向上是橫跨了兩行的

　　能夠看到，若是要用傳統的tablelayout佈局樣式，要實現以上的佈局，可能要外加嵌套linarlayout佈局樣式，這樣就會使的佈局設計十分麻煩，而若是有了GridLayout樣式，則能夠很容易地解決這些問題。

　　GridLayout佈局策略

　　GridLayout佈局樣式和LinearLayout樣式同樣，能夠有水平和垂直兩個方向的佈局方式。即若是設置爲垂直方向佈局，則下一個單元格將會在下一行的同一位置或靠右一點的位置出現，而水平方向的佈局，則意味着下一個單元格將會在當前單元格的右邊出現，也有可能會跨越下一行(由於有可能GridLayout佈局樣式中。在咱們的這個例子中，若是從最右邊的除號算起，使用水平佈局的話則是4列，其代碼以下所示：

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" > 
</GridLayout>

　　定義簡單的單元格

　　在GridLayout中，定義每一個子控件跟之前使用佈局中定義的方法有點不一樣，默認的是對全部的子控件使用wrap_content的方式，而不是顯式聲明寬度和高度並使用wrap_conent和match_parent，更多的相關規則能夠參考GridLayout的文檔，這裏只須要在GridLayout自己的屬性中，定義android:layout_width 均爲wrap_conent便可。

　　所以，咱們接着在控件中，添加各個數字按鈕，以下：

    <Button android:text="1" /> 
<Button android:text="2" />  

　　………………………

　　運行後，能夠看到一個初步的效果以下圖所示：

　　定義特殊符號的位置

　　能夠看到，跟草稿的圖相比，象除號，等於號等，位置不是很吻合，下面咱們做些相應的調整，以下：

　　1) 除號的大小能夠不變，但它應該被放置在第4列出現

　　2) +號應該放在數字9以後，而且它的高度要佔3行之多

　　3) 數字0應該佔據兩列的寬度

　　4) 等於號應該佔據三列

　　爲此，修改代碼以下：

        <?xml version="1.0" encoding="utf-8"?> 
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" > 
  
    <Button 
        android:layout_column="3"
        android:text="/" /> 
  
    <Button android:text="1" /> 
  
  
    <Button android:text="9" /> 
  
    <Button 
        android:layout_rowSpan="3"
        android:text="+" /> 
  
    <Button 
        android:layout_columnSpan="2"
        android:text="0" /> 
  
    <Button android:text="00" /> 
  
    <Button 
        android:layout_columnSpan="3"
        android:text="=" /> 
  
</GridLayout>

　　在上面的代碼中，能夠看到，數字鍵3中，經過使用android:layout_column="3"指定數字從第4列開始(注意列的序號從0開始)，而+號是緊跟在數字鍵9後，而且用android:layout_rowSpan="3"指出位於第4行，符號等於，則是緊跟着在數字「00」後，因爲其layout_columnSpan=3,能夠看到，佔據了3個列的位置，所以另外從新新起一行進行了佈局。運行後的結果以下圖所示：

　　美化頁面佈局

　　咱們能夠看到在上圖中，依然出現了不少空位，跟咱們預想的草稿圖有必定差距，這裏其實能夠調整每一個數字按鈕中的位置便可，能夠利用android 4.0 GridLayout佈局中的

　　layout_gravity屬性，設置每一個按鈕中的位置，只須要設置layout_gravity屬性爲fill，便可將每一個控件填充到其layout_columnSpan及layout_rowSpan所指定的寬度，修改後的代碼以下所示：

   <?xml version="1.0" encoding="utf-8"?> 
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" > 
  
    <Button
        android:layout_column="3"
        android:text="/" /> 
  
    <Button android:text="1" /> 
  
    <Button android:text="2" /> 
  
    <Button android:text="3" /> 
  
    <Button android:text="*" /> 
  
    <Button android:text="4" /> 
  
    <Button android:text="5" /> 
  
    <Button android:text="6" /> 
  
    <Button android:text="-" /> 
  
    <Button android:text="7" /> 
  
    <Button android:text="8" /> 
  
    <Button android:text="9" /> 
  
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" /> 
  
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" /> 
  
    <Button android:text="00" /> 
  
    <Button
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="=" /> 
  
</GridLayout>

　　運行後，結果以下圖：

相關閱讀