自己定义HorizontalScrollView实现qq側滑菜单

然而这个菜单效果仅仅是普通的側拉效果我们还能够实现抽屉式側滑菜单就像这样

第一种效果

另外一种效果

第三种效果

第四种效果

其他代码都和上篇文章同样，仅仅是在MyHorizontalScrollView.class重写onScrollChanged这种方法

第一种的側滑效果代码非常easy

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		ViewHelper.setTranslationX(mMenu, l);
	}

通过setTranslationX方法设置mMenu的x坐标偏移量当中的l=getScrollX()

设置完这些就能实现这种側滑效果

另外一种側滑效果代码和第一种类似。仅仅只是是对mMenu的x坐标的偏移量再添加1倍，使得mMenu菜单仿佛从右边出来一样

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		ViewHelper.setTranslationX(mMenu, 2*l);
	}

第三种側滑效果，我们发现用到了缩放动画，所以要有个0~1的变化率，因为初始的l=getScrollX()=mMenuWidth 。终于的l=0 所以从这里我们能够得到

		//scale 1~0的变化率
		float scale = l*1.0f/mMenuWidth;

代码例如以下

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		//scale 1~0的变化率
		float scale = l*1.0f/mMenuWidth;
		//Content的缩放比例1~0.7
		float rightScale=scale*0.3f+0.7f;
		//设置缩放中心
		ViewHelper.setPivotX(mContent,0);
		ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
		//进行缩放
		ViewHelper.setScaleX(mContent, rightScale);
		ViewHelper.setScaleY(mContent, rightScale);
		
	}

至于这里我为什么设置缩放中心为mContent x=0 y=height/2 是为了在側滑后 mContent左側离屏幕右側的距离不变否则距离也会进行缩放

第四种效果我们会发现相比着第三种不过左側的mMenu的效果不同会发现进行了缩放和透明

代码例如以下

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		//scale 1~0的变化率
		float scale = l*1.0f/mMenuWidth;
		//Content的缩放比例1~0.7
		float rightScale=scale*0.3f+0.7f;
		//Menu的透明度变化0~1
		float leftAlpha=1.0f-scale;
		//Menu的缩放变化0.3-1.0
		float leftScale=1.0f-scale*0.7f;
		//mContent设置缩放中心
		ViewHelper.setPivotX(mContent,0);
		ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
		//mContent进行缩放
		ViewHelper.setScaleX(mContent, rightScale);
		ViewHelper.setScaleY(mContent, rightScale);
		
		/*
		 * 对mMenu进行缩放和设置透明度
		 * */
		ViewHelper.setScaleX(mMenu, leftScale);
		ViewHelper.setScaleY(mMenu, leftScale);
		ViewHelper.setAlpha(mMenu, leftAlpha);
	}

就实现了这种效果

这两天我也尝试着进行矩形翻转的效果模拟器上成功了在真机上就不行了就不帖上了感觉浪费了好多时间 o(︶︿︶)o 唉

关于qqv6.2.3的側拉效果是

我们仅仅要降低mMenu的x坐标的偏移量就能实现代码例如以下

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// TODO Auto-generated method stub
		super.onScrollChanged(l, t, oldl, oldt);
		ViewHelper.setTranslationX(mMenu, l*0.6f);
	}

效果如图：

这几个动画可能在别人看来非常easy 我想了好久啊啊一天半的光阴啊啊万恶的矩阵切换。，。~~NN、DFAGDAJFHJK

看到qq才想起来今天是我生日都不敢想它今年才大二就这么大了 o(︶︿︶)o 唉

生日快乐。

參考：慕课网课程 qq5.0側滑菜单