ConstraintLayout使用小技巧

作者: foolchen | 来源:发表于2019-01-15 11:40 被阅读15次

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

短文本 长文本

首先尝试在原先LinearLayoutRelativeLayout等布局中的方式:

<?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
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使用小技巧

    本文链接:https://www.haomeiwen.com/subject/pugedqtx.html