如何使用相对布局垂直对齐列表中的项目? [英] How do I vertically align an item within a list using relative layout?

问题描述

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

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:

<?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>

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

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?

推荐答案

在评论后

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

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).

<?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>

如果你想有两个文本框，你可以在 ImageView 后面嵌套第二个 orientation="vertical" 和 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.

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

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

这是原始答案:

我认为您将 Android 与 RelativeLayout 中所有这些有些矛盾的指令混淆了.我将您的内容重新格式化为:

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

<?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>

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

And that works fine. I removed many of your redundant android:layout_alignParentxxx because 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.

这篇关于如何使用相对布局垂直对齐列表中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！