如何将gridLayout中的元素居中

Question

我有一个网格布局（3列和3行）。我正在尝试将图像放在网格的每个方格的中心。我玩了一些保证金的价值，并在the design view of activity_main.xml得到了我想要的东西 但是当我在手机上运行应用程序时，图像并没有放在正确的位置。 this is how it looks in my phone

我不知道我做错了什么。我是新手，所以任何事情都可能是错的。 这是activity_main.xml的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="360dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:columnCount="3"
        android:rowCount="3"
        android:background="@drawable/board"
        android:layout_alignParentEnd="true"
        android:id="@+id/gridLayout">

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="10dp"
            android:onClick="dropIn"
            android:tag="0" />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView2"
            android:layout_row="0"
            android:layout_column="1"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="25dp"
            android:onClick="dropIn"
            android:tag="1" />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView3"
            android:layout_row="0"
            android:layout_column="2"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="25dp"
            android:onClick="dropIn"
            android:tag="2" />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView4"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="24dp"
            android:onClick="dropIn"
            android:tag="3"   />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView5"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="24dp"
            android:onClick="dropIn"
            android:tag="4" />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView6"
            android:layout_row="1"
            android:layout_column="2"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="24dp"
            android:onClick="dropIn"
            android:tag="5"   />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView7"
            android:layout_row="2"
            android:layout_column="0"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="30dp"
            android:onClick="dropIn"
            android:tag="6" />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView8"
            android:layout_row="2"
            android:layout_column="1"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="30dp"
            android:onClick="dropIn"
            android:tag="7"   />

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:id="@+id/imageView9"
            android:layout_row="2"
            android:layout_column="2"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="30dp"
            android:onClick="dropIn"
            android:tag="8" />

    </GridLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#fffaff0b"
        android:padding="30dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/playAgainLayout"
        android:visibility="invisible">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/winnerMessage"
            android:layout_gravity="center_horizontal"
            android:textSize="30sp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Play Again"
            android:id="@+id/playAgainButton"
            android:layout_gravity="center_horizontal"
            android:onClick="playAgain" />
    </LinearLayout>
</RelativeLayout>

提前感谢您的帮助。

Answer 1

您需要更改图像视图宽度并添加一个属性

  android:adjustViewBounds="true"

在你的所有imageview中

因为你定义了

 android:layout_height="360dp" 

GridLayout的

并设置了imageviews height width = 90

但所有屏幕都不是正方形，因此GridLayout会生成Rectangle 并且你的imageview是方形的，你的imageview（正方形）不适合Grid（Rectangle）

imageview宽度必须相同或更小网格的宽度

Answer 2

对于给定的xml文件和尺寸，您无法实现这一点，因为您使用的是硬编码尺寸，而您的背景图像可能是一个分辨率xhdpi或xxhdpi。 您需要做的是首先为不同的分辨率创建尺寸，然后为背景图像的不同分辨率创建不同的图像，并将绑定到特定的屏幕。

您可以使用我已修改的备用xml文件来获取上述条件并相应地进行修改，xml文件下面将使用硬编码维度，但您可以稍后更新。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:gravity="center"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imgView1"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="90dp"
            android:background="@android:color/background_dark" />

        <ImageView
            android:id="@+id/imgView2"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="90dp"
            android:background="@android:color/background_dark" />

        <ImageView
            android:id="@+id/imgView3"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />


    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/background_dark" />

    <LinearLayout
        android:id="@+id/linRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imgView4"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="90dp"
            android:background="@android:color/background_dark" />

        <ImageView
            android:id="@+id/imgView5"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="90dp"
            android:background="@android:color/background_dark" />

        <ImageView
            android:id="@+id/imgView6"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />


    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/background_dark" />


    <LinearLayout
        android:id="@+id/linRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imgView7"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="90dp"
            android:background="@android:color/background_dark" />

        <ImageView
            android:id="@+id/imgView8"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="90dp"
            android:background="@android:color/background_dark" />

        <ImageView
            android:id="@+id/imgView9"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />


    </LinearLayout>

</LinearLayout>

<LinearLayout
    android:id="@+id/playAgainLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="#fffaff0b"
    android:orientation="vertical"
    android:padding="30dp"
    android:visibility="invisible">

    <TextView
        android:id="@+id/winnerMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="New Text"
        android:textSize="30sp" />

    <Button
        android:id="@+id/playAgainButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="playAgain"
        android:text="Play Again" />
</LinearLayout>