全网最清晰的ConstraintLayout教程

ConstraintLayout是AndroidStudio2.2新增的一个功能，那么这个究竟是什么呢？首先第一点咱们知道传统的安卓开发，页面基本都是XML编写实现，特别在一些复杂的页面上须要嵌套多层，下降了页面加载的效率，由于ConstraintLayout就能够很好的优化布局，还有一点咱们羡慕IOS的拖拽XML页面在这里也能够更好的实现。固然我所说的以上两点都是优化之前的布局，这也是Google极力要作的事情

开始

想要使用ConstraintLayout，首先AS版本必须升级到2.2以上(我基本都是逢新必更)，首先须要在app/build.gradle文件中添加ConstraintLayout依赖

implementation 'com.android.support.constraint:constraint-layout:1.1.2'
复制代码

而后在项目的build.gradle文件buildscript和allprojects的repositories中添加google()

allprojects {
    repositories {
        google()
        jcenter()
    }
}
复制代码

而后同步就能够愉快的使用ConstraintLayout了~~

首先咱们按照Google文档的顺序依次学习https://developer.android.com/reference/android/support/constraint/ConstraintLayout 先来一波api

1. layout_constraint[自身控件位置]_to[目标控件位置]Of=="[目标控件ID]"

• 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

看到这些猜也能猜出个大概~好比layout_constraintLeft_toLeftOf就是说当前控件的Left在目标控件的Left上。若是目标控件为父控件则id能够直接写成parent。好比要实现B控件在A控件右面,则在B控件中设置layout_constraintLeft_toRightOf。意思就是说B控件的左面在A控件的右面~

2. Margins

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

这个与以前其余viewgroup属性一致，不同的就是多了如下几点：

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

goneMargin属性是指目标控件GONE掉以后，自身控件能够设置个margin值，这里有一点须要敲黑板，目标控件就是相对于的那个控件

3. Bias

• `layout_constraintHorizontal_bias``
• layout_constraintVertical_bias

这个属性的意思是可使用误差属性调整定位以使一侧偏向另外一侧，即控件距离左右百分比（layout_constraintHorizontal_bias）和距离上下百分比（layout_constraintVertical_bias）

4. WRAP_CONTENT : enforcing constraints (*Added in 1.1*)

强制约束

• app:layout_constrainedWidth=”true|false”
• app:layout_constrainedHeight=”true|false”

true表明防止约束失效，默认为false，好比：B在A的右边app:layout_constraintLeft_toRightOf="@+id/a"，可是当A的内容愈来愈多而且超过了A到父控件最右的距离，此时就会约束失效使B的一部分出现了A的非右边。若是B设置了该属性为true，则B始终出如今A的右边，不会发生约束失效

5. Ratio

app:layout_constraintDimensionRatio="H,16:9"
复制代码

不用多说百分比布局是android中经常使用的一种适配布局H或W则表明以高或宽为基准

6. Guideline

layout_constraintGuide_begin 距离父容器起始位置的距离（左侧或顶部）

layout_constraintGuide_end 距离父容器结束位置的距离（右侧或底部）

layout_constraintGuide_percent 距离父容器宽度或高度的百分比

其实很好理解，好比

<android.support.constraint.Guideline android:id="@+id/guide1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" />

    <android.support.v7.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/guide1" />
复制代码

则表示在垂直方向上画一根基准线（只是参考线，并不进行view绘制）而后其余控件能够根据这条线进行放置

7. Barrier

<android.support.v7.widget.AppCompatButton android:id="@+id/a" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="a" />

    <android.support.v7.widget.AppCompatButton android:id="@+id/b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="bbbbbbbbbbbbbbb" app:layout_constraintTop_toBottomOf="@+id/a" />

    <android.support.v7.widget.AppCompatButton android:id="@+id/c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="c" app:layout_constraintLeft_toRightOf="@+id/barrier" />

    <android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="right" app:constraint_referenced_ids="a,b" />
复制代码

显而易见，你能够把他看作一个容器constraint_referenced_ids=控件id，而后把这些控件看作一个总体

8. Group

它和Barrier有殊途同归之处，相同的都是你能够把他们看作一个容器，不一样的是他是控制整个容器之中的全部的控件的可见或者不可见，好比android:visibility="gone"，那它所包裹的左右控件都会gone。

固然ConstraintLayout的Api不止这些，须要咱们真真切切的去使用它，你会发现它真的很好用~

参考

Android开发文档 [Developer][developer.android.com/reference/a…]