Android - ConstraintLayout - 对于大文本的末尾使用省略号

Question

我需要关于Android布局的一些帮助。 我有以下代码：

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content">

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.725" />

<TextView
    android:id="@+id/data_field_1_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dip"
    android:layout_marginTop="10dip"
    app:layout_constraintLeft_toLeftOf="@id/guideline"
    app:layout_constraintRight_toLeftOf="@id/guideline2"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="ACTIVE" />

<TextView
    android:id="@+id/data_field_1_value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_toEndOf="@id/data_field_1_name"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_1_name"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintRight_toRightOf="parent"
    tools:text="1750" />

<TextView
    android:id="@+id/data_field_2_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dip"
    android:layout_marginTop="8dip"
    app:layout_constraintLeft_toLeftOf="@id/guideline"
    app:layout_constraintRight_toLeftOf="@id/guideline2"
    app:layout_constraintTop_toBottomOf="@id/data_field_1_name"
    tools:text="ACTIVE" />

<TextView
    android:id="@+id/data_field_2_value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_toEndOf="@id/data_field_2_name"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintRight_toRightOf="parent"
    tools:text="1750" />


<TextView
    android:id="@+id/data_field_3_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dip"
    android:layout_marginTop="8dip"
    app:layout_constraintLeft_toLeftOf="@id/guideline"
    app:layout_constraintRight_toLeftOf="@id/guideline2"
    app:layout_constraintTop_toBottomOf="@id/data_field_2_name"
    tools:text="ACTIVE" />

<TextView
    android:id="@+id/data_field_3_value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_toEndOf="@id/data_field_3_name"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_3_name"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintRight_toRightOf="parent"
    tools:text="1750" />

<TextView
    android:id="@+id/value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_marginStart="15dip"
    android:textSize="25sp"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:text="17.40" />

<ImageView
    android:id="@+id/flag"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginTop="2dp"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintEnd_toEndOf="@+id/unit"
    app:layout_constraintStart_toStartOf="@+id/unit"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/unit"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="2dp"
    android:gravity="center_horizontal"
    app:layout_constraintBaseline_toBaselineOf="@id/value"
    app:layout_constraintStart_toEndOf="@+id/value"
    tools:text="KG" />

<TextView
    android:id="@+id/label"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="15dip"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_3_name"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@id/guideline"
    tools:text="TOTAL" />
</android.support.constraint.ConstraintLayout>

输出结果为：。

我的问题是：如果主要值（17.40）太大，则该值应该被“省略”到结尾，但它超出了“活动”文本。

大文本的输入为：。

我需要类似于此类似于大型值：。

注：单位和标志应始终显示在主要值的末尾。

请给我提供建议好吗？我尝试了很多想法，但没有找到解决方案。

- Cosmin Mihu

---

有任何解决方案吗？ - Harco

Answer 1

1. 将子控件布局宽度设置为0dp

android:layout_width="0dp"

2. 设置Right_toRightOf和Left_toRightOf

app:layout_constraintLeft_toRightOf="@+id/listingImageView" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"

- alexwan02

---

将宽度设为0dp完全解决了我的类似问题，谢谢。 - Amr Saber

1. 哪种布局需要设置android:layout_width="0dp"？
2. 哪个视图需要设置app:layout_constraintLeft_toRightOf="@+id/listingImageView" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"？

- Harco

能否解释一下将宽度设置为0如何工作，而不是使用wrap_content？ - Jim

这也解决了我的类似问题，谢谢！并点赞了！ - toantran

Answer 2

首先，您需要将 android:ellipsize="end" 和 android:maxLines="1" 添加到 TextView 的 android:id="@+id/value"。然后需要将 value 和 unit 放入水平链中。将链的起始点连接到父级起始点，并将链的结束点连接到 Guideline 的起始/结束位置 android:id="@+id/guideline"。

之后，value 和 unit 将具有相同的宽度，并填充父级起始点和 Guideline 的空间 android:id="@+id/guideline" 之间的整个区域。要使宽度不同，可以设置 unit 的 android:layout_width="wrap_content" 或同时调整两者的 app:layout_constraintHorizontal_weight。

代码示例如下：

<TextView
    android:id="@+id/value"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:layout_marginStart="15dip"
    android:textSize="25sp"
    android:ellipsize="end"
    android:maxLines="1"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintEnd_toStartOf="@+id/unit"
    tools:text="17.40000000" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/unit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="2dp"
    android:gravity="center_horizontal"
    android:maxLines="1"
    android:layout_marginEnd="8dp"
    app:layout_constraintBaseline_toBaselineOf="@id/value"
    app:layout_constraintStart_toEndOf="@+id/value"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    tools:text="KG" />

它将看起来像这样：

。

- TermLog

Answer 3

针对这个问题：

1) 你需要为其指定一个固定的长度，textview宽度为0dp是行不通的。

2) 你需要将ellipsize属性设置为“end”。

3) 同时将maxlines属性设置为1。

测试过，运行良好。

你可以根据自己的需要保持固定的宽度。

<TextView
    android:id="@+id/value"
    android:layout_width="140dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="15dip"
    android:ellipsize="end"
    android:maxLines="1"
    android:layout_marginStart="15dip"
    android:textSize="25sp"
    app:layout_constraintBaseline_toBaselineOf="@id/data_field_2_name"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:text="17.40000000000000" /> 

- Aalap Patel

---

2和3是正确的，我忘记在示例中添加它们了，它们已经在样式中了。 但对于1，我不能使用固定值。我需要将其设置为wrap_content。 - Cosmin Mihu

所以 wrap_content 属性的作用是它会根据需要自动扩展大小，而我的代码中只有 1 行，因此它会一直延伸到屏幕宽度的末端，然后在末尾显示省略号。但如果你想要实现特定的效果，就必须使用固定大小，否则它不会起作用。 - Aalap Patel

Answer 4

假设您已经设置好了带省略号的valueTextView，您可以通过在ConstraintLayout完成所有视图布局后以编程方式设置TextView的最大宽度来解决此问题。

我创建了一个小应用程序，只需填充您在问题中发布的布局（尽管我不得不将标志更改为我拥有的图像）。我向value视图添加了这些属性：

    android:maxLines="1"
    android:ellipsize="end"

这是我的Java代码：

public class MainActivity extends AppCompatActivity {

    private TextView value;
    private TextView data2;
    private TextView unit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        value = (TextView) findViewById(R.id.value);
        data2 = (TextView) findViewById(R.id.data_field_2_name);
        unit = (TextView) findViewById(R.id.unit);

        value.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    value.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
                else {
                    value.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }

                setMaxWidth();
            }
        });
    }

    private void setMaxWidth() {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) value.getLayoutParams();

        int maxWidth = data2.getLeft() - value.getLeft();
        int maxWidthConsideringUnits = maxWidth - unit.getWidth();
        int maxWidthIncludingMargin = maxWidthConsideringUnits - params.getMarginEnd();

        value.setMaxWidth(maxWidthIncludingMargin);
    }
}

这里是一些截图：

- Ben P.

Answer 5

我们开始吧。

<TextView
        android:id="@+id/value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="25sp"
        android:ellipsize="end"
        android:singleLine="true"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/unit"
        tools:text="17.40000" />

    <TextView
        android:id="@+id/unit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        app:layout_constraintBaseline_toBaselineOf="@id/value"
        app:layout_constraintStart_toEndOf="@+id/value"
        app:layout_constraintEnd_toEndOf="@id/guideline"
        tools:text="KG" />

请注意，确保父级ConstraintLayout的LayoutParam.width不是wrap_content。

- kimiar