如何使用ConstraintLayout在水平方向正确对齐三个TextView [英] How to proper align three TextViews horizontally with ConstraintLayout

问题描述

我试图水平对齐三个TextView(如标题所示)，但是即使将它们链接在一起并使用 app:layout_constrainedWidth ="true" 后，它们仍然被推出屏幕，奇怪的是，当中间或最后一个屏幕变大时，它只出现在左侧.请注意，我正在设置 android:maxLines ="1" 和 android:ellipsize ="end" 并将它们在屏幕开始处对齐，不确定是否固然重要.

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.

示例布局:

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

---

在某些情况下使用示例布局

没有一个TextViews省略:

---

These are some cases using the sample layout

None of the TextViews are ellipsizing:

第一个TextView省略了:

The first TextView is ellipsizing:

最后一个TextView不会椭圆化，而将其他的TextView推出屏幕:

The last TextView don't ellipsize and pushes the other ones out of the screen:

使用 android:maxWidth ="90dp" 防止TextView增长，但也不必要地限制了文本:

Using android:maxWidth="90dp" to prevent the TextView to grow, but also limiting the text unnecessarily:

使用 android:layout_width ="0dp" 启用"match_constraint"也不是一个最佳解决方案，因为布局将为每个TextView保留三分之一的显示宽度，即使文本小于:

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:

推荐答案

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

此布局的输出:

这篇关于如何使用ConstraintLayout在水平方向正确对齐三个TextView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！