android學習——GridLayout網格布局

標籤：

GridLayout網格布局

　　android4.0以上版本出現的GridLayout布局解決了以上問題。GridLayout布局使用虛細線將布局劃分為行、列和儲存格，也支援一個控制項在行、列上都有交錯排列。而GridLayout使用的其實是跟LinearLayout類似的API，只不過是修改了一下相關的標籤而已，所以對於開發人員來說，掌握GridLayout還是很容易的事情。GridLayout的布局策略簡單分為以下三個部分：

　　首先它與LinearLayout布局一樣，也分為水平和垂直兩種方式，預設是水平布局，一個控制項挨著一個控制項從左至右依次排列，但是通過指定android:columnCount設定列數的屬性後，控制項會自動換行進行排列。另一方面，對於GridLayout布局中的子控制項，預設按照wrap_content的方式設定其顯示，這隻需要在GridLayout布局中顯式聲明即可。

       其次，若要指定某控制項顯示在固定的行或列，只需設定該子控制項的android:layout_row和android:layout_column屬性即可，但是需要注意：android:layout_row=”0”表示從第一行開始，android:layout_column=”0”表示從第一列開始，這與程式設計語言中一維數組的賦值情況類似。

　　最後，如果需要設定某控制項跨越多行或多列，只需將該子控制項的android:layout_rowSpan或者layout_columnSpan屬性設定為數值，再設定其layout_gravity屬性為fill即可，前一個設定表明該控制項跨越的行數或列數，後一個設定表明該控制項填滿所跨越的整行或整列。

 　　我們下面通過XML布局和Java代碼布局兩種方式分別舉例：

　　

 

一、XML方式布局

　　1、建立一個空白Activity

　　

　　3、開啟“res/layout/activity_main.xml”檔案，修改成以下代碼。

　　

　　（1）第①部分

　　<?xml version="1.0" encoding="utf-8">，每個XML文檔都由XML序言開始，在前面的代碼中的第一行便是XML序言，<?xml version="1.0">。這行代碼錶示按照1.0版本的XML規則進行解析。encoding = "utf-8"表示此xml檔案採用utf-8的編碼格式。編碼格式也可以是GB2312。

　　（2）第②部分

　　<GridLayout……　表示採用網格布局管理器。

　　（3）第③部分

　　android:layout_width="match_parent" android:layout_height="match_parent"表示布局管理器寬度和高充將填充整個螢幕寬度和高度。

　　（4）第④部分

　　android:orientation="horizontal"表示採用水平布局，垂直為vertical。

　　（5）第⑤部分

　　該網格布局管理器採用5行4列。

　　4、我們向GridLayout放入16個按鈕Button。

　　 

　　5、找不同。

　　

　　我們對一下，找出不同地方。

　　（1）第①部分

　　目標0按鈕是佔據2個格；當前0按鈕佔1格。　　

　　<Button          android:id="@+id/zero"          android:layout_columnSpan="2"  　　　　//列擴充兩列        android:layout_gravity="fill"  　　　　//按鈕填充滿兩格        android:text="0"/>  

　　（2）第②部分

　　目標·按鈕在第4行第3列；當前·按鈕在第4行第2列。

　　解決辦法：0按鈕佔據2格後，·按鈕會自動到這個位置。

　　（3）第③部分

　　目標+按鈕在第4行第4列並且行擴充2行；當前·按鈕在第4行第3列。

　　解決辦法：由於0按鈕佔據2格後，目標+會自動到這個位置。

　　<Button          android:id="@+id/plus"          android:layout_rowSpan="2" 　　　　　//行擴充兩行         android:layout_gravity="fill"  　　 //按鈕填充滿兩格        android:text="+"/>  

　　（4）第④部分

　　目標=按鈕在第5行，佔據3列位置；當前=按鈕在第4行第4列。

　　解決辦法：位置由於0的擴充後，目前=按鈕會自動到第5行；列擴充同0按鈕。　　

　　<Button          android:id="@+id/equal"          android:layout_columnSpan="3"  　　　　　//列擴充3列        android:layout_gravity="fill" 　　　　　 //按鈕填充滿3格         android:text="="/>    

　　

　　完整原始碼：

<?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:orientation="horizontal"              　　　　　　//水平方向    android:rowCount="5"                                                  //5行    android:columnCount="4" >                                             //4列    　　//16個按鈕　　<Button  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　        android:id="@+id/one"          android:text="1"/>  　　<Button          android:id="@+id/two"          android:text="2"/>  　　　<Button          android:id="@+id/three"          android:text="3"/>  　　<Button          android:id="@+id/devide"          android:text="/"/>  　　<Button          android:id="@+id/four"          android:text="4"/>  　　<Button          android:id="@+id/five"          android:text="5"/>  　　<Button          android:id="@+id/six"          android:text="6"/>  　　<Button          android:id="@+id/multiply"          android:text="×"/>  　　<Button          android:id="@+id/seven"          android:text="7"/>  　　<Button          android:id="@+id/eight"          android:text="8"/>  　　<Button          android:id="@+id/nine"          android:text="9"/>      <Button          android:id="@+id/minus"          android:text="-"/>      <Button          android:id="@+id/zero"          android:layout_columnSpan="2"          android:layout_gravity="fill"          android:text="0"/>  　　<Button          android:id="@+id/point"          android:text="."/>      <Button          android:id="@+id/plus"          android:layout_rowSpan="2"          android:layout_gravity="fill"          android:text="+"/>      <Button          android:id="@+id/equal"          android:layout_columnSpan="3"          android:layout_gravity="fill"          android:text="="/>      </GridLayout>  

　　6、最終顯示效果如下：

　　　　　　

 

二、Java代碼方式布局

　　上面我們已經瞭解採用XML進行LinearLayout布局，我們現在再來學習一下如何使用Java程式碼完成與之同樣功能。

　　暫略。

　　

android學習——GridLayout網格布局