如何将 GridView 居中对齐

Question

我想将GridView居中对齐

但仍然出现以下问题：

如上图所示，图片在左侧，但我想像下面这样将图片居中：

另外一个问题是，文本背景的宽度太大了，如何只在图片内显示文本背景？

现在GridView已经居中了，但仍有问题，如下图所示，文本背景的宽度过大，超出了ImageView：

请检查更新后的xml脚本

activity_main.xml:-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/header_bg"
        android:gravity="center"
        android:text="@string/header_main"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ffffff"
        android:textStyle="bold" />



     <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal"
        >

    <GridView
        android:id="@+id/list"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/photo_size"
        android:horizontalSpacing="@dimen/photo_spacing"
        android:numColumns="4"
        android:gravity="center"
        android:padding="4dp"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:layout_gravity="center"
        android:verticalSpacing="@dimen/photo_spacing" />

</LinearLayout>

</RelativeLayout>

row.xml:-

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/album_item"
   android:layout_width="match_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

<ImageView
    android:id="@+id/cover"        
    android:contentDescription="@string/app_name"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="center" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:layout_alignBottom="@+id/cover"
        android:background="#70000000"
        android:gravity="center"
        android:padding="6dp"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:textStyle="bold" />

</RelativeLayout>

如果我使用wrap_content作为TextView的属性，那么显示效果如下图所示：

- Sun

---

尝试在包含TextView的LinearLayout中使用android:gravity="center"。 - Sagar Pilkhwal

谢谢，我在LinearLayout中使用了android:gravity="center"，但主要的挑战是如何将GridView居中对齐？ - Sun

它解决了你的问题吗？尝试在你的GridView中使用android:gravity="center"。 - Sagar Pilkhwal

你在row.xml中的TextView尝试过使用android:layout_gravity="center"而不是android:gravity="center"吗？ - MysticMagicϡ

你可以通过将重力/布局重力属性在布局/元素之间移动来破坏GridLayout中的所有对齐方式，这真的很糟糕。这个视频帮了我很多，链接为https://www.youtube.com/watch?v=VUPM387qyrw。 - Windgate

Answer 1

您只需要将android:layout_gravity="center"应用于LinearLayout的子项即可。

首先，将父级LinearLayout的宽度更改为match_parent。因为现在它是wrap_content，所以无法实现居中对齐。

要使GridView居中对齐：

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/textView2"
    android:orientation="horizontal"
    >

    <GridView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:columnWidth="@dimen/photo_size"
        android:horizontalSpacing="@dimen/photo_spacing"
        android:numColumns="auto_fit"
        android:padding="4dp"
        android:scrollbars="none"
        android:stretchMode="columnWidth"
        android:layout_gravity="center"
        android:verticalSpacing="@dimen/photo_spacing" />

</LinearLayout>

对于将文本居中对齐：

请尝试以下操作：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/cover"
    android:gravity="center"
    android:background="#70000000"
    android:padding="6dp" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:layout_gravity="center"
        android:textStyle="bold" />

</LinearLayout>

希望能有所帮助。

更新：

要使字幕居中对齐，只需修改重心即可。由于row.xml中的父布局是RelativeLayout，因此layout_gravity不会起作用。请使用“centerInParent”。

例如：

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

    <ImageView
        android:background="#eeeeee"
        android:id="@+id/cover"
        android:src="@drawable/ic_launcher"
        android:layout_width="200dip"
        android:layout_height="200dip"
        android:contentDescription="@string/app_name"
        android:scaleType="center" />

    <TextView
        android:id="@+id/title"
        android:text="@string/iclauncher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/cover"
        android:background="#70000000"
        android:ellipsize="end"
        android:layout_centerInParent="true"
        android:padding="6dp"
        android:singleLine="true"
        android:textSize="12sp"
        android:textStyle="bold" />

</RelativeLayout>

我正在使用以下方法将标题置于图像中心： 您只需添加android:layout_centerInParent="true"并删除gravity即可。希望这可以帮助您。

- MysticMagicϡ

---

对于GridView的解决方案，你真棒。我知道但不想在LinearLayout中使用它。好技巧！ - sud007

Answer 2

尝试使用 android:gravity="center" 对包含 TextView 的 LinearLayout 进行设置，以使文本在中心对齐：

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/cover"
android:gravity="center"
android:background="#70000000"
android:padding="6dp" >

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:gravity="center"
    android:singleLine="true"
    android:textColor="@color/white"
    android:textSize="12sp"
    android:textStyle="bold" />

</LinearLayout>

如果要让您的GridView居中对齐，请使用以下代码：

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_below="@+id/textView2"
android:orientation="horizontal"
>

<GridView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:columnWidth="@dimen/photo_size"
android:horizontalSpacing="@dimen/photo_spacing"
android:numColumns="auto_fit"
android:layout_gravity="center"
android:padding="4dp"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="@dimen/photo_spacing" />

</LinearLayout>

- Sagar Pilkhwal

---

尝试在你的activity_main.xml文件中的RelativeLayout中添加gravity="center"。 - Sagar Pilkhwal

我已经编辑了我的答案，请尝试使用 android:layout_gravity="center"。 - Sagar Pilkhwal

Answer 3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >

这将解决您的问题。

- Utpal Sharma

Answer 4

使用此代码将您的图像设置在中心位置：

 <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:scaleType="centerCrop"/>

然后将你的Gridview设置为这样：

<GridView
    android:id="@+id/gridView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginTop="55sp"
    android:background="#ffff"
    android:clickable="true"
    android:columnWidth="100dp"
    android:drawSelectorOnTop="true"
    android:focusable="true"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp"/>

这个可行，继续愉快地编程...

- Gaurav Lambole