如何水平对齐两个Textview而不重叠？

Question

我正在尝试在Textview的末尾放置一个N（新）徽章。但Android Studio为我提供了两个Textview，hashtag_list_row_title和hashtag_list_row_new可以重叠，如果一个Textview包含一些冗长的字符串。

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

我更喜欢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应该放在左侧的Textview旁边，它有不同的长度。而且我想防止左边一个长度超过一定长度的情况，以便正确的一个被隐藏，或重叠，或其他什么。

它应如下所示。

| （文字）N（空格空）|

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

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

编辑2

我希望当除了N徽章之外超出行的宽度时，将左侧TextView进行椭圆化。我想要这个。

我不想要这个。

编辑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>

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