ConstraintLayout布局学习总结

参考链接：
https://developer.android.com/training/constraint-layout/index.html?utm_campaign=android%20studio_launch_2.2_091916&utm_source=anddev&utm_medium=blog#add-constraintlayout-to-your-project

http://quanqi.org/2016/05/20/code-labs-constraint-layout/

前言

Google I/O 2016 上发布了 ConstraintLayout，刚发布出来的时候也跟着试玩了一下，看着官方的例子也写了一个布局，但是没有深入去看。最近刚刚将Android Studio升级到了Android Studio2.2正式版，期待已久的Android studio 2.2确实给我们带来了很多新的功能。其中两项跟本文相关就是：

• New Layout Editor
• ConstraintLayout

很多人都说ConstraintLayout是一项大的革新，但是也有人说Google是在开历史倒车，下面我就以自己的试水经验谈谈自己的感受。首先我想说ConstraintLayout确实是一个新的很强大的布局，最起码在减小布局层级这一块作用很大。然后ConstraintLayout虽有优点但也不能完全取代RelativeLayout和LinearLayout，以前都是手写XML的，忽然让我们拖控件（说真的，拖控件拖的我眼珠子都瞪大了，手都拖麻了）有点不好适应,而且有的拖动很难实现，可能还有待完善吧。但是拖了两天发现自己越拖越顺手，有经验后拖的越来越快。

Everything you can do with ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.
你能够对ConstraintLayout 做的任何处理都可以使用布局编辑器工具实现，由于这个布局的api和布局编辑器都是互相量身定制的。所以你使用 ConstraintLayout 来编写实现你的布局时完全可以只使用拖拽而不需要编辑XML。－－－来自官网

准备阶段

为了使用ConstraintLayout请执行下面的步骤：
1，首先先将自己的Android studio升级到Android studio2.2正式版或者以上版本
2，保证你有最新的Constraint Layout库：

• 点击Tools > Android > SDK Manager.
• 点击SDK Tools选项卡
• 点开Support Repository，并且选择ConstraintLayout for Android还有Solver for ConstraintLayout.选中Show Package Details，如果没有下载过的话，就点击OK下载
• 在项目中添加依赖库

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

Paste_Image.png

现在就可以使用了

基础教程

基本概念

先认识一下基础东西

E7565621-16E8-4010-B2F9-F19DC5BC66F2.png

关于操作
其实实际操作就是切换到设计视图模式，然后先把一个需要的控件拖进来。然后对各个约束操作手柄进行操作。侧边操作手柄决定侧边距离父控件或者相对于其它控件的距离，尺寸约束可以修改控件的大小，直接点击到控件上拖动，可以改变控件的位置，但是这样拖动到某一个位置，并不是它实际的位置，假如不利用侧边、基准线等约束，实际运行效果控件会跑到（0，0）.

When creating constraints, remember the following rules:
当创建约束的时候需要记住以下的一些原则：

• Every view must have at least two constraints: one horizontal and one vertical.
  每个View必须至少有两个约束：一个水平方向的一个垂直方向的

假如不满足上面的原则，XML文件就回报红

23F830F7-584D-49F2-B0AB-F81D3240E7C1.png

也就是说只需要设置一个水平方向的约束和一个垂直方向的约束就可以不报错了

64F530AF-3288-482C-9B15-754927893E8C.png

我们需要做的就是点击左侧侧边约束的点，然后往左边拖，箭头变绿，然后松手，就可以了，然后点击上边的侧边约束往上面拖，箭头变绿松手，

也可以点击侧边约束，拖到其它控件的侧边，这种叫Alignment constraint排列约束

盗图自官网

基准线约束：
比如想让第二个textview在第一个的右边，然后水平对齐，这里要借助第二个textview的左侧侧边约束点和基准线约束手柄。关于基准线手柄，我有一些话说：首先有的控件没有基准线手柄比如ImageView等；手拖时不好拖，开始不知道，我都是先放大，然后点上去，等基准线位置变色才可以拖出来（拖的我也是醉了），其实有个小技巧官网上有提：To create a baseline constraint, hover your mouse over the baseline handle for two seconds until the handle blinks white. Then click and drag the line to another baseline. 将鼠标悬置在基准线约束手柄的上面等两秒钟会发现手柄区域变白色，然后点击并拖动，你会发现会有蓝色小箭头出现，把这个箭头拖到另外一个基准线上，就完成了基准线约束。实在感觉不好拖就在XML里面写这个属性吧 app:layout_constraintBaseline_toBaselineOf="@+id/textView1"

79FE84D9-A73A-47BA-8F8F-40358B483523.png

Constrain to a guideline，可以理解为指导线，辅助线约束
这个算是个新概念，用着感觉还是极好的。。

9E3FF69D-3E05-497D-B0FE-E7D90E5B89AF.png

B918F5C4-C50E-47E2-A4A5-5024E8850BA4.png

看上图Imageview的位置可以完全靠这两条线决定

关于设置宽高

下面是使用新的布局编辑器编写布局的界面

EBD9C720-00F8-498F-954C-7951083EAD6B.png

当我们点击到一个控件上的时候，你会发现右上角有一个四方块，这个地方就是代表控件的一些属性其中包括宽高，比例等

A5DFD102-994F-4C4B-BC9B-DD1311E251DD.png

下面解释上图各个图标代表的含义：

• Wrap Content:
  
  The view expands exactly as needed to fit its contents.这个相当于Wrap Content，不用多说
• Any Size:
  
  
  根据它的约束需要任意扩展，可以理解为"match constraints"而不是"match_parent"，
• Fixed:
  
  
  这个代表自己设置固定的数值dp

这几个属性可以只要点击一下图标就可以了切换为其他属性。
＊注意：在ConstraintLayout中的人和一个view都不应该设置为match_parent而应该使用Any Size（0dp）；

举个栗子

目前我发现使用这个ConstrainLayout有个比较坑的地方就是，有时候你拖好了一个控件，但是以前设置好的控件又回到解放前了（就是前面设置的约束自动消失）

下面是一个我做的一个小视频
http://odwl8g8h2.bkt.clouddn.com/constraintlayout_first.mp4

总结

刚开始学习还有很多不懂的地方，以上有出错的地方请指出