Android開發 GridLayout網格布局

前言

　　 GridLayout其實已經算是時代的眼淚了,在有ConstraintLayout的情況下,它其實變的相當雞肋. 它的屬性調試難度其實比ConstraintLayout還復雜(個別屬性組合特別難以理解和使用),個人是建議如果你在有需求實現表格類型布局時還是直接使用ConstraintLayout. 當然了解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。

子元素屬性

• android:layout_column 說明：顯示該子控件的列，例如android:layout_column=”0”,表示當前子控件顯示在第1列，android:layout_column=”1”,表示當前子控件顯示在第2列。
• android:layout_columnSpan 說明：該控件所占的列數，例如android:layout_columnSpan=”2”,表示當前子控件占兩列。如果設置android:layout_columnSpan="5",那么這個子元素控件就會占據GridLayout一半列數的空間。需要配合android:layout_gravity="fill" 一起使用
• android:layout_row 說明：顯示該子控件的行，例如android:layout_row=”0”,表示當前子控件顯示在第1行，android:layout_row=”1”,表示當前子控件顯示在第2行。
• android:layout_rowSpan 說明：該控件所占的列數，例如android:layout_rowSpan=”2”,表示當前子控件占兩行。
• android:layout_columnWeight 說明：該控件的列權重，與android:layout_weight類似，例如有GridLayout上兩列，都設置android:layout_columnWeight = “1”,則兩列各占GridLayout寬度的一半
• android:layout_rowWeight 說明：該控件的行權重，原理同android:layout_columnWeight。

 

 

例子

效果圖：

xml：

需要注意的問題：

1.在子元素如果不設置 android:layout_width 與 android:layout_height 為 "0dp" 那么子元素在配合 android:layout_rowWeight="1" 與 android:layout_columnWeight="1" 屬性時將不會起作用,這時候會出現子元素超出 GridLayout 布局的問題。

2.需要子元素撐滿剩余布局空間時，需要設置 android:layout_gravity="fill"

<?xml version="1.0" encoding="utf-8"?><!--數字輸入盤-->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="152dp"
    android:background="@color/snakecommon_color_181B23">

    <GridLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:columnCount="10"
        android:rowCount="2"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:paddingLeft="18dp"
        android:paddingRight="18dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="1"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="2"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="3"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="4"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="5"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="6"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="7"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="8"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="9"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:text="0"
            android:layout_marginStart="2.5dp"
            android:layout_marginEnd="2.5dp"
            android:textColor="@color/snakecommon_color_FFFFFF"
            android:textSize="18sp" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="5"
            android:layout_gravity="fill"
            android:paddingVertical="10dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:src="@drawable/snake_ic_delete" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_rowWeight="1"
            android:layout_columnSpan="5"
            android:layout_gravity="fill"
            android:paddingVertical="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/snake_shape_white_rectangle_10dp"
            android:src="@drawable/snake_ic_yes" />

    </GridLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

End