(四) 仿支付宝首页顶部伸缩滑动/中间层下拉刷新

效果图如下:


demo4.gif

主布局文件




    
     
        

              
            


            
            

            
                  
                
               
                

            


        

    

    


子布局 layout_middle_content




    

        

            

            

            

            

        
        

            

            

            

            

        

        

            
        
    
            

        
    

实现顶部伸缩渐变利用 appBar.addOnOffsetChangedListener,在其监听方法中通过改变背景的透明度来控制。

   @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        //垂直方向偏移量
        int offset = Math.abs(verticalOffset);
        //最大偏移距离
        int scrollRange = appBarLayout.getTotalScrollRange();
        /*本来应该取scrollRange/2  由于appbar包含三部分 Toolbar ToolbarContent 与middleContent
            此处用height代替  height为Toolbar和ToolbarContent的综合  由于ToolbarContent的layout_collapseMode为
            parallax,且layout_collapseParallaxMultiplier为0.7 所有此处做了0.7的处理
        **/
        int height = layoutToolbarNormal.getHeight() + layoutToolbarContent.getHeight() * 7 / 10;
        if (offset <= height / 2) {//当滑动没超过一半,展开状态下toolbar显示内容,根据收缩位置,改变透明值
            layoutToolbarNormal.setVisibility(View.VISIBLE);
            layoutToolbarCollapse.setVisibility(View.GONE);
            //根据偏移百分比 计算透明值
            float scale2 = (float) offset / (height / 2);
            int alpha2 = (int) (255 * scale2);
            bgToolbarNormal.setBackgroundColor(Color.argb(alpha2, 26, 128, 210));
        } else if (offset <= height) {//当滑动超过一半,收缩状态下toolbar显示内容,根据收缩位置,改变透明值

            layoutToolbarCollapse.setVisibility(View.VISIBLE);
            layoutToolbarNormal.setVisibility(View.GONE);
            float scale3 = (float) (height - offset) / (height / 2);
            int alpha3 = (int) (255 * scale3);
            bgToolbarCollapse.setBackgroundColor(Color.argb(alpha3, 26, 128, 210));
        } else {
            bgToolbarCollapse.setBackgroundColor(Color.argb(0, 26, 128, 210));
        }

        //根据偏移百分比计算扫一扫布局的透明度值
        float scale = (float) offset / (scrollRange/2);
        int alpha = (int) (255 * scale);
        bgToolbarContent.setBackgroundColor(Color.argb(alpha, 26, 128, 210));

    }

通过自定义appBarLayout的behavior来实现下拉刷新

  //获取刷新布局高度
    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {
        boolean handled = super.onLayoutChild(parent, abl, layoutDirection);

        // 需要在调用过super.onLayoutChild()方法之后获取
        if (mTargetView == null) {
            mTargetView = parent.findViewWithTag(TAG);
            mTargetView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    mTargetView.getViewTreeObserver().removeOnPreDrawListener(this);
                    //初始化刷新高度以及控件高度
                    TARGET_REFESH_HEIGHT = getCalHeight(mTargetView);
                    mTargetViewHeight = TARGET_REFESH_HEIGHT;
                    return false;
                }
            });
            if (mTargetView != null) {
                initial(abl);
            }
        }

        return handled;
    }

//判断滑动是否执行布局下拉展开
   @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int type) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
        if (!isRecovering) {
            //返回1时,表示当前target处于非touch的滑动,
            //该bug的引起是因为appbar在滑动时,CoordinatorLayout内的实现NestedScrollingChild2接口的滑动子类还未结束其自身的fling
            // 所以这里监听子类的非touch时的滑动,然后block掉滑动事件传递给AppBarLayout
            if (mTargetView != null && ((dy < 0 && child.getBottom() >= mParentHeight )
                    || (dy > 0 && child.getBottom() > mParentHeight)) && !isPining && type!=1) {
                scale(child, dy, target);//执行下拉展开动画
                return;
            }
        }
    }

//判断是否开始刷新动画
    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target, int type) {

        if (checkPin()) {//检测是否达到刷新临界值
            startPin();//开始刷新动画
        } else {
            recovery(abl);
        }
        super.onStopNestedScroll(coordinatorLayout, abl, target, type);
    }

(一)高斯模糊实现毛玻璃效果丶共享元素动画 丶地址选择器
(二)仿京东顶部伸缩渐变丶自定义viewpager指示器丶viewpager3D回廊丶recyclerview瀑布流
(三)RxJava2常用操作符merge、flatmap、zip--结合MVP架构讲解
(五)TabLayout+ViewPager悬浮吸顶及刷新数量动画显示
(六)仿QQ首页drawer/侧滑删除/浮动imgaeView/角标拖拽
(七)仿微信发布朋友圈拖拽删除

将持续更新.. 不喜勿喷,仅个人分享,希望能帮助到你

源码地址:Github传送门

你可能感兴趣的:((四) 仿支付宝首页顶部伸缩滑动/中间层下拉刷新)