Избегайте элемента макета для перемещения второго элемента из макета, когда он слишком большой

Question

У меня есть два TextViews в одном ряду, рядом друг с другом. Первый TextView может быть настолько большим, что может быть больше ширины экрана. Поэтому, когда это происходит, мне нужно, чтобы второй был видимым, а первый должен был иметь ellipsize = true и показывать 3 точки. Второй всегда имеет более или менее одинаковый размер, и он должен быть всегда видимым.

Вот что у меня сейчас:

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/horizontalItemTitle"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/horizontalItemDescriptionSecond"
            app:layout_constraintStart_toStartOf="parent">
        <TextView
                android:id="@+id/horizontalItemDescription2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/spacing_x_small"
                android:maxLines="1"
                android:ellipsize="end"
                android:textColor="@color/item_subtitle"
                android:textSize="@dimen/text_size_caption"
                tools:text="10 songs"
                style="@style/AppTheme.Text.Body_2" />
        <TextView
                android:id="@+id/horizontalItemDescriptionSecond2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/spacing_x_small"
                android:maxLines="1"
                android:layout_toEndOf="@+id/horizontalItemDescription2"
                android:textColor="@color/item_subtitle"
                android:textSize="@dimen/text_size_caption"
                android:visibility="gone"
                android:gravity="start"
                android:layout_marginLeft="5dp"
                android:layout_marginStart="5dp"
                tools:text=", 45 min"
                tools:visibility="visible"
                style="@style/AppTheme.Text.Body_2" />
    </RelativeLayout>

Я также пытался с ConstraintLayout и LinearLayout, но я не мог заставить его работать так, как я хочу.

EDIT

Вот 2 изображения того, как это должно быть. Пожалуйста, обратите внимание на последнюю строку

1.- Когда первое текстовое представление маленькое.

второй текстовый вид находится рядом с первым.

2.- Когда первое текстовое представление большое.

Первый вид текста заканчивается на ..., но не перемещает второй вид текста из макета

Answer 1

Этого можно добиться, работая с макетом ограничения:

<androidx.constraintlayout.widget.ConstraintLayout
        android:background="@color/red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <TextView
            app:layout_constraintTop_toTopOf="parent"
            android:id="@+id/test1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/test2"
            android:background="@color/green"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constrainedWidth="true"
            android:maxLines="1"
            android:ellipsize="end"
            android:text="10 songs"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintHorizontal_chainStyle="packed" />

    <TextView
            android:background="@color/primaryLight"
            android:id="@+id/test2"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/test1"
            app:layout_constraintEnd_toEndOf="parent"
            android:maxLines="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=", 45 min" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Вы можете добавить свойство maxWidth и обеспечить равную максимальную ширину в обоих текстовых представлениях, как это.

<TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="@dimen/_100sdp"
                android:maxLines="1"
                android:ellipsize="end"
                 />
<TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="@dimen/_100sdp"
                android:maxLines="1"
                android:ellipsize="end"
                 />

Answer 3

Я обновил макет. Попробуйте с этим макетом

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1"
    app:layout_constraintTop_toBottomOf="@+id/horizontalItemTitle"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/horizontalItemDescriptionSecond"
    app:layout_constraintStart_toStartOf="parent">
    <TextView
        android:id="@+id/horizontalItemDescription2"
        android:layout_width="0dp"
        android:layout_weight="0.7"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/spacing_x_small"
        android:maxLines="1"
        android:ellipsize="end"
        android:textColor="@color/item_subtitle"
        android:textSize="@dimen/text_size_caption"
        tools:text="10 songs"
        style="@style/AppTheme.Text.Body_2" />
    <TextView
        android:id="@+id/horizontalItemDescriptionSecond2"
        android:layout_width="0dp"
        android:layout_weight="0.3"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/spacing_x_small"
        android:maxLines="1"
        android:textColor="@color/item_subtitle"
        android:textSize="@dimen/text_size_caption"
        android:visibility="gone"
        android:gravity="start"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        tools:text=", 45 min"
        tools:visibility="visible"
        style="@style/AppTheme.Text.Body_2" />
</RelativeLayout>

Answer 4

Вы можете сделать это, используя атрибут android:layout_weight и задав android:maxWidth в соответствии с большим текстом.

<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal">
<TextView
    android:id="@+id/horizontalItemDescription2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:maxWidth="100dp"
    android:layout_marginTop="@dimen/spacing_x_small"
    android:maxLines="1"
    android:ellipsize="end"
    android:textColor="@color/item_subtitle"
    android:textSize="@dimen/text_size_caption"
    tools:text="10 songs"
    style="@style/AppTheme.Text.Body_2" />
<TextView
    android:id="@+id/horizontalItemDescriptionSecond2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:layout_marginTop="@dimen/spacing_x_small"
    android:maxLines="1"
    android:textColor="@color/item_subtitle"
    android:textSize="@dimen/text_size_caption"
    android:visibility="visible"
    android:gravity="start"
    android:layout_marginLeft="5dp"
    android:layout_marginStart="5dp"
    tools:text=", 45 min"
    tools:visibility="visible"
    style="@style/AppTheme.Text.Body_2" />