两个TextView并排，只有一个显示省略号？

Question

两个TextView并排，只有一个显示省略号？

68

我想在一个列表项中让两个TextView元素并排显示，其中一个对齐左侧，另一个对齐右侧。就像这样：

|<TextView>               <TextView>|

（| 表示屏幕的边缘）

但是，左侧的 TextView 可能会有太长无法适应屏幕的内容。在这种情况下，我希望它可以省略但仍然显示整个右侧的 TextView。类似于：

|This is a lot of conte...<TextView>|

我已经尝试了许多次，使用了LinearLayout和RelativeLayout，唯一的解决办法是使用RelativeLayout，并在左侧的TextView上加上marginRight,使其足够大以清除右边的TextView。然而，正如您所想象的那样，这并不是最佳解决方案。

还有其他的解决方案吗？

最终，LinearLayout的解决方案:

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="horizontal"
    >
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:ellipsize="end"
        android:inputType="text"
        />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="0"
        android:layout_gravity="right"
        android:inputType="text"
        />
</LinearLayout>

旧的、TableLayout 的解决方案：

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="1"
    android:shrinkColumns="0"
    >
    <TableRow>
        <TextView android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true"
            />
        <TextView android:id="@+id/date"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:ellipsize="none"
            android:gravity="right"
            />
    </TableRow>
</TableLayout>

- Felix

我也想点赞这个回答。 :) - John T

7个回答

17

针对我遇到的同样问题，LinearLayout的解决方案适用于我。我将其发布为单独的答案，因为不清楚对于提问者什么有效或无效。

有一个区别。 TableLayout 对我来说不太理想，因为我有两行数据，我希望底部行的行为与这个问题描述的一样，并且顶部行可以跨越整个区域。针对该问题的回答已在另一个SO问题中回答：TableLayout 中的 Colspan ，但 LinearLayout 更简单。

虽然让宽度正确需要花费我一些时间。我包括使用 0dp 宽度进行性能调整的 Android Lint 调整项。

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="horizontal"
    >
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:inputType="text"
        />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="0"
        android:layout_gravity="right"
        android:inputType="text"
        />
</LinearLayout>

- davenpcj

2

这是最佳答案，因为从性能角度考虑，对于这种情况最好使用LinearLayout而不是Table（或Relative）。 - krossovochkin

15

使用TableLayout，并将两个TextView放在表格行中，试试看。我还没有尝试过。

- ud_an

1

谢谢，最终解决了。我已经编辑了问题并包含了我找到的解决方案。 - Felix

2

有很多关于此问题的答案，SO 上也有几乎相同的重复问题。建议的方法通常有效，但只是部分解决。把它放进一个 LinearLayout，再用一个额外的 RelativeLayout 包裹整个布局，或者使用一个 TableLayout；所有这些似乎都能解决更简单布局的问题，但如果你需要这两个 TextView 放在更复杂的布局中，或者需要重复使用相同的布局，例如通过一个 RecyclerView，那么事情会很快变得混乱。

我找到的唯一真正有效的解决方案，无论你把它放在什么样的大布局中，都可以始终如一地工作，那就是自定义布局。它非常简单易实现，而且尽可能精简，可以保持布局合理扁平，并且易于维护——因此从长远来看，我认为这是解决问题的最佳方案。

public class TwoTextLayout extends ViewGroup {

  public TwoTextLayout(Context context) {
    super(context);
  }

  public TwoTextLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public TwoTextLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    final int count = getChildCount();
    if (count != 2)
      throw new IllegalStateException("TwoTextLayout needs exactly two children");

    int childLeft = this.getPaddingLeft();
    int childTop = this.getPaddingTop();
    int childRight = this.getMeasuredWidth() - this.getPaddingRight();
    int childBottom = this.getMeasuredHeight() - this.getPaddingBottom();
    int childWidth = childRight - childLeft;
    int childHeight = childBottom - childTop;

    View text1View = getChildAt(0);
    text1View.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST));
    int text1Width = text1View.getMeasuredWidth();
    int text1Height = text1View.getMeasuredHeight();

    View text2View = getChildAt(1);
    text2View.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST));
    int text2Width = text2View.getMeasuredWidth();
    int text2Height = text2View.getMeasuredHeight();

    if (text1Width + text2Width > childRight)
      text1Width = childRight - text2Width;

    text1View.layout(childLeft, childTop, childLeft + text1Width, childTop + text1Height);
    text2View.layout(childLeft + text1Width, childTop, childLeft + text1Width + text2Width, childTop + text2Height);
  }
}

实现起来非常简单，只需测量两个文本（或任何其他子视图），如果它们的组合宽度超过布局宽度，则减小第一个视图的宽度。

如果您需要进行修改，例如将第二个文本与第一个文本的基线对齐，那也很容易解决：

text2View.layout(childLeft + text1Width, childTop + text1Height - text2Height, childLeft + text1Width + text2Width, childTop + text1Height);

或者采用其他解决方案，例如将第二个视图相对于第一个视图进行缩小，向右对齐等。

- Gábor

0

为什么不在右侧的TextView上设置左边距？我正在使用这种方法。

|<TextView>       <ImageButton>|

它可以正常工作。

- Maragues

它可能适用于您，因为您的“ImageButton”始终具有相同的宽度。我的变化，所以对我没有用。 - Felix

很高兴TableLayout对您有用 :) 这是一个类似的问题，涉及到自适应按钮 http://stackoverflow.com/questions/3530182/linearlayout-text-wrap-problem-when-having-two-buttons-of-same-size-plus-one-stre/3530322 - Maragues

0

使用 ConstraintLayout 的解决方案

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:padding="8dp">

    <TextView
        android:id="@+id/leftText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintEnd_toStartOf="@id/rightText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="This is a lot of content that should be cut" />

    <TextView
        android:id="@+id/rightText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Right text" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Deni Erdyneev

0

当我面对类似的问题时，我采取了以下措施：我需要：

|<TextView, may be long> <TextViewFixedSize>      |
|<TextView, may be longer ...> <TextViewFixedSize>|
|<TextViewLong> <TextViewFixedSize>               |

您可以使用类似这样的解决方案：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/layoutRecommendedServiceDescription"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/textViewRecommendedServiceTitle"
    app:layout_constraintTop_toBottomOf="@id/textViewRecommendedServiceTitle">
    <TextView
        android:id="@+id/textViewRecommendedService1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:lines="1"
        android:maxLines="1"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@+id/textViewRecommendedServicePopular"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="Long text"
        tools:visibility="visible" />
    <TextView
        android:id="@+id/textViewRecommendedServicePopular"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:lines="1"
        android:text="@string/services_popular"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textViewRecommendedService1"
        app:layout_goneMarginStart="0dp"
        tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>

- Aleksey Kislyakov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- capecrawler · Accepted Answer

只是一个想法，为什么不在xml布局中先声明右侧的textview，并将其宽度设置为wrap content，android:layout_alignParentRight="true" 和 android:gravity="right"。然后声明左侧的textview，将其宽度设置为fill parent，android:layout_toLeftOf={右侧textview的id}，以RelativeView作为根视图。

通过先声明右侧的textview，其所需宽度将首先被计算并占据视图，而左侧的textview将占据视图的剩余空间。

我尚未尝试过这个方法，但它可能会给你一些想法。

[更新]

我尝试创建了一个xml资源布局...它似乎可以用...

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <TextView 
    android:id="@+id/right"
    android:layout_alignParentRight="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:text="right"
    >
  </TextView>
  <TextView 
    android:id="@+id/left"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@id/right"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:singleLine="true"
    android:maxLines="1"
    android:text="too looooooooooong ofskgjo sdogj sdkogjdfgds dskjgdsko jgleft"
    >
  </TextView>
</RelativeLayout>