Android 相对布局低于 2 个视图

Android RelativeLayout below 2 views

提问by Ben

I have a RelativeLayoutlike this:

我有一个RelativeLayout这样的：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/single_row"
    android:padding="12dip">

    <ImageView
        android:id="@+id/page_image"
        android:layout_marginRight="6dip"
        android:layout_width="66dip"
        android:layout_height="66dip"
        android:layout_alignParentLeft="true"
        android:src="@drawable/no_photo" />
    <TextView
        android:id="@+id/page_name"
        style="@style/pulse_content"
        android:layout_alignTop="@id/page_image"
        android:layout_toRightOf="@id/page_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/page_desc"
        android:layout_below="@id/page_name"
        style="@style/pulse_content"
        android:layout_alignLeft="@id/page_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Principal Consultant" />
    <Button
        android:id="@+id/follow_button"
        android:layout_below="@id/author_image"
        android:layout_marginTop="15dip"
        android:layout_alignParentBottom="true"
        android:text="Follow"
        style="@style/follow_button" />
</RelativeLayout>

The issue I'm running into is that I want the follow_buttonto be below both the page_descas well as the page_image. Sometimes the page_desccontent will have a height bigger than the size of the image, sometimes not. The issue is that if I set the follow_buttonbelow either the image or the description, then the other one will get clipped. Is there an efficient / effective way to ensure that the image or page_descare always visible and above the button?

我遇到的问题是我希望follow_button低于page_desc和page_image. 有时page_desc内容的高度会大于图像的大小，有时则不会。问题是，如果我在follow_button下面设置图像或描述，那么另一个将被剪裁。是否有一种高效/有效的方法来确保图像或page_desc始终可见并位于按钮上方？

采纳答案by Zsombor Erd?dy-Nagy

Here you go:

干得好：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/single_row"
    android:padding="12dip">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/page_image"
            android:layout_marginRight="6dip"
            android:layout_width="66dip"
            android:layout_height="66dip"
            android:layout_alignParentLeft="true"
            android:src="@drawable/no_photo" />
        <TextView
            android:id="@+id/page_name"
            style="@style/pulse_content"
            android:layout_alignTop="@id/page_image"
            android:layout_toRightOf="@id/page_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/page_desc"
            android:layout_below="@id/page_name"
            style="@style/pulse_content"
            android:layout_alignLeft="@id/page_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Principal Consultant" />
    </RelativeLayout>

    <Button
        android:id="@+id/follow_button"
        android:layout_marginTop="15dip"
        android:text="Follow"
        style="@style/follow_button" />
</LinearLayout>

回答by Fuzzical Logic

The answer here requires very little change. You had most of your layout correct, however, there is one option messing everything up. AlignParentXXXX will often take a "false" priority over your LayoutXXXX options. So, by setting your Button to AlignParentBottom, you are telling the RelativeLayout that the Button's size is not calculated in the parent layout size.

这里的答案需要很少的改变。你的大部分布局都是正确的，但是，有一个选项把一切都搞砸了。AlignParentXXXX 通常会优先于您的 LayoutXXXX 选项。因此，通过将您的 Button 设置为 AlignParentBottom，您是在告诉 RelativeLayout 按钮的大小不是在父布局大小中计算的。

You may resolve the issue by simply removing AlignParent="true" from your Button. The result code is below and tested. This solution keeps in line with your desires, I believe.

您可以通过简单地从按钮中删除 AlignParent="true" 来解决该问题。结果代码如下并经过测试。我相信这个解决方案符合您的愿望。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/single_row"
    android:padding="12dip">

    <ImageView
        android:id="@+id/page_image"
        android:layout_marginRight="6dip"
        android:layout_width="66dip"
        android:layout_height="66dip"
        android:layout_alignParentLeft="true"
        android:src="@drawable/no_photo" />
    <TextView
        android:id="@+id/page_name"
        style="@style/pulse_content"
        android:layout_alignTop="@id/page_image"
        android:layout_toRightOf="@id/page_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/page_desc"
        android:layout_below="@id/page_name"
        style="@style/pulse_content"
        android:layout_alignLeft="@id/page_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Principal Consultant" />
    <Button
        android:id="@+id/follow_button"
        android:layout_below="@id/author_image"
        android:layout_marginTop="15dip"
        android:text="Follow"
        style="@style/follow_button" />
</RelativeLayout>

I ran into many similar issues with AlignParent when WrapContent was on the Parent. Top and Bottoms positioning creates undesired behavior if not prepared for it. I find, in general, it is best to use only one or the other (if at all) and line up the rest above or below that.

当 WrapContent 在 Parent 上时，我遇到了许多与 AlignParent 类似的问题。如果没有做好准备，顶部和底部定位会产生不良行为。我发现，一般来说，最好只使用一个或另一个（如果有的话），并将其余的排在其上方或下方。

回答by HandlerExploit

Since everything is interdependent in the RelativeLayout it is irrelevant what order you place it in, but it does matter if you are trying to access one view before its created. For example, using the android:layout_below attribute is not exactly what you wanted for the Button. If you set the other views android:layout_above the button it would make the views always above it.

由于在 RelativeLayout 中一切都是相互依赖的，因此放置它的顺序无关紧要，但是如果您尝试在创建之前访问一个视图，这很重要。例如，使用 android:layout_below 属性并不是您想要的 Button。如果您设置其他视图 android:layout_above 按钮，它会使视图始终位于其上方。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/single_row"
    android:padding="12dip">

    <Button
        android:id="@+id/follow_button"
        android:layout_marginTop="15dip"
        android:layout_alignParentBottom="true"
        android:text="Follow"
        style="@style/follow_button" />
    <ImageView
        android:id="@+id/page_image"
        android:layout_above="@id/follow_button"
        android:layout_marginRight="6dip"
        android:layout_width="66dip"
        android:layout_height="66dip"
        android:layout_alignParentLeft="true"
        android:src="@drawable/no_photo" />
    <TextView
        android:id="@+id/page_name"
        android:layout_above="@id/follow_button"
        style="@style/pulse_content"
        android:layout_alignTop="@id/page_image"
        android:layout_toRightOf="@id/page_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/page_desc"
        android:layout_above="@id/follow_button"
        android:layout_below="@id/page_name"
        style="@style/pulse_content"
        android:layout_alignLeft="@id/page_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Principal Consultant" />
</RelativeLayout>