如何在不重叠的情况下水平对齐两个 Textview？

Question

我正在尝试在Textview 的末尾添加一个 N（新）徽章。但是 Android Studio 给了我两个 Textviews、hashtag_list_row_title 和 hashtag_list_row_new 可以重叠，如果一个 Textview 包含一些冗长的字符串。

在生产环境中，hashtag_list_row_title 不太可能长，但我想防止两个Textviews 重叠。我怎样才能做到这一点？

我更喜欢 hashtag_list_row_new 优先于 hashtag_list_row_title 的方式，因为这样更自然地显示 N 徽章。

到目前为止，我的代码如下。

list_row.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hashtag_list_row_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_list_row_selector" >

    <RelativeLayout
        android:id="@+id/hashtag_list_row_title_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="24dp"
        android:layout_toLeftOf="@+id/hashtag_list_row_post_count"
        android:layout_toStartOf="@+id/hashtag_list_row_post_count">

        <TextView
            android:id="@+id/hashtag_list_row_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:textColor="@color/hotspot_list_row_title"
            android:textSize="16sp"
            android:textStyle="bold"
            android:text="asdfasdfsadfsadfsfsfsafasdfsafsfasfasfasf" />

        <TextView
            android:id="@+id/hashtag_list_row_new"
            android:layout_toRightOf="@+id/hashtag_list_row_title"
            android:layout_toEndOf="@+id/hashtag_list_row_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/red"
            android:textStyle="bold"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="11dp"
            android:layout_marginStart="11dp"
            android:text="@string/N" />
    </RelativeLayout>

    <TextView
        android:id="@+id/hashtag_list_row_post_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:background="@drawable/btn_post_normal"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="#787878"
        android:textSize="12sp"
        android:textStyle="bold" />

    <View
        android:id="@+id/hashtag_list_row_divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/hashtag_list_row_title_layout"
        android:layout_marginTop="24dp"
        android:background="@color/bg_horizontal_divider" />

</RelativeLayout>

编辑

右边的Textview应该放在左边的旁边，它有不同的长度。而且我想防止左边的长度超过一定长度的情况，这样右边的就被隐藏了，或者重叠了，或者其他什么。

它应该如下所示。

| (文本) N (空格空)|

| （更多文字）N（空白）|

| （更多文字更多……）N |

编辑 2

我希望左边的 TextView 在超出行宽时被椭圆化，除了 N 徽章。我想要这个。

我不想要这个。

编辑 3

N 徽章不应一直放在右侧。当长度小于水平宽度时，我希望将徽章放在左侧TextView 的右侧。

很好。

没办法。

Answer 1

遇到了同样的问题。

你想要的是右边的 TextView：

android:layout_toEndOf="@+id/member_count"

ID为左侧TextView的ID。

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/member_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:textStyle="bold"
            android:text="10"
            android:textSize="16sp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:layout_toEndOf="@+id/member_count"
            android:text="Members"
            android:textSize="16sp"/>

    </RelativeLayout>

Answer 2

使用 LinearLayout 代替 RelativeLayout 很容易

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hashtag_list_row_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/hashtag_list_row_title_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp">

        <TextView
            android:id="@+id/hashtag_list_row_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:text="dsfjsdk djkfhd hfdkjs afhdks hfkh  dsafkjhd fkjdh fdgf"
            android:textSize="16sp"
            android:layout_weight="1"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/hashtag_list_row_new"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="11dp"
            android:layout_marginStart="11dp"
            android:layout_marginTop="2dp"
            android:layout_toEndOf="@+id/hashtag_list_row_title"
            android:layout_toRightOf="@+id/hashtag_list_row_title"
            android:text="N"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/hashtag_list_row_post_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:singleLine="true"
            android:text="text2"
            android:textColor="#787878"
            android:textSize="12sp"
            android:textStyle="bold" />

    </LinearLayout>

</RelativeLayout>

检查修改后的代码

Answer 3

试试下面的方法。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hashtag_list_row_root"
    android:background="@drawable/bg_list_row_selector"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/hashtag_list_row_title_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="24dp"
        android:layout_toLeftOf="@+id/hashtag_list_row_post_count"
        android:layout_toStartOf="@+id/hashtag_list_row_post_count">

        <TextView
            android:singleLine="true" 
            android:id="@+id/hashtag_list_row_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:textColor="@color/hotspot_list_row_title"
            android:textSize="16sp"
            android:textStyle="bold"
            android:text="asdfasdfsadfsadfsfsfsafasdfsafsfasfasfasf" />

    </RelativeLayout>

    <TextView
        android:id="@+id/hashtag_list_row_post_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:background="@drawable/btn_post_normal"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="#787878"
        android:textSize="12sp"
        android:textStyle="bold" />

    <TextView
        android:layout_centerVertical="true"
        android:id="@+id/hashtag_list_row_new"
        android:layout_toLeftOf="@+id/hashtag_list_row_post_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/red"
        android:textStyle="bold"
        android:layout_marginTop="2dp"
        android:layout_marginLeft="11dp"
        android:layout_marginStart="11dp"
        android:text="@string/N" />

    <View
        android:id="@+id/hashtag_list_row_divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/hashtag_list_row_title_layout"
        android:layout_marginTop="24dp"
        android:background="@color/bg_horizontal_divider" />

</RelativeLayout>

结果将类似于以下内容。我必须删除一些指向我的项目没有的资源的属性，所以下图只是一个模型。代码已更新以适合您。