Android _ ConstraintLayout控件

下载最新版的Android Studio

添加依赖

    compile 'com.android.support.constraint:constraint-layout:1.0.0'

概念

ConstraintLayout约束布局的含义: 根据布局中的其他元素或视图, 确定View在屏幕中的位置. 包含三个重要信息, 根据其他视图设置位置, 根据父容器设置位置, 根据基准线设置位置.

使用

layout_constraint[本源]_[目标]=”[目标ID]”

举例

layout_constraintTop_toTopOf

约束当前Button的底部至目标id为lay_root（代表我的父布局）的底部, 目标View是ConstraintLayout. 表明, 把当前View放置到lay_root(父容器)的底部, 并且底部一致.

layout_marginLeft

如果想使用它，必须设置layout_constraintLeft_toLeftOf（必须对应，如何设置右，必须设置toRight），否则将不能实现margin的设置

---

layout_constraintLeft_toRightOf 设置按钮2相对于按钮1的位置。意思是：按钮2左边在按钮1的右边

约束列表

layout_constraintLeft_toLeftOflayout_constraintLeft_toRightOflayout_constraintRight_toLeftOflayout_constraintRight_toRightOflayout_constraintTop_toTopOflayout_constraintTop_toBottomOflayout_constraintBottom_toTopOflayout_constraintBottom_toBottomOflayout_constraintBaseline_toBaselineOflayout_constraintStart_toEndOflayout_constraintStart_toStartOflayout_constraintEnd_toStartOflayout_constraintEnd_toEndOf

app:layout_constraintBaseline_toBaselineOf

表示此控件与某个控件水平对齐

---

Margins边距

android:layout_marginStartandroid:layout_marginEndandroid:layout_marginLeftandroid:layout_marginTopandroid:layout_marginRightandroid:layout_marginBottom

---

当前面布局gone隐藏时设置margin

layout_goneMarginStartlayout_goneMarginEndlayout_goneMarginLeftlayout_goneMarginToplayout_goneMarginRightlayout_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"

---

视图尺寸

ConstraintLayout布局中的控件也可以设置填充尺寸. 控件把宽度设置为0dp会自动根据位置进行填充. 如button4按钮, 左侧对齐与button2按钮的右侧, 右侧对齐与lay_root父控件的右侧, 宽度设置为0dp, 实际会填充全部位置.

<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"        />

---

引导线

ConstraintLayout布局除了与布局对齐以外, 还可以与引导线(Guideline)对齐. 设置竖直引导线(Guideline)距离左侧72dp. 按钮(Button4)的左侧都与引导线对齐（个人认为类似LinearLayout设置内边距一样）

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