Android 如何使用相对布局垂直对齐列表中的项目？

How do I vertically align an item within a list using relative layout?

提问by Jay Askren

I am using a list view in Android 1.5 to show a list of images and text next to the image. I am trying to vertically center the text but the text is at the top of the row instead of centered. Below is my layout:

我在 Android 1.5 中使用列表视图来显示图像旁边的图像和文本列表。我试图将文本垂直居中，但文本位于行的顶部而不是居中。下面是我的布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dip">

    <ImageView android:id="@+id/item_image" android:layout_width="wrap_content" 
        android:layout_height="wrap_content"  android:paddingRight="10dip" 
        android:src="@drawable/default_image" android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:gravity="center_vertical"/>

    <TextView android:id="@+id/item_title" 
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:layout_toRightOf="@id/item_image" 
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:gravity="center_vertical"
        />

</RelativeLayout>

It seems strange that I need to set alignParentTop="true" when I'm trying to vertically center the text, but if I don't the text does not even show up. What am I doing wrong?

当我尝试将文本垂直居中时，我需要设置 alignParentTop="true" 似乎很奇怪，但如果我不这样做，文本甚至不会显示。我究竟做错了什么？

回答by Steve Haley

EDIT following the comments:

在评论之后编辑：

It turns out making this work with RelativeLayout isn't easy. At the bottom of the answer I've included a RelativeLayout that gives the effect wanted, but only until it's included in a ListView. After that, the same problems as described in the question occurred. This was fixed by instead using LinearLayout(s).

事实证明，使用RelativeLayout 进行这项工作并不容易。在答案的底部，我包含了一个提供所需效果的 RelativeLayout，但仅限于它包含在 ListView 中之前。之后，出现了与问题中描述的相同的问题。这是通过使用 LinearLayout(s) 解决的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:orientation="horizontal">

    <ImageView android:id="@+id/pickImageImage" 
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:background="@drawable/icon"
        android:scaleType="fitXY"
        android:layout_marginRight="10dp"/>

    <TextView android:id="@+id/pickImageText" 
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:gravity="left|center_vertical"
        android:text="I'm the text"/>

</LinearLayout>

If you want to have two text boxes, you can nest a second orientation="vertical"and LinearLayout after the ImageView and then put the text boxes in there.

如果你想有两个文本框，你可以orientation="vertical"在 ImageView 后面嵌套第二个和 LinearLayout，然后将文本框放在那里。

This works, but I have to admit I don't know why the RelativeLayouts didn't. For example, this blog post by Romain Guyspecifically says that the RelativeLayout should. When I tried it, I never got it to quite work; admittedly I didn't do it exactlyas he did, but my only changes were with some attributes of the TextViews, which shouldn't have made that much of a difference.

这有效，但我不得不承认我不知道为什么 RelativeLayouts 没有。例如，Romain Guy 的这篇博文特别指出，RelativeLayout 应该这样做。当我尝试它时，我从来没有让它完全工作。诚然，我并没有完全像他那样做，但我唯一的变化是 TextViews 的一些属性，这不应该有太大的不同。

---

---

Here's the original answer:

这是原始答案：

I think you're confusing Android with all those somewhat contradictory instructions in RelativeLayout. I reformatted your thing to this:

我认为您将 Android 与RelativeLayout 中所有这些有些矛盾的指令混淆了。我将你的东西重新格式化为：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10dip">

    <ImageView android:id="@+id/item_image"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:paddingRight="10dip" 
        android:src="@drawable/icon"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>

    <TextView android:id="@+id/item_title" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_toRightOf="@id/item_image" 
        android:layout_centerVertical="true"
        android:text="Blah!"/>

</RelativeLayout>

And that works fine. I removed many of your redundant android:layout_alignParentxxxbecause they weren't necessary. This view now comes up with the picture in the top left corner and the text vertically centered next to it. If you want the picture vertically centered as well, then you can't have the RelativeLayout be on android:layout_height="wrap_content" because it's trying to make itself no taller than the height of the picture. You'd have to specify a height, e.g. 80dp, and then set the ImageView to a fixed height like 60dp with android:scaleType="fitXY" to make it scale down to fit properly.

这很好用。我删除了许多多余的内容，android:layout_alignParentxxx因为它们不是必需的。这个视图现在出现在左上角的图片和旁边垂直居中的文本。如果您也希望图片垂直居中，那么您不能将 RelativeLayout 放在 android:layout_height="wrap_content" 上，因为它试图使自己不高于图片的高度。您必须指定一个高度，例如 80dp，然后使用 android:scaleType="fitXY" 将 ImageView 设置为固定高度，例如 60dp，以使其缩小以适合正确的尺寸。

回答by The Salt

Was stuck on a similar issue for a while, but found this from CommonsWare:

在类似的问题上停留了一段时间，但从 CommonsWare 中发现了这一点：

"When you inflate the layout, use inflate(R.layout.whatever, parent, false), where parent is the ListView."

“当您扩充布局时，请使用inflate(R.layout.whatever, parent, false)，其中 parent 是 ListView。”

Works but only when you set the height of the row to a specific value (ie you can't use wrap_content).

有效但仅当您将行的高度设置为特定值时（即您不能使用 wrap_content）。

回答by Pentium10

Baseline directive would do it, but ImageView simply does not support baseline alignment as of today. You can work around this by creating a subclass of ImageView, override the getBaseline() method and return the height of the image.

Baseline 指令可以做到这一点，但 ImageView 现在根本不支持基线对齐。您可以通过创建 ImageView 的子类、覆盖 getBaseline() 方法并返回图像的高度来解决此问题。