问题
I'm trying to align three TextViews horizontally (as the title may suggest), but even after chaining they together and using app:layout_constrainedWidth="true" they're still being pushed out of the screen, strangely only by the left side when the middle or the last one grows large. Notice that I'm setting the android:maxLines="1" and android:ellipsize="end" and aligning they at the start of the screen, not sure if it matters though.
I also tried to limit their sizes, but on the case where there are two small texts and a very large one the large one will be ellipsized even when the layout still have some space left.
Sample layout:
<?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="match_parent"
android:background="@android:color/white"
android:padding="22dp">
<TextView
android:id="@+id/greenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_green_dark"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="@id/blueTextView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="@+id/blueTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_blue_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="@id/greenTextView"
app:layout_constraintEnd_toStartOf="@id/orangetextView"
app:layout_constraintStart_toEndOf="@id/greenTextView"
tools:text="Another TextView " />
<TextView
android:id="@+id/orangetextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_orange_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="@id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/blueTextView"
tools:text="Another TextView" />
</android.support.constraint.ConstraintLayout>
These are some cases using the sample layout
None of the TextViews are ellipsizing:
The first TextView is ellipsizing:
The last TextView don't ellipsize and pushes the other ones out of the screen:
These are some possible solutions that aren't covering all of the cases
Using android:maxWidth="90dp" to prevent the TextView to grow, but also limiting the text unnecessarily:
Using android:layout_width="0dp" to enable "match_constraint" is not a optimal solution as well, since the layout will reserve a third of the display width for each TextView, even if the text is smaller than that:
回答1:
Use a Flexbox
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="nowrap"
app:dividerDrawable="@drawable/ic_divider"
app:showDivider="middle">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:textColor="@android:color/holo_green_dark"
android:ellipsize="end"
android:text="Text View"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textColor="@android:color/holo_blue_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:text="Another TextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColor="@android:color/holo_orange_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:ellipsize="end"
android:text="Another TextView"/>
</com.google.android.flexbox.FlexboxLayout>
Output of this layout:
回答2:
Can you try this one (just make sure to replace androidx.constraintlayout.widget.ConstraintLayout with android.support.constraint.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="match_parent"
android:background="@android:color/white"
android:padding="22dp">
<TextView
android:id="@+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_green_dark"
app:layout_constraintEnd_toStartOf="@id/blueTextView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="First Very Long Text 123456789" />
<TextView
android:id="@+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_blue_dark"
app:layout_constraintBaseline_toBaselineOf="@id/greenTextView"
app:layout_constraintEnd_toStartOf="@id/orangetextView"
app:layout_constraintStart_toEndOf="@id/greenTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Second Very Long Text 123456789" />
<TextView
android:id="@+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_orange_dark"
app:layout_constraintBaseline_toBaselineOf="@id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/blueTextView"
tools:text="Third Very Long Text 123456789" />
</androidx.constraintlayout.widget.ConstraintLayout>
Ellipsize will work as expected.
回答3:
You can use linear layout instead. When the text grows it will ellipsized end with ...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="match_parent"
android:background="@android:color/white"
android:padding="22dp">
<TextView
android:id="@+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_green_dark"
tools:text="TextView" />
<TextView
android:id="@+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_blue_dark"
tools:text="Another TextView " />
<TextView
android:id="@+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@android:color/holo_orange_dark"
tools:text="Another TextView" />
</LinearLayout>
OUTPUT:
来源：https://stackoverflow.com/questions/54787494/how-to-proper-align-three-textviews-horizontally-with-constraintlayout