Android 百叶窗折叠效果

blinds.png

其实这个标题的类比并不太准确,百叶窗高度是固定的,只是 Z 轴有旋转。折叠效果并没有体现出来。不过毕竟自己一开始想到这个名字,那就硬着头皮也要叫这名字啦。

缘由

在微信的「聊天信息」中有了「聊天小程序」这一项。最近在 GitHub 首页,你的相关状态比如说 issues 讨论状态会在顶部有个这个效果,鼠标触碰的话,折叠效果会打开。

再说到自己项目,之前一个项目「壹二」 里面有一个榜单,也有类似效果。只是那会儿时间紧,忙着发版本,就用 LinearLayoutmargin 临时实现。

实现

想下效果,其实应该不会太难,就是控制下 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都是从最左边开始布局,最左边就是 ViewGrouppaddingLeft ,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:

    

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

你可能感兴趣的:(Android 百叶窗折叠效果)