android:QQ多种侧滑菜单的实现

在这篇文章中写了

自定义HorizontalScrollView实现qq侧滑菜单

然而这个菜单效果只是普通的侧拉效果 我们还可以实现抽屉式侧滑菜单 就像这样

第一种效果

第二种效果

第三种效果

第四种效果

其它代码都和上篇文章相同,只是在MyHorizontalScrollView.class重写onScrollChanged这个方法

第一种的侧滑效果代码很简单

	@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);
	}

效果如图:

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

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

生日快乐。

参考:慕课网课程  qq5.0侧滑菜单

时间: 2024-10-09 17:00:48

android:QQ多种侧滑菜单的实现的相关文章

android:QQ多种側滑菜单的实现

在这篇文章中写了 自己定义HorizontalScrollView实现qq側滑菜单 然而这个菜单效果仅仅是普通的側拉效果 我们还能够实现抽屉式側滑菜单 就像这样 第一种效果 另外一种效果 第三种效果 第四种效果 其他代码都和上篇文章同样,仅仅是在MyHorizontalScrollView.class重写onScrollChanged这种方法 第一种的側滑效果代码非常easy @Override protected void onScrollChanged(int l, int t, int o

Android QQ5.0侧滑菜单

背景 相信大家用过QQ的人,都会知道QQ有这样的一个功能,那就是他的菜单,感觉就像抽屉一样被拉出来的感觉,感觉很拉风啊,酷酷的,如果你有一种想要把它给弄清楚,想明白,这是一个好东西,你要把它变成自己的,那么现在就是你的机会,也在此恭喜你,你终于初步具有一个向中级工程师迈进的门票了,因为你已经跨出第一步了. 一:效果图,走一走,天下我有 二:实现步骤 1.菜单和内容布局的实现 2.自定义viewgroup 3.给注册监听事件,添加动画效果 三:示例源码 ①菜单布局 <?xml version=&quo

Android 高大上的侧滑菜单DrawerLayout,解决了不能全屏滑动的问题

DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图: 注意左上角那个图标,有木有很好玩,哈哈... 接下来就介绍如何实现这一功能 1. 在项目对应的build.gradle中添加依赖 dependencies { ...//其他代码 compile 'com.android.support:appcompat-v7:24.0.0' compile 'com.android.support:des

Android毛玻璃效果侧滑菜单

实现目标 相信大家都知道毛玻璃效果是怎样的,也可以说是高斯模糊效果.效果图如下: 这是一个透明,且会对背景进行高斯模糊的效果,看起来就像是毛玻璃一样,其实不光是侧滑菜单,只要是view,理论上都可以实现这样的效果,接下来我们就来实现这个效果. 第一步:框架搭建 我使用的android studio,所以要创建这样一个带侧滑菜单的项目非常简单,在新建项目的步骤中,执行到这一步,选择Navigation Drawer Activity就可以了: android studio会自动创建带有这种侧滑覆盖

Android自定义View之仿QQ侧滑菜单实现

最近,由于正在做的一个应用中要用到侧滑菜单,所以通过查资料看视频,学习了一下自定义View,实现一个类似于QQ的侧滑菜单,顺便还将其封装为自定义组件,可以实现类似QQ的侧滑菜单和抽屉式侧滑菜单两种菜单. 下面先放上效果图: 我们这里的侧滑菜单主要是利用HorizontalScrollView来实现的,基本的思路是,一个布局中左边是菜单布局,右边是内容布局,默认情况下,菜单布局隐藏,内容布局显示,当我们向右侧滑,就会将菜单拉出来,而将内容布局的一部分隐藏,如下图所示: 下面我们就一步步开始实现一个

Xamarin.Android中使用ResideMenu实现侧滑菜单

上次使用Xamarin.Android实现了一个比较常用的功能PullToRefresh,详情见:Xamarin. Android实现下拉刷新功能 这次将实现另外一个手机App中比较常用的功能:侧滑菜单.通过搜索,发现有很多侧滑菜单,有仿手机QQ的侧滑菜单,有折叠的侧滑菜单,有SlidingMenu等,不过我还是比较喜欢 ResideMenu实现的效果,所以想通过Xamarin.Android的绑定实现该效果.这次实现该菜单遇到的问题比较多,花的时间也较多,花了三四个晚上才解决所有的问题.下面是

Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭

1.原理分析 首先对比一下我们上篇的实现距离QQ的效果还有多远: 差距还是蛮大的 区别1.QQ的内容区域会伴随菜单的出现而缩小 区别2.QQ的侧滑菜单给人的感觉是隐藏在内容的后面,而不是拖出来的感觉 区别3.QQ的侧滑菜单有一个缩放以及透明度的效果~ 那么我们如何能做到呢: 对于区别1:这个好办,我们可以在滑动的时候,不断的改变内容区域的大小:如何改变呢?我们在菜单出现的整个过程中,不断记录菜单显示的宽度与其总宽度的比值,是个从0到1的过程,然后把0~1转化为1~0.7(假设内容区域缩小至0.7

Android侧滑菜单DrawerLayout(抽屉布局)实现

应用场景: 由于侧滑菜单有更好的用户体验效果,所以更多的App使用侧滑抽屉式菜单列表,如网易客户端.百度影音.爱奇艺等等.至此,侧滑菜单有了更多的使用需求. 知识点介绍: 实现侧滑菜单功能的方法有很多,如果开源的项目SlidingMenu,下载地址为https://github.com/jfeinstein10/SlidingMenu.该开源项目依赖于另一个开源项目ActionBarSherlock,下载地址为https://github.com/JakeWharton/ActionBarShe

Android之十SlidingMenu侧滑菜单的实现分析

Android之十SlidingMenu侧滑菜单的实现分析 SlidingMenu侧滑菜单是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了这种界面方案,像facebook.人人网.everynote.Google+.网易新闻.知乎日报.有道云笔记等等 侧滑菜单实现原理: 在一个Activity的布局中需要有两部分,一个是菜单(menu)的布局,一个是内容(content)的布局.两个布局横向排列,菜单布局在左,内容布局在右