ConstraintLayout实践分析

ConstraintLayout自studio2.3开始google就已经开始推广了，虽然也了接一些但一直也没仔细分析过用法，最近在做性能优化相关的东西，遇到一些ui嵌套层级，顺便用ConstraintLayout重新实现了一下。

下面会简单介绍一些ConstraintLayout的基本属性和重新实践的布局以及ConstraintLayout一些坑和注意事项

参考文章 https://www.jianshu.com/p/a74557359882

ConstraintLayout属性

1.基础属性，只用其中的几个举例

• layout_constraintLeft_toLeftOf = "@id/B" 当前的控件的左侧位于控件b的左侧
• layout_constraintLeft_toRightOf = "@id/B" 当前的控件的左侧位于控件b的右侧

2.圆形定位

这个属性可以实现一些特殊的布局，比如钟表～

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      //引用的控件ID
      app:layout_constraintCircle="@+id/buttonA"
      //圆半径
      app:layout_constraintCircleRadius="100dp"
      //偏移圆角度  12点方向为0度，顺时针旋转45度
      app:layout_constraintCircleAngle="45" />

2258857-f656aa5f06160889.png

3.百分比

ConstraintLayout可以设置控件的百分比，但前提是你要设置约束，也就是你如果使用constraintHorizontal，你就要说明你的left，right是相对于哪些控件而言
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_weight="1"

那么现在给你一个最常见的需求布局你会怎么实现？比如下面这个

屏幕快照 2018-11-24 下午3.03.55.png

以前可能会是一个linearLayout配合四个releativelayout，因为需要weight权重来实现四个tab的比例，但现在一层嵌套都不需要有, 注意下边只保留了一些关键代码

    <ImageView
        android:id="@+id/navigation_home_img"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"     
        app:layout_constraintRight_toLeftOf="@+id/navigation_discover_img"
        app:layout_constraintHorizontal_weight="1"/>

    <TextView
        android:id="@+id/navigation_home_txt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/navigation_home_img"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"  
        app:layout_constraintRight_toLeftOf="@+id/navigation_discover_txt"
        android:text="职位" />

   <ImageView
        android:id="@+id/navigation_discover_img"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/navigation_home_img"
        app:layout_constraintRight_toLeftOf="@+id/navigation_msg_img"
        />

    <TextView
        android:id="@+id/navigation_discover_txt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/navigation_discover_img"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/navigation_home_txt"
        app:layout_constraintRight_toLeftOf="@+id/navigation_msg_txt"
        android:text="发现" />

        。。。

4.权重position

这个属性你可以直接指定你的控件位于布局大概百分之多少的位置，但是前提也要设置相应的约束
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintVertical_bias="0.9"

5.chains

2258857-5803cbea741358a4.png

个人觉得官方文档上的解释有点难理解，我的理解是几个控件可以组成的一个链，这个链会根据布局或本身产生整体变化

比如实现这个页面

屏幕快照 2018-11-24 下午3.18.01.png

虽然用linearlayout也可以较好的实现，不过既然google建议，那么我们还是使用ConstraintLayout，而为什么要在ConstraintLayout使用chains呢？
为了整体居中，注意下面也只是关键代码，去掉了一些部分

     <ImageView
        android:id="@+id/ivLogo"
        android:layout_width="@dimen/px190"
        android:layout_height="@dimen/px180"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/tvTip1"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/tvTip1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/ivLogo"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/tvTip2"
        />

    <TextView
        android:id="@+id/tvTip2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录后查看聊天消息及求职进度"
        android:layout_marginTop="@dimen/px20"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvTip1"
        app:layout_constraintBottom_toTopOf="@+id/btnLogin"/>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="@dimen/px320"
        android:layout_height="@dimen/px80"
        android:layout_marginTop="@dimen/px50"
        android:background="@drawable/job_cate_tag_bg_select"
        app:layout_constraintTop_toBottomOf="@+id/tvTip2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="立即登录" />

6.goneMargin（隐藏边距)

当约束目标的可见性为View.GONE时，还可以通过以下属性设置不同的边距值

7. 填充父窗体

• layout_constraintWidth_min and layout_constraintHeight_min //设置最小尺寸
• layout_constraintWidth_max and layout_constraintHeight_max //设置最大尺寸
• layout_constraintWidth_percent and layout_constraintHeight_percent //设置相对于父类的百分比

比如开发中有这样一个需求，位于父控件的中间且宽度为父控件的一半，那么我们可以这么去实现

2258857-cb75df6c9177df5d.png

8. 约束之百分比布局

app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintDimensionRatio="W16:9"
比如我们的头部viewpager要实现宽和高的比例为16:9，那么就可以使用这个属性

9 .坑一

ConstraintLayout如果不是根布局，不能设置parent要设置父类的id

理论上ConstraintLayout可以实现大部分布局，不需要层级嵌套