![这里写图片描述](https://img-blog.csdn.net/20170226191820249?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3RsZGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
下载最新版的Android Studio
添加依赖
compile 'com.android.support.constraint:constraint-layout:1.0.0'
概念
ConstraintLayout约束布局的含义: 根据布局中的其他元素或视图, 确定View在屏幕中的位置. 包含三个重要信息, 根据其他视图设置位置, 根据父容器设置位置, 根据基准线设置位置.
使用
layout_constraint[本源]_[目标]=”[目标ID]”
举例
![这里写图片描述](https://img-blog.csdn.net/20170226194117280?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3RsZGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
layout_constraintTop_toTopOf
![shuxing](https://img-blog.csdn.net/20170226195903353?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3RsZGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
layout_marginLeft
如果想使用它,必须设置layout_constraintLeft_toLeftOf(必须对应,如何设置右,必须设置toRight),否则将不能实现margin的设置
![两个按钮的放置](https://img-blog.csdn.net/20170226195216328?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3RsZGFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
layout_constraintLeft_toRightOf 设置按钮2相对于按钮1的位置。意思是:按钮2左边在按钮1的右边
约束列表
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
app:layout_constraintBaseline_toBaselineOf
表示此控件与某个控件水平对齐
Margins边距
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
当前面布局gone隐藏时设置margin
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
比例 —Bias
layout_constraintHorizontal_bias 水平比例
layout_constraintVertical_bias 垂直比例
ConstraintLayout布局除了对齐属性, 还有重要的比例属性. 中心(Center)按钮需要把全部边界与constraintLayout(父容器)边界对齐, 则为居中. 还可以设置layout_constraintHorizontal_bias和layout_constraintVertical_bias但必须设置约束(layout_constraintRight_toRightOf相对于父布局的right约束,如果不设置将无法使用比例)
app:layout_constraintVertical_bias="0.3"
视图尺寸
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="50dp"
android:text="按钮4"
android:textColor="#fff"
app:layout_goneMarginLeft="50dp"
android:background="@color/colorPrimaryDark"
app:layout_constraintLeft_toRightOf="@+id/button2"
app:layout_constraintTop_toTopOf="@+id/lay_root"
app:layout_constraintRight_toRightOf="@+id/lay_root"
/>
引导线
app:layout_constraintGuide_begin
表示在布局中引导线距顶部或左边框的距离(如:20dp表示距顶部或者左边框20dp)
app:layout_constraintGuide_end
表示在布局中引导线距底部的距离(如:10dp表示距顶部10dp)
app:layout_constraintGuide_percent
表示在整个布局中引导线距离左边框的百分百(如:app:layout_constraintGuide_percent=”0.5”表示距离左边框50%的位置)
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content"
app:layout_constraintGuide_begin="10dp"/>
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="50dp"
android:text="按钮4"
android:textColor="#fff"
android:background="@color/colorPrimaryDark"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
app:layout_constraintTop_toTopOf="@+id/lay_root"
app:layout_constraintBottom_toBottomOf="@+id/lay_root"
app:layout_constraintVertical_bias="0.8"
/>
视图纵横比(高宽比)
ConstraintLayout布局还可以使用constraintDimensionRatio设置视图的纵横比, 则需要把宽(layout_width)或者高(layout_height)设置为0dp, 根据另一个属性和比例, 计算当前属性
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="按钮5"
android:textColor="#fff"
app:layout_constraintDimensionRatio="4:3"
android:background="@color/colorPrimaryDark"
app:layout_constraintTop_toTopOf="@+id/lay_root"
app:layout_constraintBottom_toBottomOf="@+id/lay_root"
app:layout_constraintVertical_bias="1"
/>
绝对坐标点
app:layout_editor_absoluteX
表示此控件在布局中X轴的绝对坐标点
app:layout_editor_absoluteY
表示此控件在布局中Y轴的绝对坐标点。
Demo