相对布局作为列表项

Question

考虑以下RelativeLayout作为列表视图项：

```xml ```

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

在使用 Android JB/API 17 设备上的 hierarchyviewer 进行调查后，bar 的高度为 0。

编辑：期望结果：

问题：这种相对布局行为的解释是什么，如何修复布局以满足要求：使 foo 在 bigfoo 的中间（垂直方向）且 bar 在 foo 上方？

- pkk

---

它真的很荒谬，它使用android:layout_below="@id/foo"而不是android:layout_above="@id/foo"。但问题仍然是为什么会发生+1。 - Shakeeb Ayaz

@ShakeebShaheen：你的意思是，如果我将其更改为android:layout_below="@id/foo"，它实际上可以工作吗？ - pkk

是的，完全正确。我将 XML 复制到我的 IDE 中，并按照上述更改。它按预期工作。 - Shakeeb Ayaz

奇怪的是它能工作...但不应该，我不明白为什么。 - pkk

很奇怪，当android:layout_above="@id/foo"时，bar的高度为0。如果您发现了什么，请自行回答。 - Shakeeb Ayaz

我会的，但现在唯一剩下的事情，因为它不明显，就是拉取RelativeLayout源代码，附加到示例项目中，并逐步调试以找出它为什么会表现出这样的行为。不幸的是，我现在没有时间做这件事。但我会保持这个问题开放 - 也许我会找到时间去做... - pkk

Answer 1

我看到有两个选项：

选项1，不嵌套（这样bar就在布局的顶部，但如果符合您对布局的使用，您可以设置一个上边距来稍微降低它）：

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

选项2，在第一个RelativeLayout中嵌套另一个RelativeLayout：

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

使用选项2，您应该能够完全达到您预期的结果，但代价是将一个布局嵌套在另一个布局中。如果UI的其余部分轻量级，则不应该有问题 ;)

编辑: 请尝试这个，好吗？

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

这是我看到的，虽然我很难解释为什么它能工作...

- 2Dee

---

选项1：不适用，因为bar并不在foo上方，我理解你的想法是稍微调整一下顶部边距，但这将取决于设备，对吧？ 选项2：这确实有所帮助，但我不想为每个列表项引入嵌套，我的实际布局要复杂一些，我为了问题的目的剥离了不必要的部分。 - pkk

让我们看看是否有人能提出更好的解决方案...不过，我会测试一下嵌套是否影响性能，如果是的话，尝试让布局的其余部分更轻盈 ;) - 2Dee

我已经以类似的方式解决了这个问题，但我更感兴趣的是，为什么RelativeLayout在这种情况下表现得如此奇怪。我寻找有人说类似于：“在这种情况下，onMesure（）返回0，因为...”，但无论如何感谢您的努力！ - pkk

看看我编辑过的回答，也许是Eclipse预览出了问题，或者由于某些奇怪的原因这个神奇地起作用了 :-) - 2Dee

实际上它是有效的，但奇怪的是，如果我想在foo下面添加一些内容，那将是不可能的。尽管如此，我仍然对为什么相对布局在这种情况下表现得如此奇怪感兴趣。 - pkk

我也是。这似乎与使用layout_centerVertical有关，尽管我不知道具体是什么原因导致了这个问题。 - 2Dee

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

- Thera

---

请在你的答案中添加一些解释。 - schrodingerscatcuriosity