自定义View系列(八) 仿酷狗侧滑菜单的实现

侧滑菜单在项目中大量应用,我们一般会用SlidingMenu或者DrawLayout,今天就让我们走进自定义侧滑的世界,仿照酷狗音乐的侧滑来做。

1.类的创建和自定义属性

类继承HorizontalScrollView,自定义属性都会,就直接上代码

 

    

 

public class KGSlidingMenu extends HorizontalScrollView {
private Context mContext;
private int mMenuWidth;

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

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

public KGSlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.mContext=context;
    //初始化自定义属性
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.KGSlidingMenu);
    float rightMargin = typedArray.getDimension(R.styleable.KGSlidingMenu_menuRightMargin,       ScreenUtils.dip2px(mContext, 50));

    //菜单页的宽度 是 屏幕的宽度减右边一部分的距离
    mMenuWidth= (int) (ScreenUtils.getScreenWidth(mContext)-rightMargin);

    typedArray.recycle();
}   }
2.onFinishInflate() 方法调用,来设置宽度问题

onFinishInflate();方法是在xml解析之后调用,在Activity的onCreate()中调用,获取子view,设置宽度

   //获取子view 相当于LinearLayout
   ViewGroup viewGroup=(ViewGroup) getChildAt(0);
    int childCount = viewGroup.getChildCount();
    //只能有两个子view
    if (childCount!=2){

        throw  new RuntimeException("只能放置两个子View");
    }

    //菜单页的宽度 是 屏幕的宽度减右边一部分的距离
    mMenuView= viewGroup.getChildAt(0);
    ViewGroup.LayoutParams menuParams = mMenuView.getLayoutParams();
    menuParams.width=mMenuWidth;
    //7.0以下手机 必须添加这句
    mMenuView.setLayoutParams(menuParams);

    //内容页的宽度 屏幕的宽度
    mContentView= viewGroup.getChildAt(1);
    ViewGroup.LayoutParams contentParams = mContentView.getLayoutParams();
    contentParams.width=ScreenUtils.getScreenWidth(getContext());
    mContentView.setLayoutParams(contentParams);
   }
3.onLayout()方法,初始化设置

onLayout()方法是在Activity的onResume()中调用

/**
 * 初始化是关闭的
 * @param changed
 * @param l
 * @param t
 * @param r
 * @param b
 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
   // 用来排放子布局的   等子View全部拜访完才能去滚动
    scrollTo(mMenuWidth,0);
}
4.触摸事件onTouchEvent(),设置打开和关闭
 @Override
 public boolean onTouchEvent(MotionEvent ev) {

    switch (ev.getAction()){
        case MotionEvent.ACTION_UP:

          int currentScrollX=  getScrollX();
             if (currentScrollX>mMenuWidth/2){
               //关闭
                 closeMenu();
             }else {
             //打开
             openMenu();

             }
            break;
    }
    return true;
}
/**
 * 打开菜单
 *
 * smoothScrollTo()  有动画的滚动
 */
private void openMenu() {
    smoothScrollTo(0,0);
}
/**
 * 关闭菜单
 */
private void closeMenu() {
    smoothScrollTo(mMenuWidth,0);
}
5.onScrollChanged()可以实时获取坐标位置,来完成缩放和透明度变化
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    float scale=1f*l/mMenuWidth;
    //右边的缩放
    float rightScale=0.7f+0.3f*scale;
    //设置右边的缩放
    ViewCompat.setPivotX(mContentView,0);
    ViewCompat.setScaleY(mContentView,mContentView.getMeasuredHeight()/2);
    ViewCompat.setScaleX(mContentView,rightScale);
    ViewCompat.setScaleY(mContentView,rightScale);

    //菜单的缩放和透明度
    //透明度 半透明到完全透明
    float alpha=0.7f+(1-scale)*0.3f;
    ViewCompat.setAlpha(mMenuView,alpha);
    //缩放 0.7f -1.0f
    float leftScale=0.7f+(1-scale)*0.3f;
    ViewCompat.setScaleX(mMenuView,leftScale);
    ViewCompat.setScaleY(mMenuView,leftScale);

    //退出按钮刚  开始在右边,划出时出字的变化
    //设置平移 平移l*0.1f
    ViewCompat.setTranslationX(mMenuView,0.25f*l);

}
6.手势处理类GestureDetector,解决快速滑动

创建对象

 mGestureDetector=new GestureDetector(mContext,mGestureListener);

监听的实现

 private class GestureDetectorListener implements GestureDetector.OnGestureListener {
    @Override
    public boolean onDown(MotionEvent e) {
        // 按下
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;// 单击
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;// 滚动
    }

    @Override
    public void onLongPress(MotionEvent e) {
        // 长安
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        // 快速滑动
        return false;
    }
}

我们只需要快速滑动方法,所以可以实现下面监听

 private GestureDetector.OnGestureListener mGestureListener=new GestureDetector.SimpleOnGestureListener(

){
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
           //只关注 快速滑动
        //打开时往右边快速滑动 关闭的时候往左边快速滑动
        if (mMenuIsOpen){
            //打开时往右边快速滑动(关闭)
            if (velocityX<0){
                closeMenu();
                return true;
            }

        }else {
           // 关闭的时候往左边快速滑动(打开)
            if (velocityX>0){
                openMenu();
                return true;
            }
        }

        return super.onFling(e1, e2, velocityX, velocityY);
    }
};

定义字段标记是否是打开

    private boolean mMenuIsOpen=false;

在openMenu() 和closeMenu()中设置标记值
因为onTouchEvent()和onFling()方法不能重复走所以,在onTouchEvent()中

if (mGestureDetector.onTouchEvent(ev)){
      //快速滑动触发了,下面就不要走
      return true;
  };
6.onInterceptTouchEvent()拦截事件的处理,菜单打开时点击右边关闭菜单
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {

    mIsIntercept=false;

    if (mMenuIsOpen){
        float currentX=ev.getX();
        if (currentX>mMenuWidth){
                   //关闭菜单
            closeMenu();
            //子view不需要相应任何事件,拦截子view的事件
            mIsIntercept=true;
            return true;

        }
    }
    return super.onInterceptTouchEvent(ev);
}

在onTouchEvent()中也要做相应处理

 if (mIsIntercept){
        return true;
    }

你可能感兴趣的:(自定义View系列(八) 仿酷狗侧滑菜单的实现)