1.Group 1.1版本加入
Group属性用来控制ConstraintLayout布局内，被Group关联的view的可见性。笔者试了一下，是真的只能控制可见性，别的啥也干不了。
<android.support.constraint.Group
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处于同一个层级，因此能很好的减少一层布局。
<android.support.constraint.helper.Layer
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<Integer, String> 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<ConstraintWidget> 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);
}
}
}
