android constraintlayout，椭圆不能按预期工作答案

【问题标题】：android constraintlayout, ellipse does not work as expectedandroid constraintlayout，椭圆不能按预期工作
【发布时间】：2020-03-21 22:43:06
【问题描述】：

尝试使用约束布局，但无法正确显示椭圆。

它有三列，左图标；中间部分（有两条线）；右侧图标；

左图标应该左对齐父，右图标应该右对齐父，中间部分应该左对齐左图标。

| [left icon] | [first line][B]       | [right icon] |
|             | [second line][other]  |              |

中间部分“第一行......”当文本太长时应该显示省略号，当文本太长时，“第二行...”也应该显示省略号

但是当文本太长时，第一行越过右侧图标，第二行确实显示省略号，但整行也越过右侧图标，尽管它们有

app:layout_constraintRight_toLeftOf="@+id/_logo"

设置为放置在右侧图标的左侧（“@+id/_logo”）

为什么代码没有做它应该做的事情，或者有什么不对的地方？

xml：

<?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:id="@+id/_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="20dp"
    android:background="?android:attr/selectableItemBackground"
    android:paddingStart="20dp"
    android:paddingEnd="20dp"

    tools:background="#00880088"
    >

    <View android:id="@+id/top_divider"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_marginBottom="20dp"
        android:background="#888"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/_top_horizontal_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="@+id/top_divider"
        app:layout_constraintGuide_begin="@dimen/social_content_padding" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="36dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/_top_horizontal_guideline_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="@+id/top_divider"
        app:layout_constraintGuide_begin="52dp" />


    <ImageView
        android:id="@+id/_avatar"
        android:layout_width="@dimen/social_avatar_size"
        android:layout_height="@dimen/social_avatar_size"
        android:layout_marginStart="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_share_blue"
        app:layout_constraintEnd_toStartOf="@+id/_guideline"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintTop_toTopOf="@+id/_top_horizontal_guideline"

        tools:background="#ff0000"
        />


    <TextView
        android:id="@+id/_first_line"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:clickable="true"
        android:ellipsize="end"
        android:maxLines="1"
        android:textSize="14sp"
        app:layout_constraintTop_toTopOf="@+id/_top_horizontal_guideline"
        app:layout_constraintStart_toEndOf="@+id/_guideline"
        app:layout_constraintRight_toLeftOf="@+id/_check_icon"
        tools:text="First line, more text, asdfsdfa eee 888 eee 888 " />

    <ImageView
        android:id="@+id/_check_icon"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="3dp"
        android:layout_marginRight="3dp"
        app:layout_constraintBottom_toBottomOf="@+id/_first_line"
        app:layout_constraintLeft_toRightOf="@id/_first_line"
        app:layout_constraintRight_toLeftOf="@+id/_logo"
        app:layout_constraintTop_toTopOf="@+id/_first_line"
        app:srcCompat="@drawable/ic_pause"
        tools:background="#ff0000"
        />

    <TextView
        android:id="@+id/_second_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:ellipsize="end"
        android:maxWidth="220dp"
        android:maxLines="1"
        android:textSize="12sp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@+id/_guideline"
        app:layout_constraintRight_toLeftOf="@+id/_msg_time"
        app:layout_constraintTop_toBottomOf="@+id/_first_line"
        app:layout_constraintBottom_toTopOf="@+id/_top_horizontal_guideline_2"
        tools:text="Second line, test long text more more more eee 888 ===" />

    <TextView
        android:id="@+id/_msg_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/_second_line"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toRightOf="@id/_second_line"
        app:layout_constraintRight_toLeftOf="@+id/_logo"
        app:layout_constraintTop_toTopOf="@+id/_second_line"
        tools:text="  \u2039 30 Nov 2018 \u203A" />

    <ImageView
        android:id="@+id/_logo"
        android:layout_width="@dimen/social_logo_size"
        android:layout_height="@dimen/social_logo_size"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="2dp"
        android:layout_marginRight="0dp"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toRightOf="@id/_check_icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/_top_horizontal_guideline"
        app:layout_constraintBottom_toTopOf="@+id/_top_horizontal_guideline_2"

        tools:background="#33ff00ff"
        app:srcCompat="@drawable/ic_rotate" />


    <TextView
        android:id="@+id/_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="8dp"
        android:clickable="true"
        android:lineSpacingMultiplier="1.1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/_guideline"
        app:layout_constraintTop_toBottomOf="20dp"

        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />



</androidx.constraintlayout.widget.ConstraintLayout>

【问题讨论】：

标签： android-constraintlayout ellipsis

【解决方案1】：

让我们先来看看使用 toStartOf 和 toLeftOf

的不同结果

使用 toStartOf 将产生此输出。

使用 toLeftOf 将产生此输出。

如您所见，使用 toLeftOf 将日期视图推到屏幕之外，以防出现大文本。

而 toStartOf 不会改变日期视图的位置，无论文本大小。

希望你明白了。

这是您使用 toStartOf 所需的布局。

 <?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:id="@+id/_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="0dp"
    android:layout_marginBottom="20dp"
    android:background="?android:attr/selectableItemBackground"
    android:paddingStart="20dp"
    android:paddingEnd="20dp"

    tools:background="#00880088"
    >

    <View android:id="@+id/top_divider"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        android:layout_marginBottom="20dp"
        android:background="#888"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/_top_horizontal_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="@+id/top_divider"
        app:layout_constraintGuide_begin="@dimen/social_content_padding" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="36dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/_top_horizontal_guideline_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="@+id/top_divider"
        app:layout_constraintGuide_begin="52dp" />


    <ImageView
        android:id="@+id/_avatar"
        android:layout_width="@dimen/social_avatar_size"
        android:layout_height="@dimen/social_avatar_size"
        android:layout_marginStart="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintEnd_toStartOf="@+id/_guideline"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintTop_toTopOf="@+id/_top_horizontal_guideline"

        tools:background="#ff0000"
        />


    <TextView
        android:id="@+id/_first_line"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:clickable="true"
        android:ellipsize="end"
        android:maxLines="1"
        android:textSize="14sp"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintTop_toTopOf="@+id/_top_horizontal_guideline"
        app:layout_constraintStart_toStartOf="@+id/_guideline"
        app:layout_constraintEnd_toStartOf="@+id/_check_icon"
        app:layout_constraintWidth_default="wrap"
        tools:text="first" />

    <ImageView
        android:id="@+id/_check_icon"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="3dp"
        android:layout_marginRight="3dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintBottom_toBottomOf="@+id/_first_line"
        app:layout_constraintLeft_toRightOf="@id/_first_line"
        app:layout_constraintRight_toLeftOf="@+id/_logo"
        app:layout_constraintTop_toTopOf="@+id/_first_line"
        app:srcCompat="@drawable/ic_launcher_foreground"
        tools:background="#ff0000"
        />

    <TextView
        android:id="@+id/_second_line"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textSize="12sp"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@+id/_guideline"
        app:layout_constraintEnd_toStartOf="@+id/_msg_time"
        app:layout_constraintTop_toBottomOf="@+id/_first_line"
        app:layout_constraintBottom_toTopOf="@+id/_top_horizontal_guideline_2"
        tools:text="second" />

    <TextView
        android:id="@+id/_msg_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/_second_line"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toRightOf="@id/_second_line"
        app:layout_constraintRight_toLeftOf="@+id/_logo"
        app:layout_constraintTop_toTopOf="@+id/_second_line"
        tools:text="  \u2039 30 Nov 2018 \u203A" />

    <ImageView
        android:id="@+id/_logo"
        android:layout_width="@dimen/social_logo_size"
        android:layout_height="@dimen/social_logo_size"
        android:layout_marginLeft="3dp"
        android:layout_marginTop="2dp"
        android:layout_marginRight="0dp"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/_top_horizontal_guideline"
        app:layout_constraintBottom_toTopOf="@+id/_top_horizontal_guideline_2"

        tools:background="#33ff00ff"
        app:srcCompat="@drawable/ic_launcher_foreground" />


    <TextView
        android:id="@+id/_content"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="8dp"
        android:clickable="true"
        android:lineSpacingMultiplier="1.1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="@+id/_guideline"
        app:layout_constraintTop_toBottomOf="@+id/_top_horizontal_guideline_2"

        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />



</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

它有助于第一行，但不适用于第二行。当 text="second line" 很短时，android:id="@+id/_msg_time" 部分不会与它右对齐，而是与右侧图标右对齐。
我发布了一个截图，在尝试了您更新的答案后也是如此。
您能否详细说明应该从编辑后的答案中更改哪些内容？
试过你的更新了，当文本很短时，第一行中的图标和第二行中的“30 Nov ...”部分不会左对齐到左侧兄弟。正如我发布的屏幕截图所示，它们与右侧图标对齐。你能在你的更新中发布完整的 xml 布局吗？
我已经分享了整个 xml 布局。复制并粘贴到一个空的 xml 文件中，您应该会看到所需的结果。

【解决方案2】：

对于第一行 (id/_first_line)，您将左/右和开始/结束约束混合在一起。尺寸的两端应该使用相同的对 match_constrains (0dp) 才能工作。将app:layout_constraintStart_toEndOf="@+id/_guideline" 更改为app:layout_constraintLeft_toRightOf="@+id/_guideline"。

对于第二行 (id/_second_line)，您需要添加 app:layout_constrainedWidth="true" 以便在视图变得太大时强制执行此视图的约束。

【讨论】：