android 按钮图片动画效果,仿Android新版手机QQ底部动态按钮效果

原标题：仿Android新版手机QQ底部动态按钮效果

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

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

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

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

原来每个tab按钮都是由1~2张图片拼在一起的，那我就封装成一个控件，然后仿写第一个按钮好了。

实现原理很简单，继承FrameLayout，添加1~2张图片，在onTouchEvent方法中移动。当然为了实现上述效果，两张图片移动的比例(或者阻尼值)是不同的，而且还要限制两张图片的移动范围。

@ Override

publicboolean onTouchEvent(MotionEvent event) {

floatx = event.getX();

floaty = event.getY();

intaction = event.getAction();

switch(action) {

caseMotionEvent.ACTION_MOVE: {

changeWhenMove(x, y);

returntrue;

}

caseMotionEvent.ACTION_UP: {

restorePosition();

if(isContain( this, event.getRawX(), event.getRawY())) {

setHasClick(!hasClick);

if(OnMenuClickListener != null) {

OnMenuClickListener.onItemClick( this);

}

}

returntrue;

}

}

returntrue;

}

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

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( newQQMenu.OnMenuClickListener() {

@Override

publicvoidonItemClick(View view){

Toast.makeText(MainActivity. this, "Click "+QQMenu.isHasClick(),

Toast.LENGTH_SHORT).show();

}

});

最后贴下github地址，欢迎提交Issues，如果你觉得用的着的话还请点个赞哦。

github：https://github.com/renjianan/QQMenu

大家都在看

欢迎前往安卓巴士博客区投稿，技术成长于分享

期待巴友留言，共同探讨学习返回搜狐，查看更多

责任编辑：