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 的流程，但效果也不佳。

我的布局约束可以如下图所示。

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

我怎样才能做到这一点UI？

Answer 1

你走在正确的轨道上。使用

layout_width="0dp"

对于 ID 为 txtFullName 的 TextView

而不是 layout_width="wrap_content"。

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

您需要几个属性：

在txtFullName中匹配约束宽度，使其宽度不能超过barrier，并允许其在barrier前加上ellipsize。
```
android:layout_width="0dp"
```
在 btnFollow 和 btnUnfollow 中使用 layout_constraintWidth_min 和 wrap 值，这样他们就可以确保他们总是优先选择包装他们的即使宽度与 0dp
的约束匹配，内容也是如此
```
app:layout_constraintWidth_min="wrap"
```

立即预览：

ConstraintLayout 2 TextView第一个椭圆

ConstraintLayout 2 TextView first one ellipsize

android

android-layout

android-constraintlayout