1.Group 1.1版本加入

Group属性用来控制ConstraintLayout布局内，被Group关联的view的可见性。笔者试了一下，是真的只能控制可见性，别的啥也干不了。

android:id="@+id/group"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:visibility="visible"

app:constraint_referenced_ids="button1,button2" />

2.Layer 2.0加入

Layer可以看做是控制它所关联的View从而能形成一个伪边界。为何是伪边界？如下图，Layer可以在关联View后，给Layer设置一个背景。看起来就像寻常的ViewGroup包裹这些View，给ViewGroup设置背景。但是Layer并不是一个ViewGroup，且与它所关联的View处于同一个层级，因此能很好的减少一层布局。

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintRight_toRightOf="parent"

android:id="@+id/layer"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/frame"

android:padding="32dp"

app:constraint_referenced_ids="button4,button5,button3" />

avatar

所以，在不需要对背景做整体View动画如旋转、透明度、位移的情况下，Layer和Group结合可以很好的解决背景和整体可见性的问题，这种场景下，能很大程度的减少View布局嵌套。

3.ConstraintHelper

Group和Layer都是一种Helper，继承于ConstraintHelper，顾名思义，可以看做是View的帮助类，但是ConstraintHelper本身又是继承于View，所以虽然作为Helper，但是可以直接在XML里使用，并使用相关属性和属性API。

观察ConstraintHelper源码：

public abstract class ConstraintHelper extends View {

//helper所关联View id集合

protected int[] mIds = new int[32];

//helper所关联View数量

protected int mCount;

protected Context myContext;

protected Helper mHelperWidget;

protected boolean mUseViewMeasure = false;

protected String mReferenceIds;

//helper所关联View集合

private View[] mViews = null;

private HashMap mMap = new HashMap();

}

那么Helper是如果关联上View进而管理它们的呢？

(1)构造器里调用初始化init()函数

ConstraintLayout_Layout_constraint_referenced_ids通过该属性可以获得Helper所关联的View id串。进而调用setIds，addID等函数，解析出每一个真正的View所对应的id。并id信息存储于mIds等集合中。

protected void init(AttributeSet attrs) {

if (attrs != null) {

TypedArray a = this.getContext().obtainStyledAttributes(attrs, styleable.ConstraintLayout_Layout);

int N = a.getIndexCount();

for(int i = 0; i < N; ++i) {

int attr = a.getIndex(i);

if (attr == styleable.ConstraintLayout_Layout_constraint_referenced_ids) {

this.mReferenceIds = a.getString(attr);

this.setIds(this.mReferenceIds);

}

}

}

}

(2)Helper绘制过程

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

if (this.mUseViewMeasure) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

} else {

this.setMeasuredDimension(0, 0);

}

}

public void onDraw(Canvas canvas) {

}

onMeasure里其实啥也没干，mUseViewMeasure默认为false，因此如果自定义Helper不设置这个值的话，Helper在xml里的宽高并没有影响，也没有任何作用，最终设置进去的都是0。

onDraw里直接是空，Helper虽然是View，但是并没有绘制上的性能损耗。

那么如何使用Helper来帮助我们管理View呢？答案就是在Helper提供的几个updateXX，updateXX与Helper的绘制生命周期所关联，因此自定义的Helper想要达到效果，必须触发绘制过程或者绘制过程的对应阶段。

public void updatePreLayout(ConstraintLayout container) {

}

public void updatePreLayout(ConstraintWidgetContainer container, , Helper helper, SparseArray map

}

public void updatePostLayout(ConstraintLayout container) {

}

public void updatePostMeasure(ConstraintLayout container) {

}

public void updatePostConstraints(ConstraintLayout constainer) {

}

(3)自定义Helper

Group和Layer都是属于一种自定义Helper，均继承与ConstraintHelper。所以再来看它们分别都干了些啥，导致有那些功能的。

Group

public void updatePreLayout(ConstraintLayout container) {

//获得当前Helper的可见属性

int visibility = this.getVisibility();

float elevation = 0.0F;

if (VERSION.SDK_INT >= 21) {

elevation = this.getElevation();

}

if (this.mReferenceIds != null) {

this.setIds(this.mReferenceIds);

}

//遍历关联的View，将helper的可见属性一一赋给它们

for(int i = 0; i < this.mCount; ++i) {

int id = this.mIds[i];

View view = container.getViewById(id);

if (view != null) {

view.setVisibility(visibility);

if (elevation > 0.0F && VERSION.SDK_INT >= 21) {

view.setElevation(elevation);

}

}

}

}

Layer

Layer是如何包裹住关联的View？

public void updatePostLayout(ConstraintLayout container) {

this.reCacheViews();

this.mComputedCenterX = 0.0F / 0.0;

this.mComputedCenterY = 0.0F / 0.0;

LayoutParams params = (LayoutParams)this.getLayoutParams();

ConstraintWidget widget = params.getConstraintWidget();

widget.setWidth(0);

widget.setHeight(0);

//计算Layer中心点的位置

this.calcCenters();

int left = (int)this.mComputedMinX - this.getPaddingLeft();

int top = (int)this.mComputedMinY - this.getPaddingTop();

int right = (int)this.mComputedMaxX + this.getPaddingRight();

int bottom = (int)this.mComputedMaxY + this.getPaddingBottom();

//跟据计算的中间点的位置Layout自身，自此Layer的大小和位置就确定，再设置Background就是顺其自然的事了

this.layout(left, top, right, bottom);

if (!Float.isNaN(this.mGroupRotateAngle)) {

this.transform();

}

}

protected void calcCenters() {

if (this.mContainer != null) {

//Float.isNaN() isNaN->is Not Number 测量一个值是不是科学数字

// 默认mComputedCenterX = 0.0F / 0.0是非法数字

if (this.mNeedBounds || Float.isNaN(this.mComputedCenterX) || Float.isNaN(this.mComputedCenterY)) {

if (!Float.isNaN(this.mRotationCenterX) && !Float.isNaN(this.mRotationCenterY)) {

this.mComputedCenterY = this.mRotationCenterY;

this.mComputedCenterX = this.mRotationCenterX;

} else {

View[] views = this.getViews(this.mContainer);

int minx = views[0].getLeft();

int miny = views[0].getTop();

int maxx = views[0].getRight();

int maxy = views[0].getBottom();

//遍历子View，min值能算出Layer的left和top

//max值能算出layer的right和bottom，不由得感叹真是奇思妙想

for(int i = 0; i < this.mCount; ++i) {

View view = views[i];

minx = Math.min(minx, view.getLeft());

miny = Math.min(miny, view.getTop());

maxx = Math.max(maxx, view.getRight());

maxy = Math.max(maxy, view.getBottom());

}

this.mComputedMaxX = (float)maxx;

this.mComputedMaxY = (float)maxy;

this.mComputedMinX = (float)minx;

this.mComputedMinY = (float)miny;

if (Float.isNaN(this.mRotationCenterX)) {

this.mComputedCenterX = (float)((minx + maxx) / 2);

} else {

this.mComputedCenterX = this.mRotationCenterX;

}

if (Float.isNaN(this.mRotationCenterY)) {

this.mComputedCenterY = (float)((miny + maxy) / 2);

} else {

this.mComputedCenterY = this.mRotationCenterY;

}

}

}

}

}

Layer还支持对关联View的位移、旋转、缩放等操作，但是使用的时候得小心，这些操作的中心点都是基于Layer的中心点

public void setRotation(float angle) {

this.mGroupRotateAngle = angle;

this.transform();

}

public void setScaleX(float scaleX) {

this.mScaleX = scaleX;

this.transform();

}

public void setScaleY(float scaleY) {

this.mScaleY = scaleY;

this.transform();

}

public void setPivotX(float pivotX) {

this.mRotationCenterX = pivotX;

this.transform();

}

public void setPivotY(float pivotY) {

this.mRotationCenterY = pivotY;

this.transform();

}

public void setTranslationX(float dx) {

this.mShiftX = dx;

this.transform();

}

public void setTranslationY(float dy) {

this.mShiftY = dy;

this.transform();

}

private void transform() {

if (this.mContainer != null) {

if (this.mViews == null) {

this.reCacheViews();

}

this.calcCenters();

double rad = Math.toRadians((double)this.mGroupRotateAngle);

//每次操作都会关联位移、缩放、旋转操作叠加效果，因此可以使用Layer对子View整体做一些动画

float sin = (float)Math.sin(rad);

float cos = (float)Math.cos(rad);

float m11 = this.mScaleX * cos;

float m12 = -this.mScaleY * sin;

float m21 = this.mScaleX * sin;

float m22 = this.mScaleY * cos;

for(int i = 0; i < this.mCount; ++i) {

View view = this.mViews[i];

int x = (view.getLeft() + view.getRight()) / 2;

int y = (view.getTop() + view.getBottom()) / 2;

// 默认情况下，mComputedCenterX和mComputedCenterY是Layer的中心点

float dx = (float)x - this.mComputedCenterX;

float dy = (float)y - this.mComputedCenterY;

//小心这里计算出的位移距离是对各种效果的叠加

float shiftx = m11 * dx + m12 * dy - dx + this.mShiftX;

float shifty = m21 * dx + m22 * dy - dy + this.mShiftY;

view.setTranslationX(shiftx);

view.setTranslationY(shifty);

view.setScaleY(this.mScaleY);

view.setScaleX(this.mScaleX);

view.setRotation(this.mGroupRotateAngle);

}

}

}