我们能用ConstraintLayout 做些什么？

ConstraintLayout，约束布局

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.
这是Google官方API的介绍

ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在2016年的I/O大会上重点宣传的一个功能。在Android Studio 2.3开始，IDE默认生成的Activity布局都是以ConstraintLayout做为根布局。

ConstraintLayout提供了可视化的方式来编写界面，但是在实际使用中，因为我们的布局复杂，很难用可视化操作去精准布局，所以我们还是倾向于手动去写xml。

ConstraintLayout的优点

1.对比RelativeLayout

实际开发中，我们最常用的layout是RelativeLayout，ConstraintLayout某种意义上可以认为是RelativeLayout的升级版。 举一个简单的例子

constraint01.png

上图中一个button在RelativeLayout的右下方，当我们希望这个RelativeLayout的高度自适应的时候，我们去设置RelativeLayout的layout heiht为wrap content，我们会看到如下图结果，显然不是我们需要的。

constraint02.png

但是如果用ConstraintLayout，可以轻松实现这个需求

constraint03.png

2.扁平化

我们都知道，我们在实现界面布局的时候，强调尽量少的嵌套，因为嵌套多会导致需要更多的时间去绘制view。为了减少嵌套，我们经常会使用RelativeLayout代替LinearLayout，但是RelativeLayout会对子View做两次measure。

相关view的绘制流程以及RelativeLayout和LinearLayout的性能对比，贴一个文章Android中RelativeLayout和LinearLayout性能分析

我们看一个例子可以清晰看到ConstraintLayout减少嵌套


constraint04.png

如上图的UI如果我们用原先的RelativeLayout实现，层次图如下


constraint06.png

但是如果我们用ConstraintLayout实现，层次图会变的扁平化如下图
constraint07.png

另外关于ConstraintLayout的性能分析，可以参考Google的文章解析ConstraintLayout的性能优势

3.应对需求多变性

还是刚才那个例子，如果ui需求修改成如下图

constraint05.png

如果用RelativeLayout我们可能需要很大程度上去修改原来的布局结构，但是用ConstraintLayout，我们只需要把不需要的那个Textview置为GONE就能达到UI效果。
当然，不是所有需求变动我们都能很方便去实现。
贴一下这个UI的ConstraintLayout的实现代码

<?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:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="64.5dp"
    android:background="@drawable/item_background_selector_white">

    <tv.chushou.zues.widget.fresco.FrescoThumbnailView
        android:id="@+id/iv_image"
        android:layout_width="@dimen/subc_user_thumb_width"
        android:layout_height="@dimen/subc_user_thumb_width"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        fresco:actualImageScaleType="centerCrop"
        fresco:placeholderImageScaleType="fitXY"
        fresco:roundAsCircle="true"
        fresco:roundingBorderColor="@color/transparent_5_black"
        fresco:roundingBorderWidth="0.5dp" />

    <ImageView
        android:id="@+id/iv_sex"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:src="@drawable/user_female_big"
        app:layout_constraintBottom_toBottomOf="@+id/iv_image"
        app:layout_constraintRight_toRightOf="@+id/iv_image" />

    <com.kascend.chushou.widget.ImgRightTextView
        android:id="@+id/img_text_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2.5dp"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        app:layout_constraintBottom_toTopOf="@+id/tv_bottom"
        app:layout_constraintEnd_toStartOf="@+id/tv_game"
        app:layout_constraintLeft_toRightOf="@+id/iv_image"
        app:layout_constraintRight_toLeftOf="@+id/tv_game"
        app:layout_constraintStart_toEndOf="@+id/iv_image"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_goneMarginRight="105dp"
        app:magin_left="5dp" />

    <TextView
        android:id="@+id/tv_game"
        android:layout_width="65dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2.5dp"
        android:layout_marginEnd="10dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="10dp"
        android:ellipsize="end"
        android:gravity="right"
        android:includeFontPadding="false"
        android:singleLine="true"
        android:textColor="@color/download_content_color"
        android:textSize="12.5sp"
        app:layout_constraintBottom_toTopOf="@+id/tv_state"
        app:layout_constraintEnd_toStartOf="@+id/iv_detail"
        app:layout_constraintLeft_toRightOf="@+id/img_text_name"
        app:layout_constraintRight_toLeftOf="@+id/iv_detail"
        app:layout_constraintStart_toEndOf="@+id/img_text_name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/tv_bottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="2.5dp"
        android:ellipsize="end"
        android:includeFontPadding="false"
        android:singleLine="true"
        android:textColor="@color/kas_littlegray"
        android:textSize="@dimen/fontsize_12sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_state"
        app:layout_constraintLeft_toRightOf="@+id/iv_image"
        app:layout_constraintRight_toLeftOf="@+id/tv_state"
        app:layout_constraintStart_toEndOf="@+id/iv_image"
        app:layout_constraintTop_toBottomOf="@+id/img_text_name" />

    <TextView
        android:id="@+id/tv_state"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="10dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="2.5dp"
        android:ellipsize="end"
        android:gravity="top|right"
        android:includeFontPadding="false"
        android:singleLine="true"
        android:textColor="@color/friend_state"
        android:textSize="@dimen/fontsize_9sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/iv_detail"
        app:layout_constraintLeft_toRightOf="@+id/tv_bottom"
        app:layout_constraintRight_toLeftOf="@+id/iv_detail"
        app:layout_constraintStart_toEndOf="@+id/tv_bottom"
        app:layout_constraintTop_toBottomOf="@+id/tv_game" />

    <ImageView
        android:id="@+id/iv_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="14dp"
        android:layout_marginRight="14dp"
        android:src="@drawable/bg_in_playlive"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="0dp"
        android:layout_height="1px"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        android:background="@color/c_page_diliver_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/iv_image"
        app:layout_constraintStart_toEndOf="@+id/iv_image" />

</android.support.constraint.ConstraintLayout>

使用ConstraintLayout

几个要点

  • Chains
  • Guidelines
  • ConstraintSet

更新

Constraint Layout 1.1.x带来了哪些新东西？

关于坑

ConstraintLayout嵌套会出现显示不全的问题

其他暂时还未碰到

关于引用

文中贴了链接的文章都有参考，致谢。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容