如何在 GridLayout 中心的网格单元格中对齐视图？

Question

我有一个简单的 2x2 网格布局。其中 3 个具有红色、绿色和蓝色的视图。我希望它们在网格的单元格中居中对齐。我的布局如下，但即使我将所有视图的 layout_gravity 放在中心位置，视图也是左上角对齐的。我该如何解决这个问题？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.elyeproj.griddrag.MainActivity">

    <GridLayout
        android:id="@+id/container_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2"
        android:orientation="horizontal">
        <View
            android:id="@+id/view_red"
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:background="#ff0000" />

        <View
            android:id="@+id/view_green"
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:background="#00ff00" />

        <View
            android:id="@+id/view_blue"
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:background="#0000ff" />
    </GridLayout>
</RelativeLayout>

Answer 1

网格布局项目是换行的，因此您最好使用权重根据需要正确对齐它们。 下面的xml就是你想要的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<GridLayout
    android:id="@+id/container_grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="3"
    android:orientation="horizontal">

    <View
        android:id="@+id/view_red"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_gravity="center"
        android:background="#ff0000"
        android:layout_row="0"
        android:layout_column="0" />

    <View
        android:id="@+id/view_green"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:background="#00ff00"
        android:layout_row="0"
        android:layout_column="1" />

    <View
        android:id="@+id/view_blue"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_gravity="center"
        android:background="#0000ff"
        android:layout_row="1"
        android:layout_column="0" />
    </GridLayout>
</RelativeLayout>

请参阅下面的链接，了解使用 21 以下 api 的 linearlayout 的另一种解决方案： GridLayout (not GridView) how to stretch all children evenly

Answer 2

嘿，只需将这些行添加到每个视图。

android:layout_columnWeight="1"
android:layout_rowWeight="1"

希望这会有所帮助。