Android新布局组件ConstainLayout了解使用

  Android新布局组件ConstainLayout了解使用

 一、概述

ConstrainLayout约束布局，它算是一个重量级的组件了。在Google 2016 I/O上发布的，需要Android Studio 2.2及以上的支持，使用支持包最低可支持到Android OS 2.3版本的系统上。为什么它是一个重量级的组件呢？1、Studio专门修改了xml界面的design界面用于支持编辑这类的布局组件，说明他的重要性。2、另外据说在ios系统中早就这类的布局，使用起来方便很多的。3、网上也有大量的介绍，证明它也受到了大家的欢迎。

ConstrainLayout的优势：官网上介绍它是用于构建扁平化的，灵活自适应，复杂的布局。注意这三个特点：

1、扁平化，即在布局内嵌套布局，只套一层或少量的几层布局，View的层级越少，渲染性能就好（关于view的界面渲染性能提升）。而且布局管理起来也会轻松一些。在constrainLayout中，以前嵌套好多层的布局，几乎可以只用一层就搞定了，效果好了太多。

2、灵活自适应：它提供了丰富的布局功能，包括RaletiveLayout所有的，设置准线，设置长宽比，设置比例布局，百分比等。基于此，它能够构建很灵活的布局，比如以前遗憾的不能在RelativeLayout中设置比例，而这里却能设置好多种比例，甚至到让你弄不懂的程度。而且由于不用管以前多层布局的约束，在ConatrainLayout里面布局具有良好的可扩展性，往后想要添加或改动布局，也要简易得多。

3、复杂的布局：即能用它搞定复杂的布局，其它单个布局做不到的它可以做到。

二、使用

以上说了这么多，下面开始关于它的使用，这里按个人的理解介绍，网上很多的标准的教程。比如 http://www.jianshu.com/p/a8b49ff64cd3
1、在xml布局的design界面，点击左上角的palette面板，然后选择到layout->ConstrainLayout ，会提示导入library，导入即可。官方的目标和推荐是几乎完全使用design 面板完成一个界面的设计。

2、然后整个design面板如下，加了很多的新元素，下面介绍这些新的元素，并完成对ConstrainLayout基本使用的介绍。这样可以一遍熟悉操作按钮，一边学习这个布局的使用。

如下图可以看到，design界面最大的改动就是增加了一个蓝色的模拟手机屏，里面放的就是约束布局下的界面。然后在每个View 的四边的中间，都有一个同心圆状的东西，暂称作手柄，对于TextView类族的视图，里面有一个小长条，即文字的基线，选中后会显示出来。

约束：

首先了解约束，约束和Relativelayout的layout_alignXXX很相似，就是由它发展来的，不过约束有更多的种类和功能，在蓝色手机屏中的箭头或者弹簧就是一个约束它一般就由一个组件的手柄指向另一个组件的手柄，或者基线，或者父布局，或者后面介绍的准线。

要添加约束时，就长按手柄一会（否则是拖动组件），然后将它指向另一个相应的地方，这样一条约束就建立好了。

 

约束的相关处理：

1.对于一个组件至少有在x方向和y方向都加上约束，否则相对位置不起作用，明显的x坐标+y坐标，确定位置嘛。

2.一个手柄只能引出一个约束，一出多进。

3.单击手柄移除它的约束，选中View后点击旁边出现的X移除他所有的约束。

4.设置约束的长度，约束是有长度的：在图右边板块的上方，正方形外面还加了四条边的，点击数字可以设置约束的长。正方形的内部的图形，在正方形内部，是设置组件的长宽。有三种模式，鼠标悬停可以看到，fixSize表示固定设置的长宽，以及anysize,anysize比较特别，用0dp表示，在约束布局下，不能使用match_parent和fill_parent .anysize会填充满出去约束后剩下的空间。

如果一个轴两边都加了约束，这可以设置每边所占的百分比，通过下方或左边的那个带数字的线条。特别的，如果此时设置fixsize或者wrap_content,而最终的size+约束的长度不能填满父布局，则会按两条约束长度比例分配两边的空白。

再看design界面：

中间一块最左上角带格子的方框，表示采用哪种视图。可以看到中间模拟的手机屏幕变成了两块，白色和蓝色，蓝色专门用于显示约束相关的东西。（很大的改动，所以说这个布局是很重要的。）根据三个图可以知道，就是选择显示他们其中一个还是都显示出来。

然后这一块的正下方四个个操作按钮，从左往右，第一个眼睛，表示对于没被鼠标选中的组件是否显示约束；第二个磁铁，表示是否新加入一个View时，是否由系统自动添加约束，否则自己添加；第三个带X的，表示将所有组件已添加的约束都删除掉；第四个灯泡，叫做推理引擎，表示让系统自动建立约束时智能的建立，即默认情况下和相邻的View建立约束，智能的就是选择最合适的View去建立约束。

准线：

关于准线：在设计界面时，也有过类似的想法，就是添加一条线出来，以这条线为准放置View组件，在ConstrainLayout中，给与支持了，这里准线只在设计界面起作用，即在实际运行在手机的界面中，它已被替换，是没有准线这个东西的。

从电灯按钮往右走三个，一个像—工字的，就表示添加准线。通过点击该按钮，即可添加一条准线，准线的位置可以是绝对值或者百分比的形式，然后其他的View就可以通过手柄连接到它设置约束。添加准线后，点击它，然后点击手柄可以进行拖动，切换绝对值和百分比：选中准线，然后点击顶部或左边的圆就可以切换了。

以上就是ConstrainLayout的基本功能与使用，通过design上的操作，可以完成基本的布局了，更复杂的可以到text界面去写。

下面介绍更复杂一点的使用。

  三、更复杂的使用

1、设置View自身的宽高比：

一般的，根据几何特性可以知道，要让矩形宽高长度最终成一定的比例，可以通过确定一边的长或者面积来确定。这里的View就可以通过上面的三种方式设置好，保证最后其长度可以确定下来。然后通过layout_constraintDemensionRatio=“float”或者=“int:int”就可以设置出比例了。（还有一种情况是如果两边都设置的0dp，anysize，用=“H 16:9”表示设置高位16，比例16:9,即设置比例的同时设置了高，宽也一样）

2、设置链式约束，简单地说，就是按比例分配子View的长或宽

官方文档上的介绍：

Chain Style

When setting the attribute layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle on the first element of a chain, the behavior of the chain will change according to the specified style (default is CHAIN_SPREAD).

• CHAIN_SPREAD -- the elements will be spread out (default style)
• Weighted chain -- in CHAIN_SPREAD mode, if some widgets are set to MATCH_CONSTRAINT, they will split the available space
• CHAIN_SPREAD_INSIDE -- similar, but the endpoints of the chain will not be spread out
• CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements

Fig. 10 - Chains Styles

5种链式依赖如上图所示，第一种是默认先平分父布局的空间，然后在该空间内再设置自己的约束占比，View长宽等。第二种spead-inside-chain形式变了一下。第三种是带比重的，注意这种比例还可以错位，比如横向是比例，纵向可以错位的。后面两种不太清楚。

具体操作：

这个操作起来比较坑，目前的Android Studio上基本不能依赖design界面操作这个，首先在哪个方向上，把那个方向上的所有的手柄都与相邻View的手柄连上，没有连到父View上，比如横向的1左连父，1右连2,2左连1右边，2右边年3左边，，，，注意这个在蓝屏上是不能操作的，必须手动写才行，这样一个spread链式排列就完成了，但是蓝屏上也无法看到正确效果，白屏上才是对的。

然后因为spread是默认的，要改成其他方式的话，就在第一个子View，比如最左边写上

app:layout_constraintHorizontal_chainStyle="spread_inside"

等。

设置比重：

设置比重和LineanerLayout类似，他只对spread和inside_spread有效，先将对应方向的全部子View长度值0dp，再用

app:layout_constraintHorizontal_weight="5"

设置好比例就行了。

大值操作原理就是这样，到具体的地方会有相应的变化，再具体处理。

3.当某个View的可见性被设置成GONE后，依赖于它的手柄会将约束的线连到该View同方向手柄所依赖的View上。

4.内部实现的简单理解，这个布局提供了很多的新功能，但他的内部实现并没有很复杂，添加的主要的类不多，大概有：ConstrainLayout,ConstrainWidget，ConstarinWidgetContainer,ConstrainAnchor,LinearSystem,ConstatinGuidline。其中ConstrainWidget采用了装饰器模式装饰View让子View拥有新的表现，在不改变系统原有使用（View）的情况下提供新的功能。