如何在 gridLayout 行中居中元素？

Question

我有一个 gridlayout 和 3 个 rows 和 3 个 columns（我们制作井字游戏）。

在这些rows 和columns 中应该是ImageViews。但是：我的老师通过手动更改每个ImageView 的margin 来使它们居中。 我认为这不是最好的方法，尤其是当我们在本例中使用大量 rows 和 columns 时。

有没有更好的方法来centerImageViews 内的rows/columns？

xml 代码是（前 3 张图片）：

<androidx.gridlayout.widget.GridLayout
    android:layout_width="368dp"
    android:layout_height="368dp"
    android:background="@drawable/board"
    app:columnCount="3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:rowCount="3">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        app:layout_column="0"
        app:layout_row="0"
        app:srcCompat="@drawable/coin_red" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:layout_marginLeft="14dp"  // This one we edit manually ...
        app:layout_column="1"
        app:layout_row="0"
        app:srcCompat="@drawable/coin_red" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        android:layout_marginLeft="12dp"
        app:layout_column="2"
        app:layout_row="0"
        app:srcCompat="@drawable/coin_red" />
</androidx.gridlayout.widget.GridLayout>

Answer 1

我想我得到了你想要的效果。它仍然需要很多行，但这样做的好处是它不使用硬编码值。

您需要将每个图像视图的 column_weight 和 row_weight 设置为 1，并将 layout_gravity 设置为“center”。

例如，您可以将 imageView1 更改为

<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:layout_column="0"
    app:layout_row="0"
    app:layout_columnWeight="1"
    app:layout_rowWeight="1"
    app:layout_gravity="center"
    app:srcCompat="@drawable/coin_red" />

希望对你有帮助。

Answer 2

根据我的说法，您可以直接将布局重心设置为中心

<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:layout_column="0"
    app:layout_row="0"
    app:srcCompat="@drawable/coin_red" 
    android:layout_gravity="center" />