如何在相对布局中防止视图重叠？

Question

目前，我有两个TextView。一个对齐在RelativeLayout的左侧，另一个对齐在右侧。左侧的TextView比右侧的短得多。在某些情况下，左侧的TextView会有两行。当这种情况发生时，它会重叠右侧对齐的TextView。

有什么方法可以防止这种情况发生吗？或者有没有办法说如果左侧的TextView有两行，则将右侧的TextView放在第二行？

我在这里遇到了名称和时间的问题：

<RelativeLayout 
    android:layout_width="wrap_content"
    android:id="@+id/relativeLayout"
    android:layout_height="wrap_content">

    <TextView
        android:text="TextView"
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10sp"
        android:textStyle="bold"
        android:textSize="16sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/address"
        android:text="address"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name"
        android:layout_alignLeft="@+id/name"
        android:layout_marginLeft="30sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_toRightOf="@+id/address"
        android:text=""
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/address"
        android:layout_alignBottom="@+id/address"
        android:id="@+id/crossStreet"/>

    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/time"
        android:text="Time"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10sp"/>

</RelativeLayout>

- mergesort

Answer 1

如果要使用RelativeLayout来获得相同的结果，请使用android:layout_toLeftOf="@+id/right_text"。它将把该视图的右边缘定位在给定锚点视图ID的左侧。

请按照以下示例操作：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/margin_material_small"
    android:paddingRight="@dimen/margin_material_small">
    <TextView
        android:id="@+id/long_text"
        style="@style/Base.TextAppearance.AppCompat.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/right_text"
        android:singleLine="true"
        tools:text="Some text field that will definitely overlap with another one" />
    <TextView
        android:id="@+id/right_text"
        style="@style/Base.TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:singleLine="true"
        tools:text="10.34" />
    <TextView
        android:id="@+id/subtext"
        style="@style/Base.TextAppearance.AppCompat.Medium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/long_text"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/right_text"
        android:singleLine="true"
        tools:text="Some other text slightly smaller"/>
</RelativeLayout>

上述布局的结果：

- Michal

---

这绝对比目前被接受的答案更可取。没有必要在相对布局中再嵌套另一个容器（线性布局）。你应该尽可能减少容器的嵌套。 - PentaPenguin

Answer 2

你可以将这两个TextView放在一个水平方向的LinearLayout中（该LinearLayout仍应是RelativeLayout的子元素），然后为该LinearLayout内的每个TextView分配适当的权重属性。

- Trevor

---

太棒了，它起作用了。我还将时间对齐到线性布局的右侧，以备将来参考。 - mergesort

我应该调整权重吗？我有0.35和0.65让它工作，但0.4和0.6会产生奇怪的结果。 - mergesort

Answer 3

最佳解决方案：

android:layout_toStartOf="@id/item_on_the_right"

- Zahid Rasheed

Answer 4

请查看下面的代码，对您更有帮助。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout android:layout_width="fill_parent"
        android:weightSum="1.0" android:id="@+id/relativeLayout"
        android:layout_height="wrap_content">
        <TextView android:text="TextView1 hhhhh hhhhhhhh hhhhhhhh hhhhhhh hhhhhh"
            android:id="@+id/name" android:layout_weight="0.5"
            android:layout_width="0dip" android:layout_height="wrap_content"
            android:layout_marginLeft="10sp" android:textStyle="bold"
            android:textSize="16sp"></TextView>
        <TextView android:layout_width="0dip" android:layout_weight="0.5"
            android:id="@+id/time" android:text="Textview4"
            android:layout_height="wrap_content" android:layout_alignParentRight="true"
            android:layout_marginRight="10sp"></TextView>
    </LinearLayout>
</LinearLayout>

- Nikhil

Answer 5

<RelativeLayout
        android:id="@+id/relativeParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/titleLeft"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_toLeftOf="@+id/imageRight"
            android:layout_alignParentStart="true" />

        <ImageView
            android:id="@+id/imageRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:src="@drawable/image" />
</RelativeLayout>



android:layout_toLeftOf="@+id/imageRight"
android:layout_alignParentStart="true"

没有添加额外的LinearLayout就完成了操作。

- fifth