365bet体育|www.635288com-365体育手机在线

热门关键词: 365bet体育,www.635288com,365体育手机在线

原来每个tab按钮都是由1

2020-03-17 作者:365bet体育   |   浏览(134)

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

图片 1hdssh.gif

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

图片 2hdsxxxsh.gif

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

图片 3image.png

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

图片 4image.png

原来每个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  { case MotionEvent.ACTION_MOVE: { changeWhenMove; return true; } case MotionEvent.ACTION_UP: { restorePosition(); if (isContain(this, event.getRawX(), event.getRawY { setHasClick(!hasClick); if (OnMenuClickListener != null) { OnMenuClickListener.onItemClick; } } return true; } } return true;}

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

 <com.renny.qqmenu.QQMenu android: 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,如果你觉得用的着的话还请点个赞哦。

本文由365bet体育发布于365bet体育,转载请注明出处:原来每个tab按钮都是由1

关键词: 新版 按钮 动态

365bet体育推荐