RelativeLayout as listview item

问题

Consider following RelativeLayout as list view item:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/bigfoo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:text="bigfoo"
        android:textSize="60sp"/>

    <TextView
        android:id="@+id/foo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/bigfoo"
        android:layout_centerVertical="true"
        android:text="foo"/>

    <TextView
        android:id="@+id/bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/foo"
        android:layout_alignLeft="@id/foo"
        android:text="bar"/>

</RelativeLayout>

After investigating it with hierarchyviewer (on device with Android JB/API 17) bar gets 0 height.

Edit: Expected result:

Question: What is the explanation of such relative layout behavior, and how to fix the layout to achieve layout, that meets requirements: foo is in the middle (vertically) of bigfoo and bar is above foo?

回答1:

I see 2 options :

Option 1, no nesting (that way bar is on the top of the layout, but you can set a top margin to lower it a bit if that works with your use of the layout):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/bigfoo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:text="bigfoo"
        android:textSize="60sp"/>

    <TextView
        android:id="@+id/foo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/bigfoo"
        android:layout_centerVertical="true"
        android:text="foo"/>

    <TextView
        android:id="@+id/bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/bigfoo"
        android:text="bar"/>

</RelativeLayout>

Option 2, nesting another RelativeLayout in the first one :

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

    <TextView
        android:id="@+id/bigfoo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="bigfoo"
        android:textSize="60sp" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/bigfoo"
        android:layout_alignBottom="@id/bigfoo"
        android:orientation="vertical"
        android:layout_toRightOf="@id/bigfoo">

        <TextView
            android:id="@+id/foo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="foo" />

        <TextView
            android:id="@+id/bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/foo"
            android:text="bar" />
    </RelativeLayout>
</RelativeLayout>

With Option 2, you should achieve exactly the result you're expecting, but at the cost of nesting a layout inside another one. If the rest of the UI is light, it shouldn't be a problem ;)

EDIT : could you try this, please ?

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

    <TextView
        android:id="@+id/bigfoo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:text="bigfoo"
        android:textSize="60sp"/>

    <TextView
        android:id="@+id/foo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/bigfoo"
        android:layout_centerVertical="true"
        android:text="foo"/>

    <TextView
        android:id="@+id/bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/foo"
        android:layout_alignLeft="@id/foo"
        android:text="bar"/>

</RelativeLayout>

This is what I see, although I'd have trouble explaining why this works ...

回答2:

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

    <TextView
        android:id="@+id/bigfoo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bigfoo"
        android:textSize="60sp"/>

    <TextView
        android:id="@+id/bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/bigfoo"
        android:text="bar"/>

    <TextView
        android:id="@+id/foo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/bar"
        android:layout_toRightOf="@id/bigfoo"
        android:text="foo"/>

</RelativeLayout>

来源：https://stackoverflow.com/questions/19636734/relativelayout-as-listview-item

标签

android

android-listview

relativelayout