Android之ConstraintLayout布局

这几天开始在项目中使用constraint-layout,学习的结果在这记录一下，以免忘记，方便以后查看。使用它是因为我我们布局嵌套太多了，对于性能来说是一个很蛋疼的体验，而ConstraintLayout可以是我们拥有一个扁平布局的层次结构，性能就自然上去了。

没事可以看下官网：Constraint-layout

ConstraintLayout使用起来感觉跟RelativeLayout差不多，但是要比它强大。

首先要引用它到你的项目中，在build.grad 中加入：

1implementation 'com.android.support.constraint:constraint-layout:1.1.3' 

比如如果我们想做一个用户名和密码的的登录界面：

平常我们做的时候可能会用LinerLayout或者RelativeLayout，很容易就能做出来，当然这我们用constraintLayout来做，主要是为了学习他的用法： 1<?xml version="1.0" encoding="utf-8"?> 2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 8 9 <TextView 10 android:id="@+id/text1" 11 android:layout_width="wrap_content" 12 android:layout_height="23dp" 13 android:gravity="center" 14 android:text="用户名:" 15 android:layout_margin="10dp" 16 android:textSize="14sp" 17 app:layout_constraintTop_toTopOf="parent" 18 app:layout_constraintLeft_toLeftOf="parent" 19 />x 20 21 <EditText 22 android:id="@+id/pwd" 23 android:layout_width="150dp" 24 android:layout_height="wrap_content" 25 android:layout_margin="10dp" 26 android:text="123" 27 android:textSize="14sp" 28 app:layout_constraintLeft_toRightOf="@id/text1" 29 app:layout_constraintTop_toTopOf="parent" 30 31 /> 32</android.support.constraint.ConstraintLayout> 

看代码里面主要有几个属性：

1 app:layout_constraintTop_toTopOf="parent" 2 app:layout_constraintLeft_toLeftOf="parent" 

根据字面意思可以理解为，控件的左面与父布局对其，上面与布局对齐，那就是左上角咯。

在看Edit控件

app:layout_constraintLeft_toRightOf=”@id/text1″

表示在text1de 控件的右边，因为是控件的左面与text1控件的右边对齐

是不是很简单，但是需要一点，constraintLayout是约束布局，就拿text1来说，如果你不设置怼他的约束的话， margin是不起作用的，也就是拿掉 app:layout_constraintTop_toTopOf=”parent“ app:layout_constraintLeft_toLeftOf=”parent”, 你会发现android:layout_margin=”10dp” 不起作用了。

在其中还有一些类似的属性，就可以理解了

 1layout_constraintLeft_toLeftOf 2layout_constraintLeft_toRightOf 3layout_constraintRight_toLeftOf 4layout_constraintRight_toRightOf 5layout_constraintTop_toTopOf 6layout_constraintTop_toBottomOf 7layout_constraintBottom_toTopOf 8layout_constraintBottom_toBottomOf 9layout_constraintBaseline_toBaselineOf 10layout_constraintStart_toEndOf 11layout_constraintStart_toStartOf 12layout_constraintEnd_toStartOf 13layout_constraintEnd_toEndOf 

接着往下，如果你想要edit 这个空间，充满右边的父布局，这个时候如果使用match_parent， 你会发现整个宽上都是它了：

这是因为这个布局中已经不支持match_parent这个属性了，必须使用MATCH_CONSTRAINT，而这个属性在这个布局中就是0dp，看图：

 1<?xml version="1.0" encoding="utf-8"?> 2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 8 9 <TextView 10 android:id="@+id/text1" 11 android:layout_width="wrap_content" 12 android:layout_height="23dp" 13 android:gravity="center" 14 android:text="用户名:" 15 android:layout_margin="10dp" 16 app:layout_constraintTop_toTopOf="parent" 17 app:layout_constraintLeft_toLeftOf="parent" 18 /> 19 20 <EditText 21 android:id="@+id/pwd" 22 android:layout_width="0dp" 23 android:layout_height="23dp" 24 android:layout_margin="10dp" 25 android:text="123" 26 app:layout_constraintLeft_toRightOf="@id/text1" 27 app:layout_constraintTop_toTopOf="parent" 28 app:layout_constraintRight_toRightOf="parent" 29 /> 30</android.support.constraint.ConstraintLayout> 

布局中还多了一个app:layout_constraintRight_toRightOf=”parent”，表示与父布局右边对齐。如果你不设置这个属性的话，你会发现即使width是0dp也不会充满父布局。 如果你把width改为wrap_content的话会发现一个更奇特的事情：

edit这个空间居然跑到中间去了，这就是constraintLayout的奇特之处，如果设置了两边都对齐的话，他就会两边同时拉伸，既然两面的拉力一样，那肯定就跑中间去了。所以设置为0dp就可以了。我们有时候会碰到这中需求，要求某一个控件占整个屏幕的比例是多少，比如说banner，在约束布局下，这个很容易实现，因为他提供了这种属性：

1 app:layout_constraintDimensionRatio="h,4:1" 

表示高宽的比列是4:1，h可以用w代替，当然就是h,1:4

看效果：

代码入下： 1<?xml version="1.0" encoding="utf-8"?> 2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 <TextView 8 android:id="@+id/text" 9 android:layout_width="0dp" 10 android:layout_height="0dp" 11 android:background="@color/colorAccent" 12 app:layout_constraintTop_toTopOf="parent" 13 app:layout_constraintRight_toRightOf="parent" 14 app:layout_constraintLeft_toLeftOf="parent" 15 app:layout_constraintDimensionRatio="h,4:1" 16 /> 17</android.support.constraint.ConstraintLayout> 

ConstraintLayout还有一个概念-链条，现在的APP，都流行下面有些导航栏，看图：

实现这个其实也很简单： 1<?xml version="1.0" encoding="utf-8"?> 2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 <TextView 8 android:id="@+id/text" 9 android:layout_width="0dp" 10 android:layout_height="0dp" 11 android:background="@color/colorAccent" 12 app:layout_constraintTop_toTopOf="parent" 13 app:layout_constraintRight_toRightOf="parent" 14 app:layout_constraintLeft_toLeftOf="parent" 15 app:layout_constraintDimensionRatio="h,4:1" 16 /> 17 18 19 20 <TextView 21 android:id="@+id/text2" 22 android:layout_width="0dp" 23 android:layout_height="wrap_content" 24 android:layout_margin="10dp" 25 app:layout_constraintBottom_toBottomOf="parent" 26 app:layout_constraintRight_toLeftOf="@id/text3" 27 app:layout_constraintLeft_toLeftOf="parent" 28 android:background="#ef3460" 29 30 /> 31 <TextView 32 android:id="@+id/text3" 33 android:layout_width="0dp" 34 android:layout_height="wrap_content" 35 app:layout_constraintBottom_toBottomOf="parent" 36 app:layout_constraintLeft_toRightOf="@id/text2" 37 app:layout_constraintRight_toLeftOf="@id/text4" 38 android:background="#cab348" 39 android:layout_margin="10dp" 40 /> 41 <TextView 42 android:id="@+id/text4" 43 android:layout_width="0dp" 44 android:layout_height="wrap_content" 45 app:layout_constraintBottom_toBottomOf="parent" 46 app:layout_constraintRight_toRightOf="parent" 47 app:layout_constraintLeft_toRightOf="@id/text3" 48 android:background="#7f1bab" 49 android:layout_margin="10dp" 50 /> 51 52</android.support.constraint.ConstraintLayout> 

看上面的代码你会发现，text2，text3 和text4分别相互引用，这个就是链的概念，官网给提供了一个图：

在链的头部你可以设置layout_constraintHorizontal_chainStyle，来决定链式的样式，spread_inside

spread

packed

还有一个属性layout_constraintHorizontal_weight，和LinearLayout中的wight的意思一样，表示所占的比重：

app:layout_constraintHorizontal_bias=”0.1″ 还有一个bias表示拉伸的比列，0.1表示就拉伸了比重是0.1 如下图：因为是给第一个textView设置的0.1，所以他们要非常的靠近左边

有时候我们会要求某一个控件在另外一个控件的右上方什么地方，多少角度什么鬼的，先上一个官方的图片：

实现起不来不要太简单，表示B点的中心在以A为中心的半径上，随便设置什么角度，这种需求岂不是很简单：

代码入下： 1<?xml version="1.0" encoding="utf-8"?> 2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 7 <TextView 8 android:id="@+id/text" 9 android:layout_width="60dp" 10 android:layout_height="40dp" 11 android:background="@color/colorAccent" 12 app:layout_constraintTop_toTopOf="parent" 13 app:layout_constraintRight_toRightOf="parent" 14 app:layout_constraintBottom_toBottomOf="parent" 15 app:layout_constraintLeft_toLeftOf="parent" 16 /> 17 18 <TextView 19 android:layout_width="60dp" 20 android:layout_height="40dp" 21 app:layout_constraintCircle="@id/text" 22 app:layout_constraintCircleRadius="100dp" 23 app:layout_constraintCircleAngle="60" 24 android:background="@color/colorPrimaryDark" 25 /> 26</android.support.constraint.ConstraintLayout> 

上面最主要是：

1 app:layout_constraintCircle="@id/text" 2 app:layout_constraintCircleRadius="100dp" 3 app:layout_constraintCircleAngle="60" 

表示以text为圆心，半径是100dp，角度为60度

最后还有一个Guideline ，这个东西很简单，主要用辅助布局，可以看下郭神的这篇文章，Android新特性介绍，ConstraintLayout完全解析