ConstraintLayout使用小技巧

在开发中可能需要实现如下效果：

短文本

长文本

首先尝试在原先LinearLayout、RelativeLayout等布局中的方式：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    tools:background="@android:color/darker_gray"
    >

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      android:background="@drawable/flow_ic_source_background"
      android:ellipsize="end"
      android:maxLines="1"
      android:singleLine="true"
      android:textColor="@android:color/black"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:text="这是一个测试文案"
      />

</android.support.constraint.ConstraintLayout>

结果如下：

image.png

发现默认效果为居中，此时尝试添加如下代码：
app:layout_constraintHorizontal_bias="0"
效果如下：

image.png

然后尝试长文案，效果如下：

image.png

这下过并不是我们想要的。此时我们抛弃wrap_content，转而使用match_constraint（xml中对应0dp）来试一下：

image.png

超长文案时没问题。但是在切换为短文案时，又出现了问题：

image.png

显然这也不是我们需要的效果。然后尝试增加如下代码：
app:layout_constraintWidth_max="wrap"
效果如下：

image.png

OK，这次没问题了。

最终代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    tools:background="@android:color/darker_gray"
    >

  <TextView
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      android:background="@drawable/flow_ic_source_background"
      android:ellipsize="end"
      android:maxLines="1"
      android:singleLine="true"
      android:textColor="@android:color/black"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintWidth_max="wrap"
      tools:text="这是一个测试文案"
      />

</android.support.constraint.ConstraintLayout>

ConstraintLayout使用小技巧

推荐阅读更多精彩内容