Android - ConstraintLayout - ellipsize end for large text

问题

I need some help regarding an Android layout. I have the following code:

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

The output is:

My problem is: If the main value(17.40) is too large, that value should be "ellipsized" to end, but it goes over the "Active" text.

The input for large text is:

I need something like that for large value:

PS: the unit and and the flag should be always displayed at the end of the main value.

Could you please help me with suggestions? I tried a lot of ideas, but didn't find a solution.

回答1:

Set Children Layout Width to 0dp

android:layout_width="0dp"

Set Right_toRightOf andLeft_toRightOf

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

回答2:

For that

1) you will have to specify fixed length for that, textview width 0dp won't work.

2) you need ellipsize attribute set to "end" to the textview.

3) along with maxlines attribute set to 1.

Tested this and works fine.

You can keep fix width as you like..

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

回答3:

First, you need to add android:ellipsize="end" and android:maxLines="1" to your TextView android:id="@+id/value". Then you need to add value and unit into a horizontal chain. Connect start of the chain to the parent start and end of the chain to start/end of the Guideline android:id="@+id/guideline".

After that value and unit will have the same width and fill whole space between the parent start and the Guideline android:id="@+id/guideline". To make the width different you can set android:layout_width="wrap_content" to unit or you can play with app:layout_constraintHorizontal_weight for both

The code can be like that:

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

It will look like this:

回答4:

Assuming you have your value TextView set up to ellipsize itself, you can solve this by programmatically setting the TextView's maximum width after the ConstraintLayout finishes laying out all the views.

I created a tiny app that just inflates the layout you posted in your question (though I had to change the flag to an image I had). I added these attrs to the value view:

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

And this is my Java code:

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);
    }
}

Here are some screenshots:

来源：https://stackoverflow.com/questions/45983394/android-constraintlayout-ellipsize-end-for-large-text

标签

android

android-constraintlayout