自定义RecyclerView实现垂直滑动的ViewPager

android原生的ViewPager默认水平方向滑动翻页的。突然,项目里有个签到需求要做成上下滑动翻页。我的第一反应是应用ViewPager,可是它只适用于水平滑动的情景,可不可以继承ViewPager重写它的onTouchEvent方法,把检测水平滑动的手势改成垂直滑动手势呢?答案是肯定的,这种做法可以实现上下翻页的功能,但是快速滑动时会导致页面错乱,而且fragment需要依赖activity作为主体,耦合度比较高,控制逻辑比较复杂。后来,我下定决心换另外一种方式实现,把目光转移到RecyclerView。经过一番改造,自定义的RecycleViewPager控件也实现同样效果,与activity耦合度有所降低,页面几乎没有发生错乱情况,而且加上翻页时切入切出的动画。效果图如下:



RecyclerViewPager里面有几个比较重要方法:initAttrs()、onRestoreInstanceState()、dispatchTouchEvent()与onTouchEvent()。首先看下initAttrs方法,它是用来设置滑动因子、触发偏移等属性参数,在构造方法里面被调用。具体如下:

    private void initAttrs(Context context, AttributeSet attrs, int defStyle) {
        final TypedArray a = context.obtainStyledAttributes(attrs, com.frank.pager.R.styleable.RecyclerViewPager, defStyle, 0);
        mFlingFactor = a.getFloat(com.frank.pager.R.styleable.RecyclerViewPager_rvp_flingFactor, 0.15f);
        mTriggerOffset = a.getFloat(com.frank.pager.R.styleable.RecyclerViewPager_rvp_triggerOffset, 0.25f);
        mSinglePageFling = a.getBoolean(com.frank.pager.R.styleable.RecyclerViewPager_rvp_singlePageFling, mSinglePageFling);
        a.recycle();
    }

      其中,上述的自定义属性需要在attrs文件里声明:

    <declare-styleable name="RecyclerViewPager">
        <attr name="rvp_triggerOffset" format="float" />
        <attr name="rvp_flingFactor" format="float" />
        <attr name="rvp_singlePageFling" format="boolean" />
    </declare-styleable>

      重写RecyclerView父类的onRestoreInstanceState方法,恢复上次记录的状态。

    protected void onRestoreInstanceState(Parcelable state) {
        try {
            //通过反射获得布局状态的属性
            Field fLayoutState = state.getClass().getDeclaredField("mLayoutState");
            //设置可以访问
            fLayoutState.setAccessible(true);
            Object layoutState = fLayoutState.get(state);
            //同样地,通过反射获得停止偏移与停止位置的属性
            Field fAnchorOffset = layoutState.getClass().getDeclaredField("mAnchorOffset");
            Field fAnchorPosition = layoutState.getClass().getDeclaredField("mAnchorPosition");
            fAnchorPosition.setAccessible(true);
            fAnchorOffset.setAccessible(true);
            if (fAnchorOffset.getInt(layoutState) > 0) {//如果偏移值大于0,设置停止位置为上一页
                fAnchorPosition.set(layoutState, fAnchorPosition.getInt(layoutState) - 1);
            } else if (fAnchorOffset.getInt(layoutState) < 0) {//如果偏移值小于0,设置停止位置为下一页
                fAnchorPosition.set(layoutState, fAnchorPosition.getInt(layoutState) + 1);
            }
            fAnchorOffset.setInt(layoutState, 0);
        } catch (Throwable e) {
            e.printStackTrace();
        }
        super.onRestoreInstanceState(state);
    }

重写父类的onDispatchTouchEvent方法,根据是否允许水平移动,返回X轴孩子的中心点或者是Y轴孩子的中心点。

    public boolean dispatchTouchEvent(MotionEvent ev) {
        //如果处于按下状态,并且LayoutManager不为空
        if (ev.getAction() == MotionEvent.ACTION_DOWN && getLayoutManager() != null) {
            //如果允许水平移动,返回X坐标轴的孩子中心点,否则返回Y坐标轴的孩子中心点
            mPositionOnTouchDown = getLayoutManager().canScrollHorizontally()
                ? ViewUtils.getCenterXChildPosition(this)
                : ViewUtils.getCenterYChildPosition(this);
        }
        return super.dispatchTouchEvent(ev);
    }

另外,重写父类的onTouchEvent方法,记录移动过程的最大值与最小值。

    public boolean onTouchEvent(MotionEvent e) {
        //记录移动过程的最大值与最小值
        if (e.getAction() == MotionEvent.ACTION_MOVE) {
            if (mCurView != null) {
                mMaxLeftWhenDragging = Math.max(mCurView.getLeft(), mMaxLeftWhenDragging);
                mMaxTopWhenDragging = Math.max(mCurView.getTop(), mMaxTopWhenDragging);
                mMinLeftWhenDragging = Math.min(mCurView.getLeft(), mMinLeftWhenDragging);
                mMinTopWhenDragging = Math.min(mCurView.getTop(), mMinTopWhenDragging);
            }
        }
        return super.onTouchEvent(e);
    }

接下来看下对应的Adapter,主要重写父类RecyclerView.Adapter的几个方法实现注册内容监听器、注销内容监听器、绑定窗体、解除绑定、设置布局宽度与高度。里面还有一个内部类:实现真正的业务逻辑处理的适配器。主要是在onBindViewHolder来处理UI界面的展示,其中负责更新页面的方法如下:

    //更新未签提示
     private void updateWaitSignTip(SimpleViewHolder mHolder){
           currentPosition = mHolder.getAdapterPosition();
           totalSize = getItemCount();
           if(totalSize > 1){
                if(currentPosition == 0){//在第一页,只显示向上滑动
                    mHolder.rl_sign_up.setVisibility(View.VISIBLE);
                    mHolder.tv_sign_up.setVisibility(View.VISIBLE);
                    mHolder.rl_sign_down.setVisibility(View.GONE);
                    mHolder.tv_sign_up.setText("请向上滑动,您有" + (totalSize-1) + "个未签");
                }else if(currentPosition == (totalSize - 1)){//在最后一页,只显示向下滑动
                    mHolder.rl_sign_up.setVisibility(View.GONE);
                    mHolder.tv_sign_up.setVisibility(View.GONE);
                    mHolder.rl_sign_down.setVisibility(View.VISIBLE);
                    mHolder.tv_sign_down.setText("请向下滑动,您有" + (totalSize-1) + "个未签");
                }else {//向上向下同时显示
                    mHolder.rl_sign_up.setVisibility(View.VISIBLE);
                    mHolder.tv_sign_up.setVisibility(View.VISIBLE);
                    mHolder.rl_sign_down.setVisibility(View.VISIBLE);
                    mHolder.tv_sign_up.setText("请向上滑动,您有" + (totalSize-currentPosition-1) + "个未签");
                    mHolder.tv_sign_down.setText("请向下滑动,您有" + (currentPosition) + "个未签");
                }
           }
      }

在activity里,初始化自定义控件:

     LinearLayoutManager layout = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
     mRecyclerView.setTriggerOffset(0.15f);//设置触发偏移量
     mRecyclerView.setFlingFactor(0.25f);//设置滑动因子
     mRecyclerView.setHasFixedSize(true);//设置自适应屏幕尺寸
     mRecyclerView.setLayoutManager(layout);
     mRecyclerView.setAdapter(new RecyclerViewPagerAdapter.LayoutAdapter(this, 5));


最后,为了实现上下翻页切入切出的动画效果,需要设置RecyclerView的滚动监听器,重写onScrolled方法。

     public void onScrolled(RecyclerView recyclerView, int i, int i2) {
          //获得RecyclerView的item数量
          int childCount = mRecyclerView.getChildCount();
          //获得第一个item的宽度
          int width = mRecyclerView.getChildAt(0).getWidth();
          //计算padding大小
          int padding = (mRecyclerView.getWidth() - width) / 2;
          //遍历所有item
          for (int j = 0; j < childCount; j++) {
             View v = recyclerView.getChildAt(j);
             float rate = 0;
             if (v.getTop() <= padding) {//如果top比padding小,说明该页面处于移出状态
                if (v.getTop() >= padding - v.getHeight()) {
                   //根据padding、top与height计算缩放比例
                   rate = (padding - v.getTop()) * 1f / v.getHeight();
                } else {
                   rate = 1;
                }
                //设置XY轴的逐渐缩小
                v.setScaleX(1 - rate * 0.1f);
                v.setScaleY(1 - rate * 0.1f);
             } else {//如果top比padding大,说明该页面处于移ru状态
                if (v.getTop() <= recyclerView.getHeight() - padding) {
                   //根据padding、top与height计算缩放比例
                   rate = (recyclerView.getHeight() - padding - v.getTop()) * 1f / v.getHeight();
                }
                //设置XY轴的逐渐放大
                v.setScaleX(0.9f + rate * 0.1f);
                v.setScaleY(0.9f + rate * 0.1f);
             }
          }
       }

好了,直到这里,已经介绍完利用自定义RecyclerView实现上下翻页以及切入切出的动画效果。如有问题,希望大家指出,共同学习同步进步。点击下载demo: http://download.csdn.net/detail/u011686167/9660954

 


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐福记456

您的鼓励和肯定是我创作动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值