Place a TextView next to another TextView for longer text on Android

问题

My goal is to have 2 TextViews (textLeft, textRight) next to each other. textLeft should be aligned to the left side of parent. textRight should always be an immediate right of textLeft (not on the extreme right of device), and it should not be pushed out of screen if textLeft is too long.

Horizontal LinearLayout is of no use here as using weights will fix the view size, and that's not desired.

I have been using this RelativeLayout which works fine if textLeft is not too long. With longer texts, textRight is pushed off screen.

<?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>

I guess ConstraintLayout may be a good fit for such cases, but I am not very familiar. I would like to avoid that if possible, since it will need a heavy re-write of my existing layout.

EDIT:

In order to simplify my query, I am using 2 TextViews in the example. In my app code textLeft is a vertical LinearLayout with 2 TextViews (textLeftTop and textLeftBottom) instead of a single TextView as shown in example. I am hoping the solution that works for 2 TextViews should also work for a LinearLayout and TextView.
Based on the solutions so far, I should clarify that I need the textRight to be on immediate right of textLeft (not device right) if textLeft is not long. If textLeft is long, then textRight should "stick" to the device right, and textLeft should wrap text.

回答1:

Edit:

This layout is a kind of "chatting" layout. You can use two LinearLayout, one is parent of all with match_parent, and the other is holder of two TextViews. Note that latter one has wrap_content width.

layout_weight attribute of LinearLayout means... roughly speaking, smaller number is important.

See also: 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>

Outdated answer

Note that textLeft has 0dp width.

If you set width (or height) to 0 in constraint layout, it means it will fill rest of the empty space.

Or, you can use app:layout_constraintHorizontal_weight with 0dp width, you can set percentage of width of layout.

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

回答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>

I'm not sure if this is what you were asking for, in any case I just checked a few scenarios where the texts are longer in both textviews. I also suggest you to convert your layouts to constraint layout, eventually you will benefit from it, you could easily flatten your tree view hierarchy without using too many inner layouts.

回答3:

you can implement this code in this way

<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"  />

or that one

<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"/>

来源：https://stackoverflow.com/questions/55251827/place-a-textview-next-to-another-textview-for-longer-text-on-android

标签

android

android-layout