仿新版微信首页效果

微信首页下拉效果很炫酷,作为一个安卓开发人员忍不住就要尝试一下了~

效果图

实现的大致思路:使用recyclerview实现,将标题栏以上包括标题栏在内作为一个header添加到recyclerview上,下拉过程中动态改变header的高度即可。也就是说把拉出小程序页面实际上就是把header扩充到全屏高度,展示的是内容就是在header当中布局的内容。这里我们将标题栏纳入header中的一部分是比较关键的。

效果实现 :

1.首先自定义view继承Recyclerview

public class WechatRecyclerView extends RecyclerView

2.然后添加一个header。我这里采用了BRAVH快速添加一个header,并将headerview传入我们自定义的RecyclerView

   View view = LayoutInflater.from(this).inflate(R.layout.headview, null);
   mAdapter.addHeaderView(view);
   mRv.setHeadView(view);
   public void setHeadView(View view) {
        this.headView = view;
        setHeaderHeight(HEIGHT_INITIAL);
        //  省略部分代码
   }

这里将header的初始高度设置为标题栏高度,即要让初始状态下 header只显示标题。

header的布局比较讲究。当header处于最大高度时,我们让标题栏处于屏幕的最底部,为了实现这个效果将标题栏布局写到headerview的底部。这里看一下headerview的布局,包含一个内部的recyclerview,layout_title是标题布局,将其布局到底部。



    
    
        
        
        
    
    
           
           
           
           
           
           
           

       
       
           
       


3.实现下拉头部高度变化肯定考虑重写一下RecyclerView的ontouchevent,ACTION_MOVE事件:

           case MotionEvent.ACTION_MOVE:
                if (status == STATUS_DOWN) { //header落下状态
                    if (getChildAt(0).getTop() < 0) {  //判断在布局落下状态后是否又进行了滑动
                        isDrag = true;
                    }
                    setBalllayoutHeight(TOTALDISTANCE + (float) (getChildAt(0).getTop()));
                    return super.onTouchEvent(e);
                }
                //header非落下状态
                if (!canScroll()) {
                    if (lastY == 0) {
                        lastY = dy;
                        return true;
                    } else {
                        if (dy - lastY > 0) { //下拉
                            if (headView.getHeight() < Util.getScreenHeight(getContext())) {
                                setHeaderHeightBy((int) ((dy - lastY) / DUMP)); //下拉过程添加一个阻尼效果
                                lastY = dy;
                            }
                            return true;
                        } else {   //上拉
                            if (headView.getHeight() >= HEIGHT_INITIAL) {
                                setHeaderHeightBy((int) (dy - lastY));
                                lastY = dy;
                                return true;
                            }
                        }
                    }
                }
                break;

这里考虑两种情况:一个是header初始状态即非落下的状态。这时列表滚动到头部后进行下拉操作,header高度发生变化,这里先判断列表是否滚动至顶部:

private boolean canScroll() {
        return canScrollVertically(-1);
    }

然后判断如果下拉调用setHeaderHeightBy方法,调整header的高度,限制最大不能超过一屏高度。

 public void setHeaderHeightBy(int dy) {
        ViewGroup.LayoutParams layoutParams = headView.getLayoutParams();
        layoutParams.height = layoutParams.height + dy > Util.getScreenHeight(getContext()) Util.getScreenHeight(getContext()) : layoutParams.height + dy;
        headView.setLayoutParams(layoutParams);
}

header展开过程中发生上拉仍然调用setHeaderHeightBy方法,此时传入的值为负。
无论上拉还是下拉都要return true,即滑动事件完全由自己来处理,不交由系统处理。

第二种情况是 header到最大高度,即标题栏落至底部状态。这时进行上拉操作时,我们把事件交给系统处理,return super.onTouchEvent(e); 为什么这么做呢。观察一下效果图 ,注意这里的上拉操作其实是一个平推操作,即header上移过程没有高度的变化。所以使用系统的滑动机制是最合适的方式。

ACTION_MOVE事件之后是ACTION_UP:

    case MotionEvent.ACTION_UP:
             lastY = 0;
             if (status == STATUS_NORMARL) {
                 if (headView.getHeight() < HEIGHT_SHOWBALL_END + HEIGHT_INITIAL) {
                     excuteAnnimation(headView.getHeight(), HEIGHT_INITIAL, false);
                 } else {
                     excuteAnnimation(headView.getHeight(), MAXHEIGHT, true);
                 }
             } else if (status == STATUS_DOWN) {
                 if (findViewHolderForAdapterPosition(1) != null) { //position为1的位置可见时,即title不在最下部,弹回顶部
                     //  findViewHolderForAdapterPosition(1).itemView.getLocationOnScreen(location);
                     int distance = TOTALDISTANCE + getChildAt(0).getTop();
                     excuteBackAnimation(distance);
                 } else {  //如果title在最下部,并且之前没有进行滑动动作,回弹顶部,否则认为是人为又滑动到底部,此时不回弹
                     if (!isDrag) {
                         excuteAnnimation(headView.getHeight(), HEIGHT_INITIAL, true);
                     }
                 }
                 isDrag = false;
                 return true;
             }
             break;

ACTION_UP事件主要是执行下拉和回弹的动画效果。这里也是分两种情况。一个是header在初始状态下拉,判断是否到达临界点,执行回弹或者落下动画

   private void excuteAnnimation(int height, int desheight, final boolean changeStatus) {
        ValueAnimator animator;
        animator = ValueAnimator.ofInt(height, desheight);
        animator.setDuration(300);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                setHeaderHeight((Integer) animation.getAnimatedValue());
            }
        });
}

excuteAnnimation方法内也是调用setHeaderHeight不断设置新的header高度,重绘界面体现出滑动的效果。

第二种情况是header在落下状态回弹至顶部。这种情况对应ACTION_MOVE的第二种情况。这里也要平推上去,不同的是我们要自己来完成了。

  private void excuteBackAnimation(final int distance) {
        ValueAnimator animator = ValueAnimator.ofInt(distance, 0);
        animator.setDuration(300);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                if (lastValue == 0) {
                    lastValue = distance;
                }
                scrollBy(0, lastValue - value);        
                lastValue = value;
                //省略部分代码
            }
        });
}

  1. 处理滑动事件冲突
    当header处于落下状态时,我们需要滑动内部的recyclerview。此时滑动事件被外部recyclerview拦截。这里做一下判断,复写onInterceptTouchEvent,在header落下时不拦截事件。
@Override
  public boolean onInterceptTouchEvent(MotionEvent e) {
      if (status == STATUS_DOWN) {
          return false;
      }
      return super.onInterceptTouchEvent(e);
  }

这里也许会有疑问,我们底部的titlebar是需要拦截滑动事件进行拖拽和回弹,怎么解决呢。其实这里无需做处理,只要titlebar的布局控件默认不会消耗事件即ontouchevent默认返回false,事件自然会流向我们的父布局了,依然会回调父布局的ontouchevent。而不需要拦截事件的区域设置clickable属性为true,事件就不会流向父布局了。

5 更多动画效果实现
滑动过程中涉及的动画比较多,我也是经过反复调试才达到一个比较理想的状态。这里不再一一阐述了。 更多细节可以看下源码。

最后

这个demo只是大致还原了新版微信首页的效果,但欠缺很多细节的处理,不够完美,主要是给大家提供一个思路吧。

再最后

S9 ig加油!!!

代码地址

你可能感兴趣的:(仿新版微信首页效果)