如何在gridLayout中居中元素答案

【问题标题】：How to center elements in gridLayout如何在gridLayout中居中元素
【发布时间】：2018-04-26 16:05:47
【问题描述】：

我有一个网格布局（3 列和 3 行）。我正在尝试将图像放在网格的每个正方形的中心。我玩了一下margin的值并在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>

提前感谢您的帮助。

【问题讨论】：

标签： java android xml android-studio grid-layout

【解决方案1】：

你需要改变你的 imageview 宽度并添加一个属性

  android:adjustViewBounds="true"

在您的所有图像视图中

因为你定义了

 android:layout_height="360dp"

的 GridLayout 并且你设置 imageviews height width =90

但所有屏幕都不是方形的，所以您的 GridLayout 制作 Rectangle 并且您的图像视图是正方形的，那是您的图像视图（正方形）不适合网格（矩形）

imageview 宽度必须等于或小于网格宽度

【讨论】：

所以我需要确保网格是正方形？如何使网格的宽度等于手机屏幕的宽度？我想使用屏幕的尺寸而不是像 360dp 这样的固定数字。
DisplayMetrics displayMetrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); int height = displayMetrics.heightPixels; int width = displayMetrics.widthPixels;
获得屏幕高度宽度，之后您可以使用 LayoutParams 动态设置 gridview 宽度 == 屏幕宽度
并设置 gridview height == aslo 屏幕宽度，使您的网格布局呈方形
谢谢@Birgu。我会试试你说的。

【解决方案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>

【讨论】：