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：

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())