先看下效果图：
仿酷狗侧滑.gif
看到这个效果大家想想该怎么实现呢？？？？
我实现的思路是找一个可以滑动的系统控件，这样可以少写很多代码。我想到的是 HorizontalScrollView 。然后再里面添加一个LinearLayout 作为包含控件 mune_view和content_view。第一个是菜单栏，第二个主页。如果我们不做任何的处理，大家可以试试是什么结果，哈哈哈哈哈 结果就是 宽度不对 那怎么办呢？！！！
1.解决宽度问题：
/**
* 布局加载完毕
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//指定宽高 内容页面 的宽度为屏幕的宽度 菜单页面的宽度为 屏幕的宽度 减去 设定宽度
//获取到的是LinearLayout
ViewGroup container = (ViewGroup) getChildAt(0);
int childCount = container.getChildCount();
//限制用户只能加入两个布局 如果不是就抛出异常告诉用户
if(childCount != 2){
throw new RuntimeException("有且只能添加两个布局");
}
//第一步 设置宽高
//获取菜单 布局
mMenuView = container.getChildAt(0);
ViewGroup.LayoutParams menuParams = mMenuView.getLayoutParams();
menuParams.width = mMenuRightMargin;
//7.0以上的手机必须设置这个
mMenuView.setLayoutParams(menuParams);
//获取内容布局
mContentView = container.getChildAt(1);
ViewGroup.LayoutParams contentViewParams = mContentView.getLayoutParams();
contentViewParams.width = getScreenWidth();
mContentView.setLayoutParams(contentViewParams);
//默认是关闭的 但是设置没有用 ? 为什么呢 因为这句话是在 onLayout之前执行的 所以要放到 onLayout方法中
scrollTo(mMenuRightMargin,0);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
//第二步 设置 滑动到主页
scrollTo(mMenuRightMargin,0);
}
scrollTo()
这个只能放在onLayout方法中才有效果。为什么要这样呢？因为HorizontalScrollView的布局是从左向右的，我们的主界面是在第二个，所以需要移动一段距离。好了，我们开始第二步。
2.对滑动进行监听 onTouchEvent
/**
* 手指抬起的时候 要么打开 要么关闭
* @param ev
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if(isIntercept){
return true;
}
//设置滑动到手势上
//在这里有一个问题 在下面的 up 事件中 也对菜单进行了打开关闭操作 所以某些时候会重复 需要做判断
//快速滑动触发了 就不要再执行下面的方案了
if(mGestureDetector.onTouchEvent(ev)){
return true;
}
// 第三步 只需要监听抬起状态 根据滚动距离判断
if(ev.getAction() == MotionEvent.ACTION_UP){
float currentScrollX = getScrollX();
if(currentScrollX > mMenuRightMargin / 2){
//关闭
closeMenu();
}else {
//打开
openMenu();
}
//这里返回是为了保证了 super不执行 否则 smoothScrollTo() 没有效果
return true;
}
return super.onTouchEvent(ev);
}
/**
* 打开菜单 也就是滚动到 0 的位置
*/
public void openMenu(){
//带动画 打开
mMenuIsOpen = true;
smoothScrollTo(0,0);
}
/**
* 关闭菜单 也就是滚动到 mMenuRightMargin 的位置
*/
public void closeMenu(){
mMenuIsOpen = false;
smoothScrollTo(mMenuRightMargin,0);
}
3.对滚动缩放进行处理 onScrollChanged()
// 第四步 左右两边的缩放
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
// Log.d("TAG","left="+l+" top="+t+" old-left="+oldl+" old-top="+oldt);
//算一个比例
float scale = 1f * l/mMenuRightMargin;
// Log.d("TAG","scale = "+ scale);
//右边缩放 最小是 0.7f 最大是 1f
//缩放 1.0f->0.7f
float rightScale = 0.7f + 0.3f * scale;
// Log.d("TAG","rightScale = "+ rightScale);
//设置右边的缩放 默认是中心点缩放
// 设置缩放的中心点
mContentView.setPivotX(0);
mContentView.setPivotY(mContentView.getMeasuredHeight()/2);
mContentView.setScaleX(rightScale);
mContentView.setScaleY(rightScale);
//左边菜单的缩放 和透明度
//透明度是 半透明到全透明
// 缩放 0.7f->1.0f
float leftScale = 0.7f + 0.3f * (1-scale);
mMenuView.setScaleX(leftScale);
mMenuView.setScaleY(leftScale);
//设置透明度
float alphaScale = 0.5f + 0.5f * (1-scale);
mMenuView.setAlpha(alphaScale);
//最后一个 酷狗 音乐 地下的 退出 按钮一开始 是在右边 被覆盖的
// 通过平移实现
mMenuView.setTranslationX(0.4f*l);
}
4.增加对快速滑动的监听 GestureDetector 的使用
private GestureDetector.OnGestureListener mGestureListener = new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
//只要快速滑动 就会回调
//所以我们只关注快速滑动 向右滑动的时候 打开 向左的时候关闭
//快速往右滑动的时候 velocityX 是正数 往左滑动的时候 是负数
if (mMenuIsOpen) {//已经打开
//向右快速滑动 执行关闭
if (velocityX < 0) {
closeMenu();
return true;
}
} else {//已经关闭
//向左快速滑动 执行打开
if (velocityX > 0) {
openMenu();
return true;
}
}
return super.onFling(e1, e2, velocityX, velocityY);
}
};
5.事件拦截操作onInterceptTouchEvent（）
为什么要进行事件的拦截呢？因为当菜单打开的时候，用户点击主页面的时候要先关闭菜单，并且拦截 主页面的点击事件不被消费
/**
* 处理事件拦截 当用户触摸右边部分的时候 应该先关闭菜单
* @param ev
* @return
*/
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
isIntercept = false;
if(mMenuIsOpen){
float currentX = ev.getX();
//触摸点 大于 菜单宽度
if(currentX > mMenuRightMargin){
//1. 关闭
closeMenu();
// 2. 子 view 不需要响应任何的触摸事件 也就是拦截子view的触摸事件 但是会响应自己的onTouch事件
//所以要拦截自己的事件
isIntercept = true;
return true;
}
}
return super.onInterceptTouchEvent(ev);
}
到此就基本结束了，源码地址链接
https://github.com/panshimu/KGSlidingMenuLayout
如果有任何问题欢迎留言，我看到会回复的，谢谢！
欢迎添加QQ交流：362976241
