Android ConstraintLayout 约束布局详解

àì夳堔傛蜴生んèń 2022-01-07 12:17 406阅读 0赞

早在2016年的***Google I/O***大会上 ，提出的一个可以灵活控制子控件的位置和大小的新布局。并且其号称可以实现布局最大程度的扁平化。Google 发布了***Android Studio 2.2***预览版，同时也发布了Android 新的布局方案 *ConstraintLayout* ， 但是最近的一年也没有大规模的使用。2017年Google发布了 *Android Studio 2.3 正式版*，在 Android Studio 2.3 版本中新建的Module中默认的布局就是 ConstraintLayout 。如下所示：

在使用 `ConstraintLayout` 的布局方案，需要在 `build.gradle` 引入支持库：

dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
    }

### **为什么要使用ConstraintLayout？** ###

上面的定义也透露出重要的信息，那就是可以实现最大程度几乎完全的扁平化。我们知道项目中的布局嵌套问题对我们的项目性能有着不小的威胁。布局能实现扁平化的话会让软件性能得到很大的提升。所以我们在开发过程中都会尽量避免布局嵌套现象，但是一些复杂的显示效果必须要嵌套才能显示（PS:可以使用merge标签，自定义布局，比较麻烦）。这就有个矛盾。下面列举几点来表明ConstraintLayout是如何能解决这个矛盾，它的强大之处。

1.  Constraint Layout可以在不嵌套view group的情况下实现非常庞大、复杂的布局。实现扁平化。
2.  Constraint Layout同时具有Relative Layout和Linear Layout的优点、特性。功能强大。
3.  使用Constraint Layout来布局时性能要比其他布局方式高。性能比较具体参考官方文档 ：  
    [ConstraintLayout性能优势解析-官文][ConstraintLayout_-]
4.  Constraint Layout无论是通过布局管理器拖拽，鼠标控制的形式实现还是使用XML代码去写，都比较方便。这里推荐下郭霖大神的文章，通过布局管理器拖拽的方式去实现布局的。本文说明的是通过代码的形式实现的布局效果。  
    [拖拽方式来使用ConstraintLayout][ConstraintLayout]

[https://developer.android.google.cn/training/constraint-layout][https_developer.android.google.cn_training_constraint-layout]

另外，ConstraintLayout 还有一个优点，它可以有效地解决布局嵌套过多的问题。我们平时编写界面，复杂的布局总会伴随着多层的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系的，它有点类似于 RelativeLayout，但远比RelativeLayout要更强大。

ConstraintLayout向下兼容 API 9

关于 ConstraintLayout 的基本使用方法请参照郭神的博客：   
[http://blog.csdn.net/guolin\_blog/article/details/53122387][ConstraintLayout]

### ***说说 LinearLayout 和 RelativeLayout*** ###

说到布局的时候就会条件性的想到LinearLayout线性步局，RelativeLayout相对布局。我们知道，在measure过程。RelativeLayout由于其特性是measure两次的，而LinearLayout是正常情况下只measure一次，非正常情况下呢（也不算非正常~）就是使用weight权重的情况下，LinearLayout会对没有使用weight属性的控件做第一次measure，然后再对使用过weight属性的控件做第二次measure。综合来看使用LinearLayout性能上来说比RelativeLayout好些。所以系统的decorview他就是使用的LinearLayout，上面是标题栏下面是内容ContentView。那系统使用LinearLayout却给我们MainActivity推荐RelativeLayout布局呢？这是因为，RelativeLayout由于其特性，使用它来布局的话，更方便实现扁平化，或者说更贴近扁平化。也就是说，在官方看来，实现扁平化对提升性能的帮助更大。

### **常用方法总结** ###

layout_constraintTop_toTopOf       // 将所需视图的顶部与另一个视图的顶部对齐。 
    
    layout_constraintTop_toBottomOf    // 将所需视图的顶部与另一个视图的底部对齐。 
    
    layout_constraintBottom_toTopOf    // 将所需视图的底部与另一个视图的顶部对齐。 
    
    layout_constraintBottom_toBottomOf // 将所需视图的底部与另一个视图的底部对齐。 
    
    layout_constraintLeft_toTopOf      // 将所需视图的左侧与另一个视图的顶部对齐。 
    
    layout_constraintLeft_toBottomOf   // 将所需视图的左侧与另一个视图的底部对齐。 
    
    layout_constraintLeft_toLeftOf     // 将所需视图的左边与另一个视图的左边对齐。 
    
    layout_constraintLeft_toRightOf    // 将所需视图的左边与另一个视图的右边对齐。 
    
    layout_constraintRight_toTopOf     // 将所需视图的右对齐到另一个视图的顶部。
    
    layout_constraintRight_toBottomOf  // 将所需视图的右对齐到另一个的底部。
    
    layout_constraintRight_toLeftOf    // 将所需视图的右边与另一个视图的左边对齐。
    
    layout_constraintRight_toRightOf   // 将所需视图的右边与另一个视图的右边对齐。

### 偏移比例 ###

layout_constraintHorizontal_bias  //控件的水平偏移比例
    
    layout_constraintVertical_bias   //控件的垂直偏移比例

## 基线约束控键 ##

layout_constraintBaseline_toBaselineOf

***以上控件属性介绍我们根据相对位置（Relative Position）***

我们通过ConstraintLayout来实现下面的一个效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70][]

布局代码如下

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.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:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context=".MainActivity">
    
        <ImageView
            android:id="@+id/got"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="6dp"
            android:scaleType="fitXY"
            android:src="@drawable/got"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="4dp"
            android:text="权利的游戏第八季(更新中)"
            android:textColor="#000"
            android:textSize="18sp"
            app:layout_constraintLeft_toRightOf="@+id/got"
            app:layout_constraintTop_toTopOf="@+id/got" />
    
        <TextView
            android:id="@+id/rating"
            android:layout_width="50dp"
            android:layout_height="20dp"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:text="评分"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="@+id/item_title"
            app:layout_constraintTop_toTopOf="@+id/got" />
    
        <TextView
            android:id="@+id/score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:gravity="center"
            android:text="3.3"
            app:layout_constraintBottom_toBottomOf="@+id/rating"
            app:layout_constraintLeft_toRightOf="@+id/rating"
            app:layout_constraintTop_toTopOf="@+id/rating" />
    
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="集数:6"
            android:textColor="@android:color/darker_gray"
            android:textSize="18sp"
            app:layout_constraintBottom_toBottomOf="@+id/got"
            app:layout_constraintLeft_toLeftOf="@+id/item_title" />
    
        <ImageView
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginEnd="15dp"
            android:layout_marginRight="15dp"
            android:src="@drawable/player"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 1][]

现在我们来解读下上面的代码是如何实现这种效果的。首先我们看到了ImageView中的：

app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"

这两行代码，这两行代码就是控制我们布局中控件的位置的，几乎每个控件都有，这个属性的字面意思很好理解，约束控件的左边在“parent”的左边，约束控件的上边在“parent”的上边。其实也就是约束控件的左边，上边和‘parent’的左边，上边对齐的意思。  
那“parent”是什么呢？顾名思义，在这里就是ConstraintLayout。表示他的父布局。所以这两行代码也就控制了控件的位置：在ImageView位于布局的左上角。

下面再分析一下view id为item\_title的TextView中使用。

app:layout_constraintLeft_toRightOf="@+id/got"
    app:layout_constraintTop_toTopOf="@+id/got"

这两句的意思是，约束控件的左边在view id为photo的view的右边，约束控件的上边与view id为photo的view的上边对齐。  
通过这两次的分析，大家可以细细体会一下。

总结

通过上面对ConstraintLayout的特性介绍，我们发现ConstraintLayout的确实很强大，有能力实现扁平化的极致。他融合了RelativeLayout和LinearLayout的优点，比如相对位置，weight chains。并且他又多出来很多RelativeLayout和LinearLayout不具备的优点。所以说ConstraintLayout的掌握还是很有必要的。书到用时方恨少，纸上得来终觉浅。祝君好运。

参考文献

[https://developer.android.google.cn/training/constraint-layout][https_developer.android.google.cn_training_constraint-layout]

[https://developer.android.com/reference/android/support/constraint/Guideline.html][https_developer.android.com_reference_android_support_constraint_Guideline.html]  
[https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html\#CenteringPositioning][https_developer.android.com_reference_android_support_constraint_ConstraintLayout.html_CenteringPositioning]  
[http://blog.csdn.net/lmj623565791/article/details/78011599?utm\_source=tuicool&utm\_medium=referral][http_blog.csdn.net_lmj623565791_article_details_78011599_utm_source_tuicool_utm_medium_referral]

[ConstraintLayout_-]: https://mp.weixin.qq.com/s/gGR2itbY7hh9fo61SxaMQQ
[ConstraintLayout]: http://blog.csdn.net/guolin_blog/article/details/53122387
[https_developer.android.google.cn_training_constraint-layout]: https://developer.android.google.cn/training/constraint-layout
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70]: /images/20211223/2841226d393a4268b62f81a82528f6a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzIw_size_16_color_FFFFFF_t_70 1]: /images/20211223/a8f46616c46d4376b4ce290701d84cc5.png
[https_developer.android.com_reference_android_support_constraint_Guideline.html]: https://developer.android.com/reference/android/support/constraint/Guideline.html
[https_developer.android.com_reference_android_support_constraint_ConstraintLayout.html_CenteringPositioning]: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#CenteringPositioning
[http_blog.csdn.net_lmj623565791_article_details_78011599_utm_source_tuicool_utm_medium_referral]: http://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral