Android 布局之GridLayout
1 GridLayout簡介
GridLayout是Android4.0新提供的網格矩陣形式的布局控件。
GridLayout的繼承關系如下:
java.lang.Object
--> android.view.View
--> android.view.ViewGroup
--> android.widget.GridLayout
GridLayout包含的屬性如下:
android:alignmentMode
屬性說明:當設定alignMargins,使視圖的外邊界之間進行校準。可以取以下值:
alignBounds -- 對齊子視圖邊界。
alignMargins -- 對齊子視圖邊距。
android:columnCount
屬性說明:GridLayout的最大列數
android:rowCount
屬性說明:GridLayout的最大行數
android:columnOrderPreserved
屬性說明: 當設定為true,使列邊界顯示的順序和列索引的順序相同。預設是true。
android:orientation
屬性說明:GridLayout中子元素的布局方向。有以下取值:
horizontal -- 水準布局。
vertical -- 豎直布局。
android:rowOrderPreserved
屬性說明: 當設定為true,使行邊界顯示的順序和行索引的順序相同。預設是true。
android:useDefaultMargins
屬性說明: 當設定ture,當沒有指定視圖的布局參數時,告訴GridLayout使用預設的邊距。預設值是false。
這些是GridLayout布局本身的屬性。
2 GridLayout子元素屬性
上面描述的 GridLayout 的屬性,是 GridLayout 布局本身的屬性;下面 GridLayout 布局中的元素所支援的屬性。GridLayout 布局中的元素的屬性,定義在 GridLayout.LayoutParams 中。取值如下:
2.1 android:layout_column
屬性說明: 顯示該空間的列。例如,android:layout_column="0",表示在第1列顯示該控件;android:layout_column="1",表示在第2列顯示該控件。
layout檔案示例,
<?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="2"
android:columnCount="3" >
<Button
android:id="@+id/one"
android:layout_column="1"
android:text="1"/>
<Button
android:id="@+id/two"
android:layout_column="0"
android:text="2"/>
<Button
android:id="@+id/three"
android:text="3"/>
<Button
android:id="@+id/devide"
android:text="/"/>
</GridLayout>
View Code
對應的顯示效果圖:

layout檔案說明:
android:orientation="horizontal" -- GridLayout中控件的布局方向是水準布局。
android:rowCount="2" -- GridLayout最大的行數為2行。
android:columnCount="3" -- GridLayout最大的列數為3列。
android:layout_column="1" -- 定義控件one的位于第2列。
android:layout_column="0" -- 定義該控two件的位于第1列。
2.2 android:layout_columnSpan
屬性說明: 該控件所占的列數。例如,android:layout_columnSpan="2",表示該控件占2列。
layout檔案示例:
<?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="2"
android:columnCount="3" >
<Button
android:id="@+id/one"
android:layout_column="0"
android:layout_columnSpan="2"
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="/"/>
</GridLayout>
View Code
對應的顯示效果圖:
layout檔案說明:
數字"1"實際上占據的空間大小是2列,但是第2列顯示為空白。若要第2列不顯示空白,需要設定 android:layout_gravity屬性,參考下例。
2.3 android:layout_row
屬性說明: 該控件所在行。例如,android:layout_row="0",表示在第1行顯示該控件;android:layout_row="1",表示在第2行顯示該控件。它和 android:layout_column類似。
2.4 android:layout_rowSpan
屬性說明: 該控件所占的行數。例如,android:layout_rowSpan="2",表示該控件占2行。它和 android:layout_columnSpan類似。
2.5 android:layout_gravity
屬性說明:
該控件的布局方式。可以取以下值:
top -- 控件置于容器頂部,不改變控件的大小。
bottom -- 控件置于容器底部,不改變控件的大小。
left -- 控件置于容器左邊,不改變控件的大小。
right -- 控件置于容器右邊,不改變控件的大小。
center_vertical -- 控件置于容器豎直方向中間,不改變控件的大小。
fill_vertical -- 如果需要,則往豎直方向延伸該控件。
center_horizontal -- 控件置于容器水準方向中間,不改變控件的大小。
fill_horizontal -- 如果需要,則往水準方向延伸該控件。
center -- 控件置于容器中間,不改變控件的大小。
fill -- 如果需要,則往水準、豎直方向延伸該控件。
clip_vertical -- 垂直剪切,剪切的方向基于該控件的top/bottom布局屬性。若該控件的gravity是豎直的:若它的gravity是top的話,則剪切該控件的底部;若該控件的gravity是bottom的,則剪切該控件的頂部。
clip_horizontal -- 水準剪切,剪切的方向基于該控件的left/right布局屬性。若該控件的gravity是水準的:若它的gravity是left的話,則剪切該控件的右邊;若該控件的gravity是 right的,則剪切該控件的左邊。
start -- 控件置于容器的起始處,不改變控件的大小。
end -- 控件置于容器的結束處,不改變控件的大小。
對應函數: setGravity(int)
layout檔案示例:
<?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="2"
android:columnCount="3" >
<Button
android:id="@+id/one"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_gravity="fill"
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="/"/>
</GridLayout>
View Code
對應的顯示效果圖:
3 應用示例
定義一個簡單的電腦界面,包含“0-9、.、+、-、*、/、=、”。用GridLayout實作。
layout檔案
<?xml version="1.0" encoding="utf-8"?>
<!-- GridLayout: 5行 4列 水準布局 -->
<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"
android:columnCount="4" >
<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>
點選下載下傳:源代碼
效果圖:
本文轉自:Android 布局之GridLayout