ConstraintLayout 的入门用法

    昨天看到Android studio 更新了2.2版本，其中一个比较明显的改动就是新增了一个布局--ConstraintLayout。刚开始看到官方给出的文档，也没感觉出怎么好用，但是自己亲自写了一个页面之后，感觉就不一样了，真的很好用，所以写了这篇文章。

    下面我就来介绍一下它的基本用法：

    首先我们来新建一个布局，然后在点确定之前在Root element 选项中选择android.support.constraint.ConstraintLayout作为这个布局的主布局，选完之后点击确定按钮。

    

   

  创建好之后大概就是这样的布局状态

    

    下面来介绍几个图标以及他们的用途：

     

    这个图标主要是自动创建约束，一般在用的时候把它关了就行了，我们都会自己选择手动创建控件之间的约束关系。

     

    这个像眼睛的图标，很明显它是用来查看用的。如果把它打开，则会在右边的蓝色布局显示控件之间的约束关系，或是把鼠标放在左边的布局上也会显示约束关系；关掉则不会主动显示。

     

    这个图标分两种情况：点击工具栏中的，则会清除所有的约束关系；另一种是，点击某个控件，这个控件下面会出现这个图标，这个时候你再点击，就会把这个控件上的约束关系清除。

     
  使用推理创建约束. 推理引擎会基于诸如空间位置和大小之类的各种因素尝试查找并创建最佳连接. 

     
   横向扩展空间以适应约束 
     
   纵向扩展空间以适应约束

    

    这两个图标会在你的布局上面添加一条或多条横向或是纵向的线，这线的作用就是把布局按百分比进行切割，然后你在放控件的时候就可以根据这条线来进行放置你的控件，这样就会使布局看起来更加整齐，也可以更好的适配其他尺寸的屏幕。

 对于图标来说，这几个是主要的，其他的图标功能在这里就不叙述了。

 还有一个比较好的地方就是，当你点击某个控件之后，在最右侧会出现一个这样的一个叫Properties的栏目：

    

     这样就可以更清晰的看到这个控件的属性，而且你还可以直接进行修改，点击右上角的 来查看更对属性，总之一句话：更直观，更方便。

 接下来 我们就进入创建页面的实战当中，我们来一起完成下面的页面：

      

     在一开始，我们要先对整体的布局进行一下规划和划分，咱们这个页面大概分为三个部分，上中下三部分。 这就要用到了我们之前提到的Guideline

    

    我在这里加了四条线，横纵各两条。下面我就来说一下这四条线的作用，

①最上面的横线是图片的约束线

②最下面的横线是中下部文字的约束线，以防止文字过多占用下面按钮的位置

③最左边的线是“账号” “密码” Textview右边距的对准线，其实这个不加也没太大的关系

④最右边的线是最上边的大图右下角的图标所在位置的约束线。

另外，这些线都会在xml代码中生成，我们还可以通过代码来微调。

    接下来的任务就很简单了，就根据这几条线来填充相应的控件就行了。在添加控件的时候，如果要约束某个控件，那么就拖动这个控件四周的小圆圈到另外的控件、Guideline或者最边上，当这个圆圈变成绿色，松开鼠标即可，这说明我们约束成功了，如果你想取消这个约束，那么用鼠标的左键点击这个圆圈即可取消。

    最后完成的时候就是这个样子的，顺便我把他们的约束关系也展示出来：

   

   

  下面是这个布局的xml代码：

    

   

       附：以上纯属个人领悟，如果有不对地方或是更好的意见，请指出。互相学习，共同进步。