ConstraintLayout的使用介绍

ConstraintLayout的使用介绍

ConstraintLayout的介绍和依赖

在2016年的Google的I/O大会上，出来一个新的布局ConstraintLayout(约束性布局)。在Android Studio2.2版本后自动依赖使用ConstraintLayout布局。

ConstraintLayout的依赖

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

ConstraintLayout约束布局的含义

根据布局中的其他元素或视图，确定View在屏幕中的位置， 受到三类约束，即其他视图，父容器(parent)， 基准线(Guideline)。

ConstraintLayout的优势

ConstraintLayout的相比RelativeLayout和LineatLayout具有更强的特性，可以减少布局之间的嵌套。

---

ConstraintLayout的相对位置的设置

• 相对位置属性

  相对位置属性：layout_constraint[自身控件位置]_[目标控件位置]="[目标控件ID]"，如果id是父布局的id，可以使用parent。如：

  • layout_constraintLeft_toLeftOf=”@id/…”：控件自身的左边和目标控件的左边对齐。
  • layout_constraintLeft_toRightOf=”@id/…”：控件自身的左边和目标控件的右边对齐。
  • layout_constraintRight_toRightOf=”@id/…”：控件自身的右边和目标控件的右边对齐。
  • layout_constraintRight_toLeftOf=”@id/…”：控件自身的右边和目标控件的左边对齐。
  • app:layout_constraintStart_toStartOf=”@id/…”：和上面意思差不多，就不解释了
  • app:layout_constraintStart_toEndOf=”@id/…”：
  • app:layout_constraintEnd_toEndOf=”@id/…”：
  • app:layout_constraintEnd_toStartOf=”@id/…”：
  • layout_constraintTop_toTopOf=”@id/…”：控件自身的上边和目标控件的上边对齐。
  • layout_constraintTop_toBottomOf=”@id/…”：控件自身的上边和目标控件的下边对齐。
  • layout_constraintBottom_toBottomOf=”@id/…”：控件自身的下边和目标控件的下边对齐。
  • layout_constraintBottom_toTopOf=”@id/…”：控件自身的下边和目标控件的上边对齐。

  eg:

  <?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button1"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" />    <Button        android:id="@+id/btn_1"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button2"        app:layout_constraintBottom_toTopOf="@id/btn" /></android.support.constraint.ConstraintLayout>

  效果图：

  

  • app:layout_constraintBaseline_toBaselineOf=”@id/btn”：文字的底部线对齐

  eg:

  <?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button1"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" />    <Button        android:id="@+id/btn_1"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button2"        app:layout_constraintBaseline_toBaselineOf="@id/btn" /></android.support.constraint.ConstraintLayout>

  效果图：

  

---

• goneMargin属性

  goneMargin属性是指目标控件GONE掉之后，自身控件可以设置个margin值。不过margin的方向需要和控件的相对位置的方向保持一致（下面的实例会说）。

  • layout_goneMarginLeft=”xxdp”：当目标控件GONE时，自身控件距离左边的边距xxdp（当约束的方向左右方向时有效）。
  • layout_goneMarginStart=”xxdp”：
  • layout_goneMarginRight=”xxdp”：
  • layout_goneMarginEnd=”xxdp”：
  • layout_goneMarginTop=”xxdp”：
  • layout_goneMarginBottom=”xxdp”：

  eg:

      <?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button1"        android:visibility="visible"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" />    <Button        android:id="@+id/btn_1"        android:layout_width="100dp"        android:layout_height="100dp"        android:text="Button2"        app:layout_constraintBottom_toTopOf="@id/btn"        app:layout_goneMarginBottom="200dp" /></android.support.constraint.ConstraintLayout>

  效果图：

  

---

• bias属性

  bias属性是指在对齐父容器后，设置水平与竖直的比例。

  • app:layout_constraintHorizontal_bias=”0.2”：设置相对父控件距离的长度的为父控件的宽度0.2倍的位置
  • layout_constraintVertical_bias=”0.2”:设置相对父控件距离的长度的为父控件的长度0.2倍的位置

  eg:

  <?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button1"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_bias="0.2"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.2" /></android.support.constraint.ConstraintLayout>

  效果图：

  

---

ConstraintLayout设置高宽比例

• layout_constraintDimensionRatio=”2:1”：通过该属性可以设置View的高宽比。这样可以很好的做手机屏幕的适配了。

eg:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/parent"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--指定高度，宽度随着宽高比自适应 -->    <!--app:layout_constraintDimensionRatio="16:9"  W: 默认，表示宽高比-->    <ImageView        android:id="@+id/image"        android:layout_width="0dp"        android:layout_height="100dp"        android:src="@color/colorPrimary"        app:layout_constraintDimensionRatio="16:9"        app:layout_constraintLeft_toLeftOf="parent" />    <!--指定高度，宽度随着宽高比自适应 -->    <!--app:layout_constraintDimensionRatio="H,16:9"  H: 表示高宽比-->    <ImageView        android:layout_width="0dp"        android:layout_height="100dp"        android:src="@color/colorAccent"        app:layout_constraintDimensionRatio="H,16:9"        app:layout_constraintRight_toRightOf="parent" />    <!--指定宽度，按照宽度来计算高宽比   默认是宽高比 -->    <ImageView        android:layout_width="100dp"        android:layout_height="0dp"        android:layout_marginTop="20dp"        android:src="@color/colorPrimary"        app:layout_constraintDimensionRatio="16:9"        app:layout_constraintTop_toBottomOf="@id/image" />    <!--指定宽度，按照宽度来计算高宽比  W, 表示高宽比 -->    <ImageView        android:layout_width="100dp"        android:layout_height="0dp"        android:layout_marginTop="20dp"        android:src="@color/colorPrimary"        app:layout_constraintDimensionRatio="W,16:9"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toBottomOf="@id/image" />    <!--android:layout_width="0dp"  0dp表示充满父控件或说是充满其余空间-->    <ImageView        android:layout_width="0dp"        android:layout_height="0dp"        android:src="@color/colorAccent"        app:layout_constraintBottom_toBottomOf="@id/parent"        app:layout_constraintDimensionRatio="2"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent" /></android.support.constraint.ConstraintLayout>

效果图：

---

ConstraintLayout设置基准线（Guideline）

Guideline是一条隐形的线，这条线可作为准线，根据此准线设置其他控件的位置。

Guideline是一个View(android.support.constraint.Guideline)，基准线的通过android:orientation设置方向。通过基准线来约束其他的view。

• layout_constraintGuide_begin=”xxdp”：基准线开始方向xxdp
• layout_constraintGuide_end=”xxdp”：基准线结束方向xxdp
• layout_constraintGuide_percent=”0.3”：基准线开始方向距离的父控件大小的百分比。

eg:

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.constraint.Guideline        android:id="@+id/guideline1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical"        app:layout_constraintGuide_begin="100dp" />    <android.support.constraint.Guideline        android:id="@+id/guideline2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="horizontal"        app:layout_constraintGuide_percent="0.3" />    <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        app:layout_constraintLeft_toLeftOf="@+id/guideline1"        app:layout_constraintTop_toTopOf="@id/guideline2" /></android.support.constraint.ConstraintLayout>

效果图：

---

ConstraintLayout设置链状结构（Chain Style）

Chain Style是使多个控件像链条一样显示，这个更能可以类似LinearLayout的weight属性。

要想chain style生效，控件要相互引用，比如A的右边依赖B的左边，B的左边依赖A的右边，都是设置。 如:水平方向的Chain Style.

Chain Style的分为水平和竖直方向，每种都有3中模式：

• layout_constraintHorizontal_chainStyle=”spread”：均匀分布（包括边上控件左右的边距）
• layout_constraintHorizontal_chainStyle=”spread_inside”：均匀分布，但是边上的控件不均匀分布（边上控件没有边距）
• layout_constraintHorizontal_chainStyle=”packed”：控件紧挨在一起。还可以通过bias属性设置偏移量。
• layout_constraintHorizontal_weight=”“：跟线性布局的weight差不多，width需要设置0dp，控件的大小根据设置的weight比例进行设置。
• layout_constraintVertical_chainStyle=”“:和上面一样，有三种模式spread，spread_inside，packed。
• layout_constraintVertical_weight=”“：

如图：

eg：

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent">    <Button        android:id="@+id/btn1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button1"        app:layout_constraintHorizontal_chainStyle="spread"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toLeftOf="@id/btn2" />    <Button        android:id="@+id/btn2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button2"        app:layout_constraintLeft_toRightOf="@id/btn1"        app:layout_constraintRight_toLeftOf="@id/btn3" />    <Button        android:id="@+id/btn3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button3"        app:layout_constraintLeft_toRightOf="@id/btn2"        app:layout_constraintRight_toRightOf="parent" /></android.support.constraint.ConstraintLayout>

效果图：

ConstraintLayout控件的其他属性

• layout_constraintWidth_min=”“：最小宽度
• layout_constraintWidth_max=”“：最大宽度
• layout_constraintHeight_min=”“：最小高度
• layout_constraintHeight_max=”“：最大高度

下面几个属性是 UI 编辑器所使用的，用了辅助拖拽布局的，在实际使用过程中，可以不用关心这些属性。

• layout_optimizationLevel
• layout_editor_absoluteX
• layout_editor_absoluteY
• layout_constraintBaseline_creator：
• layout_constraintTop_creator：
• layout_constraintRight_creator：
• layout_constraintLeft_creator：
• layout_constraintBottom_creator：

文章参考：

Android ConstraintLayout详解

ConstraintLayout 终极秘籍