在上文中,我们实现了普通的侧滑项目,在本篇中,咱们继续完善上篇。这个效果是仿QQ5.0和酷狗侧滑特效的。使用的话大家下载源码看demo,页很简单。同样,不上传github了。使用请下载源码直接复制进你的项目。
请把主界面的背景图片改成你自己的布局xml文件,使用include包含进去。include导入的主界面请使用LinearLayout父布局。
具备非常强的视觉差特效。
我们来回顾下上篇文章的内容。点击回顾自定义高级控件打造主流的侧滑菜单控件
- 计算屏幕宽度
- 计算menu菜单界面和主界面宽度
- 设置触摸事件监听(onTouchEvent)
- 设置初始布局位置(onLayout)在了解上篇内容之后,咱们现在加以拓展。咱们的目标效果是下面这样。
- l当前的水平滚动位置
- t当前的垂直滚动位置
- oldl之前的水平滚动位置
- oldt之前的垂直滚动位置
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
//缩放比例
float scale = (float)l/mMenuWidth;
Log.e("TAG", scale+"");
//左菜单缩放
float scaleLeft = 1-0.3f*scale;
ViewHelper.setScaleX(mMenuLayout, scaleLeft);
ViewHelper.setScaleY(mMenuLayout, scaleLeft);
//透明度缩放
float alphaLeft = 1- scale;
ViewHelper.setAlpha(mMenuLayout, alphaLeft);
//主界面
float scaleRight = 0.93f + scale * 0.07f;
ViewHelper.setScaleX(mMainLayout, scaleRight);
ViewHelper.setScaleY(mMainLayout, scaleRight);
//视觉差平移
ViewHelper.setTranslationX(mMenuLayout, mMenuWidth * scale);
}
boolean flag = false;//用来标志菜单界面不可见
if(flag == false){
//当menu菜单界面不可见时
...
//对座标改变的绝对值进行判断
...
}else{
//当menu菜单界面可见时
...
//对座标改变的绝对值进行判断
}
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = ev.getX();//按下的横座标
break;
case MotionEvent.ACTION_UP:
upX = ev.getX();//松开的横座标
d = upX - downX;//计算绝对值判断是否滑动
float ds = Math.abs(d);
if(flag==false){
//左移
if(d<0){
this.smoothScrollTo(mMenuWidth, 0);
flag = false;
}
//右移
if(d>0){
if(ds>mScreenWidth/5){
this.smoothScrollTo(0, 0);
flag = true;//显示
}else{
this.smoothScrollTo(mMenuWidth, 0);
flag = false;//隐藏
}
}
}else if(flag == true){
//左移
if(d<0){
if(ds<mScreenWidth/5){
this.smoothScrollTo(0, 0);
flag = true;
}else{
this.smoothScrollTo(mMenuWidth, 0);
flag = false;
}
}
//右移
if(d>0){
this.smoothScrollTo(0, 0);
flag = true;
}
}
return true;
default:
break;
}
return super.onTouchEvent(ev);
}