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，但是我无法按照我的要求工作。

编辑

这里有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

您可以通过使用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" />

Answer 3

您可以添加属性 maxWidth ，并在两个TextView中提供相同的最大宽度，如下所示。

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

我已经更新了布局。尝试使用这种布局

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

太大时，请避免布局元素将第二个元素移出布局

4 个答案: