android - 如何防止 View 在相对布局中重叠？

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>

Answer 1

要使用 RelativeLayout 获得相同的结果，请使用 android:layout_toLeftOf="@+id/right_text"。它将此 View 的右边缘定位到给定 anchor View 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>

上述布局的结果: