constrainlayout⽤法总结（⼀）
constrainlayout字⾯之意约束布局，是google推出的⽤于最⼤化的解决布局嵌套问题，同时减少布局渲染时间，提升性能的布局。与相对布局Relativelayout有些类似，约束布局的原理与相对布局是⼀样的，都是根据视图与视图之间的相互依赖，相对⽗级布局的位置来进⾏布局的。但是⽐Relativelayout更加的灵活，功能更加强⼤。
该笔记按照⼏个步骤来进⾏展开描述，阐释。
开始
在项⽬当中的gradle当中添加constraint-layout依赖：
implementation 'com.straint:constraint-layout:1.1.2'
新建布局
<?xml version="1.0" encoding="utf-8"?>
<straint.ConstraintLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
</straint.ConstraintLayout>
添加约束
添加约束的⽅式常见两种⽅式：
⼿动进⾏拖拽：将控件拖进布局空间，然后通过constraint-layout为控件提供的课件的操作部件进⾏约束的添加。这种⽅式简便快捷，效率较⾼，⼀句话android终于有了⼀种可以抗衡ios的操作，但是给我的感觉说真的还是差那么⼀点，体验过ios操作的朋友们能够明⽩我的意思。当然笔者并不建议以拖拽的⽅式添加约束。笔者的习惯绝对是会去⼿敲去添加约束的。
⼿敲xml：可能有朋友会说，放着简单便捷的操作不⽤⽽去⼿敲，不是⾃⼰⿇烦吗？是的你说的很对。但是我就是愿意去这个⿇烦的。⾸先我⼿写的⽅式能够让我更深刻的去理解constraint-layout为我们提供的属性的特性，并且根据组合属性⽅式去观察展⽰效果，这个过程是⼀个最简单有效的去理解记忆属性特点的好⽅法。有⼀部分朋友在使⽤拖拽⽅式完成布局后基本上不会再去看xml中⾃动⽣成的属性了，等到需求界⾯⼀旦发⽣改变的时候，如果不知道具体的属性产⽣什么效果，那么你绝对会后悔的，其中苦痛⾃⼰体会。
⾸先，先说⼀下拖拽⽅式：
可以看到，上下左右都有⼀个⼩圆圈，这个圆圈就是⽤来添加约束的。
四个⾓的矩形，是⽤来扩⼤或缩⼩控件的。
：删除选中控件的所有约束。
：编辑基线，⽤于基线对齐（下⾯会说）。
现在我们来为这个 Button 添加约束：
属性介绍
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintDimensionRatio
layout_constraintHorizontal_weight
layout_constraintVertical_weight
layout_constraintHorizontal_bias
layout_constraintVertical_bias
layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle
如上⾯列出来的属性都是我们开发过程中经常需要⽤到的属性，⼤家还可以注意到上⾯的属性我分别⽤不同的⼏种颜⾊标注了。那么我们就来⼀⼀的解读吧。
⾸先看红⾊的部分，这部分的属性跟相对布局（Relativelayout）⽐较类似，例如app:layout_constraintRight_toLeftOf="@+id/idview"意思为当前控件的右侧在其他控件的左侧，其他的此类属性都是类似的意思。那么最简单的我们想布局中拖⼊⼀个控件例如button：
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="button"/>
⼤家肯定注意到了其中的四个属性后⾯的值是“parent”，这样的四个属性同时作⽤下，控件button居于⽗级布局的中央。⼤家可能有疑问，为什么控件button不在⽗布局的左上⾓。constraint-layout约束布局，如果我们只添加左侧或者顶部的属性那么效果会是怎么样呢？
只添加左上约束：此时的button就出现了停留在左上⾓的位置，当然如果添加其他的属性，⼤家可⾃⾏实验。
此时我们在顶部在次添加⼀个button。
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="button"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toRightOf="parent"
android:text="button"/>
我们想实现⼀个button1在左侧，然后button占满右侧空间，如上代码所⽰却并不能得到我们想要的结果，上述代码的效果是
⽽想要达到这样的效果我们button2的宽度需要修改为0dp效果即为：
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="button"/>
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toRightOf="parent"
android:text="button"/>
你会发现button2，好像疯了⼀样，我们设置的在button1右侧，和与parent右侧对齐完全失效了
别怕，接下来就让你认识到为什么这个控件叫做constraint-layout
在当控件有⾃⼰设置的宽度，例如warp_content、固定值时，我们为控件添加的都是约束“Constraint”，这个约束有点像橡⽪筋⼀样会拉这个控件，但是并不会改变控件的尺⼨（RL很明显不是这样的）。
例如上例，当button2的宽度较⼩时，我们为其左侧设置了⼀个约束（button1右侧），右侧设置了⼀个约束（parent右侧对其），当两个约束同时⽣效的时候（你可以认为两边都是相同的⼀个拉⼒），button2会居中。
当btn02特别⼤的时候，依然是这两个⼒，那么会发⽣什么？会造成左侧和右侧超出的距离⼀样⼤。
那么现在⼤家肯定有些疑问：
怎么样才能和上⾯的RL⼀样，宽度刚好占据剩下的距离呢（btn01右侧到屏幕右侧的距离）？
这个问题，问得很好，我们刚才所有的尝试都是在控件⾃⾝拥有特定的宽度情况下执⾏的；那么如果希望控件的宽度根据由约束来控件，不妨去掉这个特定的宽度，即设置为0试试？
对！当我们将btn02的宽度设置为0时，⼀切⼜变得很完美
⼤家可能疑惑为什么match_parent不是将控件填满剩下的⽔平空间呢，之前我也想不明⽩，但是我查阅了官⽅资料，如下
那么这⾥，你可能会问0值是什么含义，其实在ConstraintLayout中0代表：MATCH_CONSTRAINT，看到这个常量，是不是瞬间觉得好理解了⼀点。
最后⼀个问题，MATCH_PARENT哪去了?
看官⽹的解释：
Important: MATCH_PARENT is not supported for widgets contained in a ConstraintLayout, though similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to “parent”.`
所以你可以认为：在ConstraintLayout中已经不⽀持MATCH_PARENT这个值了，你可以通过MATCH_CONSTRAINT配合约束实现类似的效果。当然在我们在将button2的宽度设为wrap_content时候，button2却位于右侧的中央部分，产⽣这种情况的原因是因为在constraint-layout中每个控件的属性设置当中默认都包含两个属性：
layout_constraintHorizontal_bias
layout_constraintVertical_bias
他们表⽰的意思就是控件在设置了⽔平或者垂直⽅向上的约束后，表⽰在⽔平或者垂直⽅向的拉⼒的⼤⼩，默认不添加这两个属性的话，他们的默认值是两个⽅向都是50%，即0.5。如果两侧拉⼒不是0.5，那么就不是位于中间的位置，请⼤家⾃⾏实践。
好了，到这⾥，⽬前我们已经看到其已经和RelativeLayout势均⼒敌了，接下来我们看⼀下RL做不到的特性
现在的要求是我们要做⼀个banner，宽⾼⽐为16:9，如果在之前的话我们只能在代码中动态设置宽⾼⽐，可是呢constraint-layout在我们xml⾥⾯设置⼀个属性就可以实现了。
layout_constraintDimensionRatio
没错就是这个属性，使⽤的时候
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/button1"
app:layout_constraintRight_toRightOf="parent"vertical怎么读
app:layout_constraintDimensionRatio="16:6"
android:text="button"/>
那么这样启动的作⽤就是宽⾼⽐为16:6当然控件的宽⾼都是 MATCH_CONSTRAINT即0dp。写法可以
是app:layout_constraintDimensionRatio="H,16:6"或者是app:layout_constraintDimensionRatio="W,16:6"，这就是宽⾼⽅向上的⽐例。效果就是
下⾯我们再来看如果我要做⼀个tab，怎么做呢？
<TextView
android:id="@+id/tab1"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#f67"
android:gravity="center"
android:text="Tab1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tab2" />
<TextView
android:id="@+id/tab2"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#A67"
android:gravity="center"
android:text="Tab2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tab1"
app:layout_constraintRight_toLeftOf="@+id/tab3" />
<TextView
android:id="@+id/tab3"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#767"
android:gravity="center"
android:text="Tab3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/tab2"
app:layout_constraintRight_toRightOf="parent" />
看下效果：
我们设置了tab的左右两两依赖，并且都是设置了宽度0dp，我们实现了等分的效果，使⽤text冒充tab成功了。
当然⼤家都知道我们通过linearlayout配合weight也可以实现这样的效果。是的constraint-layout同样⽀持这样的效果。这个属性就是app:layout_constraintHorizontal_weight，app:layout_constraintVertical_weight见名知意，假设我把他们设置为2,1,1那么效果就是：
⼤家都看到了到这⾥constraint-layout是可以达到了relativelayout和linearlayout同样的效果，可以使⽤constraint-layout替代他们。当然还有⼀些特性是相对布局与线性布局不可达到的特性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。