QQ侧滑面板特效的实现

ViewDragHelper的介绍

  要实现和QQ5.0侧滑的特效，需要借助谷歌在2013年I/O大会上发布的ViewDragHelper类，提供这个类目的就是为了解决拖拽滑动问题。
  使用v4包中的ViewDragHelper为了兼容低版本，所以在创建ViewDragHelper对象时如果找不到ViewDragHelper这个类，可以从sdk中拷贝出最新的v4包覆盖lib目录中的V4包即可。

• 效果图：

/**
 * Created by Alan on 2016/8/18.
 * QQ5.0侧滑菜单特效实现
 */

 //自定义一个类继承FrameLayout
public class DragLayout extends FrameLayout {

/**
 * ViewDragHelper:
 * v4包中的api，2013年谷歌I/O大会上提出，用于解决控件拖动问题。
 */
   private ViewDragHelper mDragHelper;
   private View mMenuView;//菜单
   private View mMainView;//主界面
   private int mWidth;//控件宽度
   private int mHeight;///控件高度
   private int mMRange;//侧拉菜单打开的最大宽度

   public DragLayout(Context context) {
       super(context);
       init();
   }

   public DragLayout(Context context, AttributeSet attrs) {
       super(context, attrs);
       init();
   }

   public DragLayout(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       init();
   }

   //4.处理Callback接口中的回调方法
   ViewDragHelper.Callback mCallack = new ViewDragHelper.Callback() {
       /**
        * 根据返回值决定子控件是否可以拖动, true表示可以拖动
        * @param child 被捕获的子控件
        * @param pointerId
        * @return
        */
       @Override
       public boolean tryCaptureView(View child, int pointerId) {

           return true;
       }

       /**当开始拖动时回调*/
       @Override
       public void onViewCaptured(View capturedChild, int activePointerId) {
           System.out.println("onViewCaptured -- 拖动");
       }

       /**
        * 根据返回值决定子控件将要显示的位置
        * @param child
        * @param left
        * @param dx
        * @return
        */
       @Override
       public int clampViewPositionHorizontal(View child, int left, int dx) {
           if (child == mMainView) {

               left = fixDragLeft(left);
           }
           return left;
       }

       /**
        * 获取水平方向拖动的最大范围
        * 注意：此方法半不会真正限制子控件的滑动范围，
        * 如果要实现拖动效果，应该返回大于0的值
        * @param child
        * @return mMRange 范围
        */
       @Override
       public int getViewHorizontalDragRange(View child) {
           return mMRange;
       }

       /**
        * 当拖动结束松开手时回调, 需要在此方法中设置菜单为打开或关闭状态
        * 侧滑菜单何时打开和关闭？
        * 打开的情况：
     *   1) 滑动速度大于0
        *   2)  速度是0且位置大于拖拽范围的一半
        * 关闭的情况：其他的情况都是关闭
        * 
        * @param releasedChild
        * @param xvel 松开手时水平方向的速度,像素/秒，往右为正
        * @param yvel
        */
       @Override
       public void onViewReleased(View releasedChild, float xvel, float yvel) {
           super.onViewReleased(releasedChild, xvel, yvel);
           // 松开手时打开或关闭侧滑菜单
           if (xvel > 0) {
               open();
           } else if (xvel == 0 && mMainView.getLeft() > mMRange / 2) {
               open();
           } else {
               close();
           }

       }

       /**
        * 当前界面发生改变回调
        * 处理逻辑： 关联滑动， 事件监听， 伴随动画
        * @param changedView
        * @param left
        * @param top
        * @param dx
        * @param dy
        */
       @Override
       public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
           //  super.onViewPositionChanged(changedView, left, top, dx, dy);
           // 当滑动菜单时，同时滑动主界面
           if (changedView == mMenuView) {
               // 保持菜单界面位置不变
               mMenuView.layout(0, 0, mWidth, mHeight);

               // 关联滑动，菜单滑动多少，主界面也滑动多少
               int newLeft = mMainView.getLeft() + dx;
               newLeft = fixDragLeft(newLeft);
               mMainView.layout(newLeft, 0, newLeft + mWidth, mHeight);
           }
           // 监听打开关闭拖动的状态
           listenDragState();
           // 伴随动画
           animateChildren();

       }
   };
 /**
    * 伴随动画
    */
   private void animateChildren() {
       float percent = ((float) mMainView.getLeft()) / mMRange;

       //菜单界面
       // 平移: [-mWidth / 2, 0]
       // 透明度变化: [0.4, 1]
       // 缩放: [0.5f, 1]
       mMenuView.setTranslationX(evaluate(-mWidth/2,0,percent));
       mMenuView.setAlpha(evaluate(0.4f, 1, percent));
       mMenuView.setScaleX(evaluate(0.5f, 1f, percent));
       mMenuView.setScaleY(evaluate(0.5f, 1f, percent));

       // 主界面：  缩放[1, 0.8f]
       mMainView.setScaleX(evaluate(1f, 0.8f, percent));
       mMainView.setScaleY(evaluate(1f, 0.8f, percent));

       Drawable drawable = getBackground();
       if (drawable != null) {
           int color = (int) evaluateColor(percent, Color.BLACK, Color.TRANSPARENT);
           drawable.setColorFilter(color , PorterDuff.Mode.SRC_OVER);
       }
   }
   /**
    * 估值器
    */
   public float evaluate(float start,float end,float percent){
       // 中间值 = 开始值 + （结束值 - 开始值） * 百分比
       return start+(end - start)*percent;
   }
   public Object evaluateColor(float fraction, Object startValue, Object endValue) {
       int startInt = (Integer) startValue;
       int startA = (startInt >> 24) & 0xff;
       int startR = (startInt >> 16) & 0xff;
       int startG = (startInt >> 8) & 0xff;
       int startB = startInt & 0xff;

       int endInt = (Integer) endValue;
       int endA = (endInt >> 24) & 0xff;
       int endR = (endInt >> 16) & 0xff;
       int endG = (endInt >> 8) & 0xff;
       int endB = endInt & 0xff;

       return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
               (int)((startR + (int)(fraction * (endR - startR))) << 16) |
               (int)((startG + (int)(fraction * (endG - startG))) << 8) |
               (int)((startB + (int)(fraction * (endB - startB))));
   }

//------------侧滑菜单事件监听------以下------------


   /**
    * 事件监听（打开，关闭，拖动）
    */
   private void listenDragState() {
       int left = mMainView.getLeft();
       if(left == 0){
           mCurrentStatus = DragStatus.CLOSE;//关闭
       }else if(left == mMRange){
           mCurrentStatus = DragStatus.OPEN;//打开
       }else{
           mCurrentStatus = DragStatus.DRAGGING;//拖动
       }

       //当事件发生时，回调监听器中的方法
       if(mOnDragListener != null){
           if(mCurrentStatus == DragStatus.OPEN){

               //回调监听器中相应的方法

           }else if(mCurrentStatus == DragStatus.CLOSE){

               mOnDragListener.onClose();

           }else{

               float v = ((float) mMainView.getLeft()) / mMRange;
               mOnDragListener.onDraging(v);
           }
       }

   }

   public boolean isOpen() {

       return  mCurrentStatus == DragStatus.OPEN;
   }


   //定义一个枚举
   public enum DragStatus{
       OPEN,CLOSE,DRAGGING
   }


   private DragStatus mCurrentStatus = DragStatus.CLOSE;//默认状态

   /**
    * 提供状态获取
    * @return
    */
   public DragStatus getCurrentStatus() {
       return mCurrentStatus;
   }

   /**
    * 1.自定义的监听器
    */
   private OnDragListener mOnDragListener;
   public interface OnDragListener {
       void onOpen();
       void onClose();
       void onDraging(float value);

   }
   /**
    * 给外部提供设置监听器的方法
    * @param onDragListener
    */
   public void setOnDragListener(OnDragListener onDragListener){
       mOnDragListener = onDragListener;
   }

   //--------------事件监听-----以上---------------------------

   private int fixDragLeft(int left) {
       if (left < 0) {
           left = 0;
       } else if (left > mMRange) {
           left = mMRange;
       }
       return left;
   }

   /**
    * 关闭菜单
    */
   private void close() {
       mMenuView.layout(0, 0, mWidth, mHeight);
       //  mMainView.layout(0,0,mWidth,mHeight);
       //主界面平滑滚动
       mDragHelper.smoothSlideViewTo(mMainView, 0, 0);
       //刷新 调用顺序Invalidate --> onDraw() --> computeScroll(重写，在此方法里面需要继续刷新)
       ViewCompat.postInvalidateOnAnimation(this);
   }

   /**
    * 打开菜单
    */
   private void open() {
       mMenuView.layout(0, 0, mWidth, mHeight);
       //mMainView.layout(mMRange,0,mWidth+mMRange,mHeight);
       // 平滑滚动到某一位置： 第一步
       mDragHelper.smoothSlideViewTo(mMainView, mMRange, 0);

       //刷新 调用顺序Invalidate --> onDraw() --> computeScroll(重写，在此方法里面需要继续刷新)
       ViewCompat.postInvalidateOnAnimation(this);
   }

   @Override
   public void computeScroll() {
       super.computeScroll();

       //第二步
       //如果没有滑动到指定位置，需要继续刷新
       if (mDragHelper.continueSettling(true)) {
           ViewCompat.postInvalidateOnAnimation(this);
       }
   }

   private void init() {
       //1.创建ViewDragHelper对象
       float sensitivity = 1.0f;//敏感值，数值越大则越容易滑动菜单
       mDragHelper = ViewDragHelper.create(this, sensitivity, mCallack);
   }

   @Override
   public boolean onInterceptTouchEvent(MotionEvent ev) {

       // 2. 让ViewDragHelper决定是否拦截事件
       return mDragHelper.shouldInterceptTouchEvent(ev);
   }

   @Override
   public boolean onTouchEvent(MotionEvent event) {
       // 3. 把事件交给ViewDragHelper处理
       mDragHelper.processTouchEvent(event);
       //按下时需要返回true,否则无法接收到后续的move和up事件
       if (event.getAction() == MotionEvent.ACTION_DOWN) {
           return true;
       }

       return super.onTouchEvent(event);
   }

   /**
    * 当填充结束后回调此方法，注意：不能在此方法获取控件的宽高
    */
   @Override
   protected void onFinishInflate() {
       super.onFinishInflate();
       // 健壮性处理
       if (getChildCount() < 2) {
           throw new IllegalStateException("DragLayout至少要有两个子控件");
       }
       mMenuView = getChildAt(0);
       mMainView = getChildAt(1);
   }

   /**
    * 执行此方法时，已经调用完了onMeasure，所以可以获取控件宽高
    *
    * @param w
    * @param h
    * @param oldw
    * @param oldh
    */
   @Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
       super.onSizeChanged(w, h, oldw, oldh);
       //获取控件的宽高
       mWidth = getMeasuredWidth();
       mHeight = getMeasuredHeight();
       //设置主界面只能滑到 %60；
       mMRange = (int) (mWidth * 0.6f);
   }
}

头像左右晃动的实现

监听当侧滑面板关闭时通过属性动画实现左右晃动的动画。

mDragLayout.setOnDragListener(new OnDragListener() {    
    @Override
    public void open() {
    }   
    @Override
    public void onDragging(float percent) {
        iv_header.setAlpha(1 - percent); // 拖动时设置透明度
    }   
    @Override
    public void close() {
        showToast("close");     


    TranslateAnimation animation = new TranslateAnimation(0, 10, 0, 0);
    animation.setDuration(100);
    animation.setRepeatCount(4);
    iv_header.startAnimation(animation);


    }
});

问题解决：

处理菜单打开后主界面列表仍可滑动的问题

自定义主界面根布局控件，并重写拦截方法，当侧滑菜单打开时返回true拦截事件：

    public class MyLinearLayout extends LinearLayout {

        private DragLayout dragLayout;

        public MyLinearLayout(Context context) {
            super(context);
        }
        public MyLinearLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        public void setDragLayout(DragLayout dragLayout) {
            this.dragLayout = dragLayout;
        }   
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            // 如果侧菜单打开，则拦截事件，不让列表点击或者滚动
            if (dragLayout.isOpen()) {
                return true;
            }
            return super.onInterceptTouchEvent(ev);
        }
         @Override
        public boolean onTouchEvent(MotionEvent event) {
            //如果菜单打开，不允许触摸主界面时，菜单列表滑动
            if(layout!= null && layout.isOpen()){
                return true;
            }
            return super.onTouchEvent(event);
        }
    }

完整源码：点击下载