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