首页 > 解决方案 > 如何在 gridLayout 行中居中元素?

问题描述

我有一个gridlayout3rows和 3 columns(我们做一个井字游戏)。

里面这些rowscolumns应该的ImageViews。但是:我的老师通过手动更改 each 来使它们居中margin。我认为这不是最好的方法,尤其是当我们在这个例子ImageView中拥有大量的rows和时。columns

有没有更好的方法来处理/里面的center所有内容?ImageViewsrowscolumns

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>

标签: javaxmlandroid-studio

解决方案


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

您需要将每个图像视图的 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" />

我希望这会有所帮助。


推荐阅读