仿QQ侧滑效果

仿QQ侧滑效果

我们经常使用QQ，感觉QQ的侧滑效果还是不错的，虽然网上有侧滑的包，或者V4包中带的DrawerLayout，但是使用起来不太满意，所以我们就会自己手写侧滑效果，今天我们就来写一下仿QQ侧滑效果。

先上图：

写侧滑功能的思路有很多，就我本人而言，就写个两种：

1.ViewGroup + ViewDragHelper + onTouch事件处理

2.HorizontalScrollView + GestureDetector + onTouch事件处理

第二种现对第一种简单的多，所以今天我们就使用第二种来实现侧滑效果。

看代码前我们需要知道几个小知识：

1. HorizontalScrollView 水平滑动布局
2. GestureDetector 手势处理类
3. onTouch 事件的分发和拦截以及处理

上面三点可以百度，网上太多了，这里就不一一介绍了。

直接上代码：

public class SlidingMenu extends HorizontalScrollView  {

/**
 * 滑动界面状态改变时回调接口
 * @author root
 *
 */
public interface OnSlidingMenuStatusChangeListenter {
    /**
     * 界面关闭时调用
     */
    void  close();
    /**
     * 界面完全打开时调用
     */
    void  open();

}
//滑动界面状态改变时回调接口
private OnSlidingMenuStatusChangeListenter mListenter=null;

/**
 * 滑动界面状态改变时回调接口
 * @param listenter
 */
public void setOnSlidingMenuStatusChangeListenter(OnSlidingMenuStatusChangeListenter listenter){
    this.mListenter=listenter;
}

//菜单view
private View mMenuView;
//内容view
private View mContentView;
//菜单宽度
private int mMenuWidth;
//菜单和内容宽度的差值
private float right_padding=0;
//菜单是否被打开
private boolean isMenuOpen=false;
//手势处理类
private GestureDetector mGestureDetector=null;
//最小fling速度
private int minimumFlingVelocity=0;
//

public SlidingMenu(Context context) {
    this(context,null);
}

public SlidingMenu(Context context, AttributeSet attrs) {
    this(context, attrs,0);
}

public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    //解析自定义属性
    TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.SlidingMenu);
    if(typedArray!=null){
        right_padding = typedArray.getDimension(R.styleable.SlidingMenu_right_padding, dip2px(50));

        typedArray.recycle();
    }
    //获取fling的最小速度
    ViewConfiguration configuration = ViewConfiguration.get(context);
    minimumFlingVelocity = configuration.getScaledMinimumFlingVelocity();
    //初始化手势处理器
    mGestureDetector=new GestureDetector(context,new MyGestureListener());
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    if(changed){
        //布局改变，则调用
        scrollTo(mMenuWidth,0);
    }
}
//事件分发
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    //当前点击位置
    float current = ev.getX();
    //如果菜单打开且当前点击位置>菜单宽度，则停止分发事件
    if(isMenuOpen && current>mMenuWidth){
        //关闭菜单
        closeMenu();
        //阻止事件分发
        return false;
    }

    return super.dispatchTouchEvent(ev);
}


@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    return super.onInterceptTouchEvent(ev);
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    //拦截触摸事件
    //将触摸事件交给手势处理器
    if(mGestureDetector.onTouchEvent(ev)){
        return false;
    }

    switch (ev.getAction()){
        case MotionEvent.ACTION_UP:
            int scrollX = getScrollX();
            if(scrollX>mMenuWidth/2){
                closeMenu();
            }else {
                openMenu();
            }
            return false;
    }

    return super.onTouchEvent(ev);

}

/**
 * 关闭菜单
 */
private void closeMenu() {
    smoothScrollTo(mMenuWidth,0);
    isMenuOpen=false;
    if(mListenter!=null){
        mListenter.close();
    }
}
//打开菜单
private void openMenu() {
    smoothScrollTo(0,0);
    isMenuOpen=true;
    if(mListenter!=null){
        mListenter.open();
    }
}


//布局加载完毕，执行
@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    //1.获取菜单和内容的布局
    ViewGroup childAt = (ViewGroup) getChildAt(0);
    if(childAt==null){
        throw new IllegalArgumentException("SlidingMenu must contain child view!");
    }
    //1.1菜单
    mMenuView = childAt.getChildAt(0);
    if(mMenuView==null){
        throw new IllegalArgumentException("SlidingMenu must contain menu view!");
    }

    //1.2内容
    mContentView = childAt.getChildAt(1);
    if(mContentView==null){
        throw new IllegalArgumentException("SlidingMenu must contain content view!");
    }



    //2.设置宽高
    //2.1菜单宽度
    mMenuWidth = (int) (getScreenWidth() - right_padding);
    mMenuView.getLayoutParams().width=mMenuWidth;
    //2.2内容的宽度
    mContentView.getLayoutParams().width=getScreenWidth();


}

/**
 * 屏幕宽度
 * @return
 */
private  int getScreenWidth(){
    DisplayMetrics displayMetrics =
            getResources().getDisplayMetrics();
    return displayMetrics.widthPixels;
}

/**
 * dip转px
 * @param dp
 * @return
 */
private int  dip2px(int dp){
    DisplayMetrics displayMetrics =
            getResources().getDisplayMetrics();
    return (int) (displayMetrics.density*dp);
}

//手势监听
private class MyGestureListener extends GestureDetector.SimpleOnGestureListener {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

        //如果是纵向滑动，则直接返回，防止横向滑动
        if(Math.abs((velocityY)) > Math.abs(velocityX)){
            return super.onFling(e1,e2,velocityX,velocityY);
        }
        //向左----velocityX < 0
        if(velocityX<0 && isMenuOpen && Math.abs(velocityX) > minimumFlingVelocity){
            toggleMenu();
            return true;
        }

        //向右-----velocityX > 0
        if(velocityX > 0 && !isMenuOpen && Math.abs(velocityX) > minimumFlingVelocity){
            toggleMenu();
            return true;
        }
        return super.onFling(e1,e2,velocityX,velocityY);
    }
}

/**
 * 切换状态
 * 提供给用户调用
 */
public void toggleMenu() {
    if(isMenuOpen){
        closeMenu();
    }else {
        openMenu();
    }
}

//位置滑动时，调用
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    //滑动时，给菜单设置默认位置
    mMenuView.setTranslationX(l*0.8f);

    //l (0-->mMenuWidth)
    //percent (0--->1)
    float percent = l * 1f / mMenuWidth;
    //percent (0.4->1)
    percent=evaluate(percent,0.4,1);

    //给内容添加阴影(0.4-1)
    mContentView.getBackground().setColorFilter((Integer)evaluateColor(percent, Color.BLACK,Color.TRANSPARENT),
            android.graphics.PorterDuff.Mode.SRC_OVER);

}

/**
 * 评估值
 * @param fraction
 * @param startValue
 * @param endValue
 * @return
 */
public Float evaluate(float fraction, Number startValue, Number endValue) {
    float startFloat = startValue.floatValue();
    return startFloat + fraction * (endValue.floatValue() - startFloat);
}

/**
 * 颜色变化过度
 * @param fraction
 * @param startValue
 * @param endValue
 * @return
 */
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))));
}

上面代码没什么好说的，因为注释很清晰。

如果给内容添加阴影，不是太了解，可以使用其他方法，比如：在内容的布局上面添加一层ImageView,然后在onScrollChanged中对ImageView背景透明度进行调整就ok了。

上面有个自定义属性，我们来看下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="SlidingMenu">
       <attr name="right_padding" format="dimension"></attr>

   </declare-styleable>

</resources>

很简单吧！

下面我们来看下使用：

<?xml version="1.0" encoding="utf-8"?>
<github.com.sldingmenu.view.SlidingMenu
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:right_padding="80dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <!-- 菜单 -->
       <include
           layout="@layout/menu_layout"></include>

        <!--内容-->
        <include
            layout="@layout/content_layout"></include>

    </LinearLayout>
</github.com.sldingmenu.view.SlidingMenu>

如果要代码中进行侧滑，只要调用 SlidingMenu的toggleMenu() 就行了 。

如果需要监听侧滑栏状态，只要调用SlidingMenu的setOnSlidingMenuStatusChangeListenter

我们看到使用很简单吧！

直接给出地址：点击下载
代码查看地址：查看