美文网首页
二级(二楼、顶楼)刷新,SlidingDownPanelLayo

二级(二楼、顶楼)刷新,SlidingDownPanelLayo

作者: 北纬348度 | 来源:发表于2017-09-30 21:09 被阅读0次

二级(二楼、顶楼)刷新,SlidingDownPanelLayout

废话不多说,先上效果

二级刷新


二级刷新
二级刷新二级刷新

说明

以上效果均由PullRefreshLayout(稍微详细的说明见:https://github.com/genius158/PullRefreshLayout)实现。
使用PullRefreshLayout,自定义header和footer你可以实现很多你想的到的功能,以下是两个小例子

回弹刷新库(PullRefreshLayout)说明:个人最用心,用时写的一个库(出发点:其他的库回弹效果都并不理想,便想起了做这一个库),个人水平有限,开发的过程总是曲折的,大概3个多月后才正式在公司的项目中使用本库,其中也相应的修改了很多小问题,到现在应该相对很稳定了吧(>_<|||)(至少目前个人的项目用着是没有问题了的)

1.二级刷新的实现(TwoRefreshHeader)

首先创建一个header实现PullRefreshLayout.OnPullListener


1.初始化部分

setLayoutParams(new ViewGroup.LayoutParams(-1, -1));//-1 就是match_parent
firstRefreshTriggerDistance = TwoRefreshHeader.this.pullRefreshLayout.getRefreshTriggerDistance();
twoRefreshDistance = firstRefreshTriggerDistance * 2;

translateYAnimation = ValueAnimator.ofFloat(0, 0);
translateYAnimation.setDuration(TWO_REFRESH_DURING);
translateYAnimation.setInterpolator(new ViscousInterpolator());// ViscousInterpolator是prl默认的插值器
translateYAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float m = (float) animation.getAnimatedValue();
        pullRefreshLayout.moveChildren((int) m);// 移动prl
    }
});

换行之前:先设置header的高度宽度为match_parent,再记住PullRefreshLayout(以下简称prl)设置的初始一级刷新的距离(因为二级刷新需要重新设置刷新触发距离)。


  换行之后:translateYAnimation是一个回复动画,当header显示完全后,由于prl处于刷新状态下并不会执行refresh动画,所以需要translateYAnimation来实现refresh动画的效果




2.一级刷新触发的时候

public void onPullHolding() { 
    if (pullRefreshLayout.getMoveDistance() >= twoRefreshDistance) {
        pullRefreshLayout.setPullDownMaxDistance(getHeight() * 2);
        pullRefreshLayout.setRefreshTriggerDistance(getHeight());
        pullRefreshLayout.setRefreshAnimationDuring(TWO_REFRESH_DURING);
        pullRefreshLayout.setDispatchPullTouchAble(false);
        pullRefreshLayout.setTwinkEnable(false);
        ...
    }
}

说明: onPullHolding()的执行在refresh动画开始之前,而onRefresh()在refresh动画开始时执行


  if语句判读的是是否处可以触发二级刷新,


  setPullDownMaxDistance(getHeight() * 2)这里重设向下拖拽的最大距离,这样prl在header完全显示的情况下仍可以向下拖拽


  setRefreshTriggerDistance(getHeight())这里就是二级刷新的核心,更改了刷新触发的拖拽距离,这样refresh动画就会呈现完全展开的样式


  setRefreshAnimationDuring(TWO_REFRESH_DURING)设置refresh动画的时间


  setDispatchPullTouchAble(false)为了保证refresh动画不被打断,使得header完全显示出来


  setTwinkEnable(false)处于二级刷新状态下取消回弹,使得回复动画不会混乱




3.prl移动执行的逻辑,onPullChange(percent)

if (pullRefreshLayout.getMoveDistance() >= getHeight()) {// getHeight() 为二级刷新重新设置的距离
    pullRefreshLayout.setDispatchPullTouchAble(true);
    isTwoRefresh = true;
}

if (!isTwoRefresh) {// 处于二级刷新的状态下才执行以下的二级刷新的相关逻辑
    return;
}
if (percent <= 0 && !pullRefreshLayout.isHoldingFinishTrigger()) {
    pullRefreshLayout.refreshComplete();
}
if (pullRefreshLayout.getMoveDistance() > getHeight() - firstRefreshTriggerDistance) {
    if (!pullRefreshLayout.isDragDown() && !pullRefreshLayout.isDragUp()) {
        translateYAnimation.setFloatValues(pullRefreshLayout.getMoveDistance(), getHeight());
        translateYAnimation.start();
    } else if (translateYAnimation.isRunning()) {
        translateYAnimation.cancel();
    }
} else if (!pullRefreshLayout.isDragDown() && !pullRefreshLayout.isDragUp()) {
    pullRefreshLayout.refreshComplete();
}

这里稍微有点复杂,当header显示完全执行setDispatchPullTouchAble(true),恢复prl默认的手势,并设置二级刷新标识isTwoRefresh为true表示处于二级刷新状态下




二级刷新的状态下(if (!isTwoRefresh) { , 之后):


  if (percent <= 0 && !pullRefreshLayout.isHoldingFinishTrigger()) { ,这里是拖拽出footer,又处在二级刷新的状态下时候,pullRefreshLayout.refreshComplete()结束二级刷新状态(不结束的话,prl默认的回复动画就不会触发)


  if (pullRefreshLayout.getMoveDistance() > getHeight() - firstRefreshTriggerDistance) { ,二级刷新是否需要结束的判断,


  if (!pullRefreshLayout.isDragDown() && !pullRefreshLayout.isDragUp()) { ,这里判断是否处在onTouch(手指触摸屏幕)状态,如果没有且二级刷新不需要结束,则执行translateYAnimation的回复动画,使得header回到完全显示的状态;如果处在onTouch状态,如果translateYAnimation正在执行,则cancel掉translateYAnimation


  最后一个else if 判断处在二级刷新需要结束且又不在onTouch的状态下,结束二级刷新

2.SlidingDownHeader

说明:SlidingDownHeader只支持横向滑动(由于prl在竖直方向做了太多的事情,处理header的纵向滑动考虑的东西会比较多,延展prl的实际意义也就不大,不过不带回弹的话还是好实现)


实现逻辑与二级刷新基本一致,主要说明一下横向冲突处理

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    if (!isSlidingDown) { // 是否处在header展开状态
        return super.dispatchTouchEvent(ev);
    }
    switch (ev.getActionMasked()) {
        case MotionEvent.ACTION_MOVE:
            if (pullRefreshLayout.isLayoutDragMoved()) {//prl是否移动,也就是touch事件为纵向
                ev.setAction(MotionEvent.ACTION_CANCEL);// 取消header的事件分发
                return super.dispatchTouchEvent(ev);
            } else if (pullRefreshLayout.isDragHorizontal()) {//prl是否处在横向拖动状态
                pullRefreshLayout.setDispatchPullTouchAble(false);//不执行prl默认的事件分发
            }
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            pullRefreshLayout.setDispatchPullTouchAble(true);//恢复prl的默认事件分发
            
            // 由于在ACTION_MOVE的时候取消了prl的默认事件分发,横向拖拽的标志不会复原
            // 需要重新分发prl的ACTION_CANCEL事件,重置移动标志为
            if (pullRefreshLayout.isDragHorizontal()) {
                MotionEvent event = MotionEvent.obtain(ev);
                event.setAction(MotionEvent.ACTION_CANCEL);
                pullRefreshLayout.dispatchTouchEvent(event);
            }
            
            //由于prl重新分发ACTION_CANCEL事件,事件又会传回header,
            //为了保证横向滑动的继续执行,将ACTION_CANCEL转变为ACTION_UP事件
            ev.setAction(MotionEvent.ACTION_UP);
    }
    return super.dispatchTouchEvent(ev);
}



调用prl.setHeaderShowGravity(ShowGravity.CENTER)可以更改header的拽出方式(默认8种),也就是效果图2、3、4 ,其余的就不展示了

相关文章

  • 二级(二楼、顶楼)刷新,SlidingDownPanelLayo

    # 二级(二楼、顶楼)刷新,SlidingDownPanelLayout### 废话不多说,先上效果![二级刷新]...

  • 二级(二楼、顶楼)刷新,SlidingDownPanelLayo

    二级(二楼、顶楼)刷新,SlidingDownPanelLayout 废话不多说,先上效果 说明 以上效果均由Pu...

  • 常用依赖

    SmartRefreshLayout 依赖 优点:支持多点触摸支持淘宝二楼和二级刷新支持嵌套多层的视图结构布局(L...

  • 樱花校园模拟器建筑01(学校门口前的宿舍🌇)

    我建的宿舍完工了!大家快来看看吧! 厕所和厨房在一楼,客厅和卧室在二楼,还没有打算建顶楼,如果要建顶楼的话我会选择...

  • 乒乓球

    年前给老板家打扫卫生,他们家在顶楼,附带了二楼,老板在二楼买了一个乒乓球案,他儿子在上网课,一到休息时间就让我陪他...

  • Vue项目部署二级目录, 解决前端history路由模式刷新40

    二级目录部署,配置伪静态 解决前端history路由模式刷新404问题 第一行 二级目录名称 第二行 alias...

  • vue 打包后出现 刷新出现404 nginx配置 路由配置

    最近遇到打包发布到node之后,只有登录页面和首页刷新后不会出现404,二级页面刷新就变成空白看了很多帖子发现解决...

  • 《顶楼》

    住着最好的房子,做着最肮脏的事情。韩国编剧就是敢写,《顶楼》全局中充斥着权利,欲望,金钱,复仇,金钱交易等...

  • 顶楼

    这个世界很丰富,丰富到你无法想象。 人生,也是。 (一)初见 顶楼这部剧,在播出时就频频上热搜,词大概就是最强绿茶...

  • 《顶楼》

    最近大火的《顶楼》,集“狗血”与“刺激”一体,让人欲罢不能,下面做出简单评价↓ 《顶楼》三条线索交织,一...

网友评论

      本文标题:二级(二楼、顶楼)刷新,SlidingDownPanelLayo

      本文链接:https://www.haomeiwen.com/subject/ucvnextx.html