在上一篇文章中,实现了抽屉式侧滑菜单,但是跟真正的QQ5.0的侧滑菜单还是有所区别的:
区别1:内容区域1.0~0.7缩放的效果
区别2:菜单显示时有缩放,以及透明度变化(缩放:0.7~1.0 透明度: 0.6~1.0)
区别3:菜单偏移量需要修改
当然,这儿的缩放值以及透明度都是我们大概估计的@_@
接下来,要一一实现这些区别,当然,还是依据上一篇文章中的代码进行的,不过,在这里要稍微做一下修改:
把left_menu.xml中根布局RelativeLayout的背景去掉(即删除第5行代码):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background" >
......
</RelativeLayout>
然后再main_activity.xml中的根布局RelativeLayout添加上刚才去掉的背景,最后还要修改一下自定义的属性的值(修改成50dp):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:test="http://schemas.android.com/apk/res/com.example.sideslipfollowqq5_0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background" >
<com.example.sideslipfollowqq5_0.SlidingMenu
android:layout_width="match_parent"
android:layout_height="match_parent"
test:rightPadding="50dp" > <!-- 申明自定义的属性 -->
......
</RelativeLayout>
因为如果不修改一下背景图的作用范围,那么缩放内容区域后会在内容区域的周围显示白色的背景,影响美观,而修改自定义属性的值,是为了讲关于内容缩放时出现的一个问题更加明显。
第一步:实现内容的缩放
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
//l的值与getScrollX()方法获得的值相等
float scale=l*1.0f/mMenuWidth;//scale的取值范围:1.0~0.0,左侧未显示区域宽度与菜单宽度的比值
super.onScrollChanged(l, t, oldl, oldt);
// ViewHelper.setTranslationX(mMenu, l); //l的取值范围:mMenuWidth~0
ViewHelper.setTranslationX(mMenu, mMenuWidth*scale);//mMenuWidth*scale=l
float rightScale=0.7f+0.3f*scale; //rightScale的取值范围:1.0~0.7,内容区域的缩放比例
//以mContent的中心为缩放点进行缩放,需要改变成以内容区域最左边的中点位置为缩放点进行缩放
ViewHelper.setPivotX(mContent, 0);//设置缩放点的X坐标
ViewHelper.setPivotY(mContent, mContent.getHeight()/2);//设置缩放点的Y坐标
ViewHelper.setScaleX(mContent, rightScale);//横向缩放
ViewHelper.setScaleY(mContent, rightScale);//纵向缩放
}
刚才提到修改自定义属性的值,就是为了使得这儿所说的问题表现得更加明显。注意到,在上面的代码中不仅实现了横、纵两个方向的缩放,还改变了缩放点的位置,这是因为如果不改变缩放点的位置,而是以内容区域的中心为缩放点的话,展示出来的效果就是下图的样子:
显然这不是我们想要的结果,预期效果应该如下:
第二步:实现菜单显示时的缩放与透明度的变化,只需在onScrollChanged中继续添加如下代码:
float leftScale= 1.0f-scale*0.3f;//leftScale的取值范围:0.7~1.0,菜单区域的缩放比例
float leftAlpha=0.6f+0.4f*(1-scale);//leftAlpha的取值范围,0.6~1.0,菜单区域的透明度比例
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, leftAlpha);
第三步:修改菜单偏移量
当QQ菜单栏拉出来的时候,有一大部分显示出来了,但是还有一小部分是隐藏起来的(在屏幕外面一样),是随着拉的动作慢慢显示出来的
当拉动菜单的时候,不是像前一篇文章中的抽屉式菜单那样使菜单布局向右瞬间移动L的距离(如上图),而是还有约0.2L的区域在屏幕外面,如下图,在屏幕中的约占0.8L
因此,在这里只需要在mMenuWidth*scale的基础上*0.8f
即可:
ViewHelper.setTranslationX(mMenu, mMenuWidth*scale*0.8f);