在ConstraintLayout android中填充水平宽度的最佳实践答案

【问题标题】：Best practice to fill horizontal width in ConstraintLayout android在ConstraintLayout android中填充水平宽度的最佳实践
【发布时间】：2021-04-20 20:26:18
【问题描述】：

我需要做这个设计

通常我使用LinearLayout 创建这类设计，但在这种情况下它是一个列表项，所以我不想使用嵌套的线性布局。

我想在单个 ConstraintLayout 中创建此设计。但是我找不到任何解决方案，我可以为 ProductTitle 提供大部分水平空间，为图像和股票按钮提供一些宽度。

我知道我们在 LinearLayout 中提供权重，但我如何在 ConstraintLayout 中以 if text is long enough then it should not override/misplace the stock button 的方式实现这一点

任何帮助将不胜感激

【问题讨论】：

标签： android android-layout android-xml android-constraintlayout

【解决方案1】：

如果我正确理解您的问题，您想要达到的目标是这样的

example image

代码如下：

<ImageView
    android:id="@+id/image1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_close_dark_grey"
    android:layout_marginStart="50dp"
    android:layout_marginTop="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pretium, velit egestas fringilla congue, magna massa fringilla metus, nec fermentum nunc justo quis arcu. Aliquam erat volutpat"
    app:layout_constraintStart_toEndOf="@id/image1"
    app:layout_constraintEnd_toStartOf="@id/image2"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/image2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_close_dark_grey"
    android:layout_marginEnd="50dp"
    android:layout_marginTop="50dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

但您想打破界限并显示点。这很简单：只需将这两个属性添加到 TextView

android:lines="1"
android:ellipsize="end"

这样你是说只显示一行，而省略号用于显示点和中断文本。

【讨论】：

【解决方案2】：

将宽度设置为 0dp 并在两侧设置约束

<Imageview app:layout_constraintStart_toStartOf="parent" />
<TextView
    android:layout_width="0dp"
    app:layout_constraintEnd_toStartOf="@+id/switch"
    app:layout_constraintStart_toEndOf="@+id/image" />
<Switch app:layout_constraintEnd_toEndOf="parent" />

【讨论】：