天天看點

GridLayout: GridLayout使用簡介(轉)

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

對應的顯示效果圖:

GridLayout: GridLayout使用簡介(轉)

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

對應的顯示效果圖:

GridLayout: GridLayout使用簡介(轉)

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

對應的顯示效果圖:

GridLayout: GridLayout使用簡介(轉)

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>      

點選下載下傳:源代碼

效果圖:

GridLayout: GridLayout使用簡介(轉)

本文轉自:Android 布局之GridLayout