本文共 3634 字，大约阅读时间需要 12 分钟。

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:

  效果图：

  

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

  eg:

  效果图：

  

• 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:

  效果图：

  

• bias属性

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

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

  eg:

  效果图：

  

ConstraintLayout设置高宽比例

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

eg:

效果图：

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:

效果图：

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：

效果图：

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：

文章参考：

转载地址：http://eesvn.baihongyu.com/