仿Android新版手机QQ底部动态按钮效果-阿里云开发者社区

开发者社区> 技术小能手> 正文

仿Android新版手机QQ底部动态按钮效果

简介:
+关注继续查看

不知道细心的同学注意到没有,新版手机QQ的底部tab按钮特别有意思,当手放在上面的时候,这个按钮可以随手指的移动而改变形状,如下图:

c6978d47f3b21bb8210f8103f2138f8901df9c35

于是我就仿写了一个,其实实现原理也挺简单的,最终的效果图如下:

be40ce6f859d894aacc4403fc1d551bf172eb736

第一步我们得下载QQ的apk文件,把里面的按钮图片资源解压出来,不过解压之后一看瞬间懵逼了,居然有这么多文件夹,而且还是混淆过后的:

6c1ba4a2f8a86cf3fd6025c8eb8213aadf38213a

还好机智的我试着搜索tab、menu、selected等关键词后才其中一个文件夹发现了这些图片:

3774a15b3cd136781de07ffae0583c5bfc74ca11

原来每个tab按钮都是由1~2张图片拼在一起的,那我就封装成一个控件,然后仿写第一个按钮好了。
实现原理很简单,继承FrameLayout,添加1~2张图片,在onTouchEvent方法中移动。当然为了实现上述效果,两张图片移动的比例(或者阻尼值)是不同的,而且还要限制两张图片的移动范围。


@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE: {
changeWhenMove(x, y);
return true;
}
case MotionEvent.ACTION_UP: {
restorePosition();
if (isContain(this, event.getRawX(), event.getRawY())) {
setHasClick(!hasClick);
if (OnMenuClickListener != null) {
OnMenuClickListener.onItemClick(this);
}
}
return true;
}
}
return true;
}

核心代码如上:ACTION_MOVE时移动控件,ACTION_UP时还原至原位置。如果手指抬起的位置在按钮范围内则响应点击事件。这样就简单实现了QQ动态按钮的效果。实际使用也很简单:简单在布局文件中声明,并在代码中设置普通状态的图片id和按下状态的图片的id就行了:


<com.renny.qqmenu.QQMenu
android:id="@+id/avater_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>

QQMenu.setImgages(R.drawable.skin_tab_icon_conversation_normal
, R.drawable.skin_tab_icon_conversation_selected
, R.drawable.rvq, R.drawable.rvr);
QQMenu.setOnMenuClickListener(new QQMenu.OnMenuClickListener() {
@Override
public void onItemClick(View view) {
Toast.makeText(MainActivity.this, "Click "+QQMenu.isHasClick(),
Toast.LENGTH_SHORT).show();
}
});

最后贴下github地址,欢迎提交Issues,如果你觉得用的着的话还请点个赞哦。
github:https://github.com/renjianan/QQMenu


原文发布时间为:2018-11-5

本文作者:大头呆

本文来自云栖社区合作伙伴“安卓巴士Android开发者门户”,了解相关信息可以关注“安卓巴士Android开发者门户”。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用PS设计等高线效果的背景图片
有些简单的单网页,如果利用等高线效果的背景图片,再配合合适的背景色,能达到绚丽的效果。如下图所示:   本文就介绍该等高线效果的背景图片是如何制作的。Follow Me!!!!   1、新建文档,尺寸:1000px*1000px   2、用矩形工具创建一个矩形,尺寸:500px*...
675 0
Android检测版本更新
一、准备       1.检测当前版本的信息AndroidManifest.xml-->manifest-->android:versionName。       2.从服务器获取版本号(版本号存在于xml文件中)并与当前检测到的版本进行匹配,如果不匹配,提示用户进行升级,如果匹配则进入程序主界面。
698 0
动手开发Android:Xposed插件完整过程
如何动手开发Xposed插件,本文为您介绍
264 0
关于Android Studio中Run按钮是灰色的解决
今天导入一个别人的项目,在导入之前是老方法,覆盖  了三个关键文件之后(.gradle文件夹的内容版本若与本地不一,也应删掉),重启AS; 然而嗯,运行按钮居然灰色。
2163 0
Android官方开发文档Training系列课程中文版:通知用户之更新或移除通知
原文地址:http://android.xsoftlab.net/training/notify-user/managing.html#Removing 当需要在不同时段发布同一事件类型的通知时,应当避免创建新的通知。
629 0
使用新版Android Studio检测内存泄露和性能
内存泄露,是Android开发者最头疼的事。可能一处小小的内存泄露,都可能是毁于千里之堤的蚁穴。 怎么才能检测内存泄露呢?网上教程非常多,不过很多都是使用Eclipse检测的, 其实1.3版本以后的Android Studio 检测内存非常方便, 如果结合上MAT工具,LeakCanary插件,一切就变得so easy了。 熟悉Android Studio界面 工欲
1256 0
+关注
技术小能手
云栖运营小编~
5946
文章
9
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载