blinds.png
其实这个标题的类比并不太准确，百叶窗高度是固定的，只是 Z 轴有旋转。折叠效果并没有体现出来。不过毕竟自己一开始想到这个名字，那就硬着头皮也要叫这名字啦。
缘由
在微信的「聊天信息」中有了「聊天小程序」这一项。最近在 GitHub 首页，你的相关状态比如说 issues 讨论状态会在顶部有个这个效果，鼠标触碰的话，折叠效果会打开。
再说到自己项目，之前一个项目「壹二」 里面有一个榜单，也有类似效果。只是那会儿时间紧，忙着发版本，就用 LinearLayout 和 margin 临时实现。
实现
想下效果，其实应该不会太难，就是控制下 layout 而已。所以，那为什么不撸出来呢？万一以后还要用呢？
其实除了 layout 这个问题，还有一个问题需要考虑，就是 draw 的先后顺序。默认顺序肯定是从第一个到最后一个，那那个折叠效果就不是这样的。后面绘制的会叠在前面绘制的上面。所以最后结果就是最后绘制的在最上面。
相关问题明确之后，放开手撸就好啦。虽然说 onLayout() 才是最主要的，但是 onMeasure() 方法也是要做下处理。这里控件宽度是以所有子 view 的宽度加起来确定，当然这个是最小值，如果你设置 match_parent 那么我肯定也阻挡不了你。还有如果你给的精确值如果低于了测量出来的最小宽度，最后也会使用最小宽度。高度就取子 view 中最高的就好啦。这个控件使用场景原则上是所有的子view都是一个尺寸。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = getPaddingLeft() + getPaddingRight();
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int maxWidth = 0;
if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.UNSPECIFIED) {
maxWidth = 0;
}
if (widthMode == MeasureSpec.EXACTLY) {
maxWidth = MeasureSpec.getSize(widthMeasureSpec);
}
int heightSize = getPaddingBottom() + getPaddingBottom();
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
final LayoutParams lp = child.getLayoutParams();
int heightSpec = getChildMeasureSpec(heightMeasureSpec, 0, lp.height);
int widthSpec = getChildMeasureSpec(widthMeasureSpec, 0, lp.width);
child.measure(widthSpec, heightSpec);
int height = child.getMeasuredHeight();
heightSize = Math.max(heightSize, height);
widthSize += child.getMeasuredWidth();
}
widthSize += extraSpace * (childCount - 1);
heightSize += getPaddingBottom() + getPaddingTop();
setMeasuredDimension(Math.max(widthSize, maxWidth), heightSize);
}
对于 onLayout() ,看截图都知道，最后是支持居左向右展开和居右向左展开两种方式。用居左方式举个例子，居左的话，默认所有子view都是从最左边开始布局，最左边就是 ViewGroup 的 paddingLeft ，extra 就是 position*width*fraction 。比如说第二个，position 就是 1，这里的 fraction 是一个比例，外部可以设置。同理，展开的话，就是当前 view 之前所有 view 宽度相加。
等等，你是不是觉得少了点儿什么？嗯，其实布局效果出来之后你会发现少了一个 space ，子 view 之间没有空隙，这样当然不行啊，所以，增加一个 extraSpace 字段，由外部指定到底需要多少留白。但是这个 extraSpace 你不知道用户怎么传，所以要做一下限定，不然会直接破坏掉你之前的计算逻辑。
void layoutChildrenLeft(int left, int right) {
final int count = getChildCount();
final int parentRight = getPaddingLeft();
int parentLeft = getPaddingLeft();
final int parentTop = getPaddingTop();
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == VISIBLE) {
final int width = child.getMeasuredWidth();
final int height = child.getMeasuredHeight();
int dy = 0;
if (i > 0) {
if (fold) {
dy = (int) (i * fraction * width * animatedFraction);
} else {
for (int j = 0; j <= i - 1; j++) {
int measuredWidth = getChildAt(j).getMeasuredWidth();
dy += measuredWidth;
}
dy *= animatedFraction;
}
if (extraSpace < 0 && -i * extraSpace > dy) {
dy = 0;
} else {
dy += i * extraSpace;
}
}
child.layout(parentLeft + dy, parentTop, parentLeft + dy + width, parentTop + height);
}
}
}
到这里，默认和展开状态下的布局基本搞定，但是，这样肯定是不够的啊，要加特效啊，要有切换效果啊。所以还要写个 layoutChangeAnimator 还要设置一个 TimeInterpolator ,再加上一个 toggle() 方法来切换展开和默认状态。
基本上算是完美了，最后突然发现，应该有一个 maxCount 字段，当加入的大于这个阈值，那么就自动折叠，没有超过，那就默认展开。
最后，还有上文提到的那个draw顺序的问题，其实这个也很简单，ViewGroup 已经为我们提供了功能支持。
@Override
protected int getChildDrawingOrder(int childCount, int i) {
return childCount - 1 - i;
}
方法名说的很明白，这个方法就是用来返回相关顺序的，这里更改为反序绘制，不过这个方法默认是不生效的，如果你想使用它，那么你必须先指定它可用，这里有另外一个方法, setChildrenDrawingOrderEnabled(true);。
使用
implementation 'com.lovejjfg.blinds:blinds:lastedversion'
xml：
<com.lovejjfg.blinds.BlindsLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/blinds"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:blindsFold="true"
app:blindsFraction="60%"
app:blindsMaxCount="4">
code:
blinds4.orientation = RIGHT
blinds4.maxCount = 4
blinds4.extraSpace = 20
blinds4.fraction = 0.6F
blinds4.setAnimationDuration(1000)
blinds4.setInterpolator(BounceInterpolator())
到此，基本介绍完毕，源码 GitHub ： https://github.com/lovejjfg/Blinds
网友评论