【问题标题】:Place a TextView next to another TextView for longer text on Android在 Android 上将一个 TextView 放在另一个 TextView 旁边以获得更长的文本
【发布时间】:2019-03-21 18:36:14
【问题描述】:

我的目标是让 2 个 TextViews(textLefttextRight)彼此相邻。 textLeft 应该与父级的左侧对齐。 textRight 应该始终是textLeft 的直接右侧(而不是设备的最右侧),如果textLeft 太长,则不应将其推出屏幕。

水平LinearLayout 在这里没有用,因为使用权重会固定视图大小,这是不希望的。

我一直在使用这个RelativeLayout,如果textLeft 不太长,它可以正常工作。对于较长的文本,textRight 会被推离屏幕。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".TextAlignActivity">

    <TextView
            android:id="@+id/textLeft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="10sp"
            android:maxLines="3"
            android:ellipsize="end"
            android:text="Text On the Left - long random text to follow"
    />

    <TextView
            android:id="@+id/textRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/textLeft"
            android:layout_alignParentRight="true"
            android:textSize="10sp"
            android:maxLines="1"
            android:text="Text on the Right"
    />

</RelativeLayout>

我猜 ConstraintLayout 可能很适合这种情况,但我不是很熟悉。如果可能的话,我想避免这种情况,因为它需要对我现有的布局进行大量重写。

编辑:

  1. 为了简化我的查询,我在示例中使用了 2 个TextViews。在我的应用程序代码中,textLeft 是一个垂直的 LinearLayout,带有 2 个 TextViewstextLeftToptextLeftBottom),而不是单个 TextView,如示例所示。我希望适用于 2 TextViews 的解决方案也适用于 LinearLayoutTextView

  2. 1234563如果textLeft 很长,那么textRight 应该“粘”到设备右侧,textLeft 应该换行。

【问题讨论】:

  • @Wonay 该线程有所帮助,但已接受的答案中缺少的一个关键是固定边距被应用为对右孩子的黑客攻击。在我的问题中,我事先不知道 textRight 的宽度,因此不能在 textRight 上使用固定边距,在 textLeft 上使用等效填充。

标签: android android-layout


【解决方案1】:

编辑:

这种布局是一种“聊天”布局。您可以使用两个LinearLayout,一个是所有match_parent 的父级,另一个是两个TextViews 的持有者。请注意,后者的宽度为wrap_content

LinearLayoutlayout_weight 属性的意思是……粗略地说,较小的数字很重要。

另请参阅:https://developer.android.com/reference/android/widget/LinearLayout

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test test test test test test test test test test test test test test test"
                android:layout_weight="1"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello world"
                android:layout_weight="0"/>
    </LinearLayout>

    <Space android:layout_width="wrap_content" android:layout_height="20dp"/>

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

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test test test test test test test test "
                android:layout_weight="1"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello world"
                android:layout_weight="0"/>
    </LinearLayout>

</LinearLayout>

过时的答案

请注意,textLeft 的宽度为 0dp。

如果您在约束布局中将宽度(或高度)设置为 0,则意味着它将填充剩余的空白空间。

或者,您可以使用app:layout_constraintHorizontal_weight 0dp 宽度,您可以设置布局宽度的百分比。

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <TextView
            android:id="@+id/textLeft"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Long Long Long Long Long Long Long Long Long Long Long Long Long"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/textRight"
            app:layout_constraintTop_toTopOf="parent"/>

    <TextView
            android:id="@+id/textRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!  "
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/textLeft"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

【讨论】:

  • 如果 textLeft 很小,textRight 不会粘在 textLeft 上,它会被推到屏幕的右边缘,在 textLeft 和 textRight 之间留下很大的间隙。如果 textLeft 很长,则 textLeft 会自行包裹,根据需要为 textRight 留出足够的空间。
  • @Jaguar 我编辑了我的答案。请尝试我的新建议。
【解决方案2】:
    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text1ldksjdaskldjadlkjdaslkdjsl"
        android:textSize="20sp"
        app:layout_constraintEnd_toStartOf="@id/text2"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="text2dsjdakldjlkajdlskdjasldkjdlskdjasdlaskdjasldkj"
        android:textSize="20sp"
        android:gravity="right"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/text1"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

我不确定这是否是您所要求的,无论如何我只是检查了几个文本在两个文本视图中都较长的场景。 我还建议您将布局转换为约束布局,最终您会从中受益,您可以轻松扁平化树视图层次结构,而无需使用太多内部布局。

【讨论】:

  • 谢谢,但如果 textLeft 很小,这种方法不起作用 - 在这种情况下,textRight 位于设备的最右侧,但我需要它是 textLeft 的直接右侧。
  • 将 android:gravity of text2 改为向左而不是向右
  • 使用重力向左有点帮助,但 text2 现在从屏幕中间开始 - 如果 text1 有短文本,则 text1 和 text2 之间仍有很大差距。
  • text2 可以从屏幕中间开始,因为这取决于 text1 的长度,我检查了一些场景,当 text1 比 text2 短时,它会在它旁边。我注意到的唯一间隙是 text2 到布局末尾(如果 text2 有短文本)。当 text1 和 text2 之间存在间隙时,您发现了什么场景?
  • 看起来我们看到了不同的输出。几个小时前我更新了我的问题,说在我的应用程序中,我没有在左侧使用 text1,而是使用带有 2 个文本视图的垂直 LinearLayout。为了简单起见,我使用了它。您认为这会造成问题吗?
【解决方案3】:

你可以这样实现这段代码

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/textLeft"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="10sp"
    android:maxLines="3"
    android:ellipsize="end"
    android:text="Text On the Left - long random text to follow"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

<TextView
    android:id="@+id/textRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@+id/textLeft"
    android:layout_alignParentRight="true"
    android:textSize="10sp"
    android:maxLines="1"
    android:text="Text on the Right"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"  />

或者那个

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/textLeft"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="10sp"
    android:maxLines="3"
    android:ellipsize="end"
    android:text="Text On the Left - long random text to follow"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_margin="10dp"/>

<TextView
    android:id="@+id/textRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@+id/textLeft"
    android:layout_alignParentRight="true"
    android:textSize="10sp"
    android:maxLines="1"
    android:text="Text on the Right"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@id/textLeft"
    android:layout_margin="10dp"/>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-14
    • 2018-01-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多