ConstraintLayout 遇见 wrap

ConstraintLayout 遇见 wrap_content

对于我这个强迫症患者，使用 ConstraintLayout 的时候绝不嵌套。

场景一：

如果TextView 宽度设置为wrap_content，左右约束都是parent

文本居中显示.png

那么文本会居中显示，因为左右约束把文本拉到中间了，那么如何左对齐呢？

app:layout_constraintHorizontal_bias="0"
复制代码

设置约束的水平偏移为0，左对齐为0，中间是0.5，右边是1.

场景二：

如果两个 TextView 排成一行，宽度都为wrap_content，我们想左对齐，但是加上layout_constraintHorizontal_bias没有效果

两个文本都会居中显示

两个文本居中显示.png

此时我们在第一个文本上加上

app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
复制代码

此时两个文本被约束成一条链，而水平约束偏移作用于整条链，那么就可以左对齐了。

如果觉得上面掌握的没问题，你可以尝试写下这个布局

你可能需要是否应用约束的宽度\长度属性，因为在wrap_content的时候约束长度超出约束后还是会无限的延长，因为wrap_content就是View来决定尺寸，所以会溢出去，

 app:layout_constrainedWidth="true"
复制代码

当宽度足够时

宽度还有空间.png

不充足时，文本截断显示 ...

没有剩余空间.png

答案

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/v_background"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:background="#0F000000"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="@id/tv_two"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/tv_one"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="20dp"
        android:background="@color/blue"
        app:layout_constraintBottom_toBottomOf="@id/v_background"
        app:layout_constraintEnd_toStartOf="@id/tv_two"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="@id/v_background"
        app:layout_constraintTop_toTopOf="@id/v_background" />

    <TextView
        android:id="@+id/tv_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:paddingEnd="12dp"
        android:paddingStart="0dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="天气真的天气真的天气真的天气真的真的天天气真的天气真的天气真的天气真的真的天"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="@id/v_background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_one"
        app:layout_constraintTop_toTopOf="@id/v_background" />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码