ConstraintLayout 2 TextView 第一个椭圆大小

Question

更新

我通过以下方式实现了这种行为：

txtFullName

android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"

btnFollow 和 btnUnfollow

android:layout_width="0dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintWidth_default="wrap"
app:layout_constraintWidth_min="wrap"

原始问题

我有一个 XML 布局，它的父布局是 ConstraintLayout 和里面

       -- txtFullName -- (btnFollow | btnUnfollow ) --       
Avatar ----------------------------------------------- btnPrimaryAction
       -- txtTitle -----------------------------------

我想要这个：

但是我用我的 xml 得到了这个

当txtFullName 很长时，它与btnFollow 或btnUnfollow 重叠，并且这些按钮不会显示在屏幕上。我希望 txtFullName 在较长时为 ellipsize。我尝试使用ConstraintLayout的Flow，但效果也不好。

我的布局约束如下所示。

<?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="wrap_content">

    <ImageView
        android:id="@+id/imgAvatar"
        android:layout_width="56dp"
        android:layout_height="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@+id/txtFullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="2dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="?attr/textColorMarineBlue"
        app:layout_constraintEnd_toStartOf="@id/textButtonBarrierStart"
        app:layout_constraintStart_toEndOf="@id/imgAvatar"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Long Full Name is overlapping btnFollow" />

    <TextView
        android:id="@+id/btnFollow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="8dp"
        android:maxLines="1"
        android:text="Follow"
        android:textColor="?attr/textColorAzure"
        app:layout_constraintBaseline_toBaselineOf="@id/txtFullName"
        app:layout_constraintEnd_toStartOf="@id/btnPrimaryAction"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@id/txtFullName" />

    <TextView
        android:id="@+id/btnUnfollow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="8dp"
        android:maxLines="1"
        android:text="Unfollow"
        android:textColor="?attr/textColorGreyishBrown"
        android:visibility="gone"
        app:layout_constraintBaseline_toBaselineOf="@id/txtFullName"
        app:layout_constraintEnd_toStartOf="@id/btnPrimaryAction"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@id/txtFullName" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/textButtonBarrierStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="btnFollow,btnUnfollow" />

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="?attr/textColorGreyishBrown"
        app:layout_constraintEnd_toStartOf="@id/btnPrimaryAction"
        app:layout_constraintStart_toEndOf="@id/imgAvatar"
        app:layout_constraintTop_toBottomOf="@id/txtFullName"
        tools:text="Title" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/secondColumnEndBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="btnFollow,btnUnfollow,txtTitle" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnPrimaryAction"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@id/secondColumnEndBarrier"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Action" />

</androidx.constraintlayout.widget.ConstraintLayout>

我怎样才能实现这个用户界面？

Answer 1

你需要几个属性：

• 在txtFullName 中有匹配约束宽度，使其宽度不能超过屏障，并允许它在屏障之前添加椭圆。

  android:layout_width="0dp"
  

• 在btnFollow 和btnUnfollow 中使用layout_constraintWidth_min 和wrap 值，这样他们就可以确保即使宽度与0dp 的约束条件匹配，他们也始终优先考虑包装内容。

  app:layout_constraintWidth_min="wrap"
  

立即预览：

Answer 2

正如另一个答案中所建议的，您可以在您的txtFullName 中将layout_width 设置为0dp，或者您也可以在您的txtFullName 中添加以下标志

app:layout_constrainedWidth="true"

如下

<TextView
        android:id="@+id/txtFullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="2dp"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constrainedWidth="true"
        android:textColor="?attr/textColorMarineBlue"
        app:layout_constraintEnd_toStartOf="@id/textButtonBarrierStart"
        app:layout_constraintStart_toEndOf="@id/imgAvatar"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Long Full Name is overlapping btnFollow" />

Answer 3

你在正确的轨道上。使用

layout_width="0dp"

对于 ID 为 txtFullName 的 TextView 而不是 layout_width="wrap_content"。