仿QQ5.0侧滑菜单—进阶篇

在上一篇文章中，实现了抽屉式侧滑菜单，但是跟真正的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);

源码：http://download.csdn.net/download/qq_22804827/9289249