Android 超高仿QQ附近的人搜索展示

如果我有机器猫 我要叫他小叮当 ~开车~~

最近无意中发现了QQ群有查看附近的人的效果,感觉挺棒的,约炮神器有木有!
效果这么酷,网上有没有呢?木有!好吧,作为程序猿还是老老实实苦逼的撸吧。

1.概述

老规矩,先上图,再扯蛋(额,不对…) 这个就是我们撸出来的效果,原谅画质哈 (小米手机miui7不能用小米助手,所以录gif挺麻烦了)

这里写图片描述

这里写图片描述

原装货(就不录制gif了,大家可以自己在Q群助手开启共享地理位置,返回群聊天页面就看到看到附近的人):

20160505094607515

看起来还是挺像的吧。


通过观察,我们可以获取得到如下关系

1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollView来试试)

2.上面的扫描图,肯定是个ViewGroup(因为里面的小圆点是可以点击的,如果是View的话,对于这些小圆点的位置的判断,以及对小圆点缩放动画的处理都会超级麻烦,难以实现),所以我们肯定需要自定义ViewGroup

3.确定好了是自定义ViewGroup后,对于里面需要放什么对象呢?没错,就是N个小圆点+一个扫描的大圈圈。

有了上面的分析,我们基本可以确定我们的项目结构如下了:

20160505003037941

下面将逐个击破,完成最终效果!

二.展示用的viewpager

通过上面的分析,可以确定我们首先需要一个been类 Info

因为我们想要viewpager左右滑动的时候,当滑动速度大于一定值,则可以一次滑动两个item,所以我们需要自定义一个获取速度的ViewPager

最后就是我们的MainAcitivyt中进行相应的设置

在贴出MainAcitivity对应的XML

注意如果我们想要让ViewPager一次显示多个,需要设置其所在 父容器 Android:clipChildren=”false”
意思就是不限制子View在其范围内。
细心的你可能会发现MainAcitivity中有
viewPager.setPageTransformer(true, new ZoomOutPageTransformer());
这个,没错,这个就是用来控制我们的切换动画(我在谷歌官方提供的这个基础上进行了修改,也是很好理解)

完成了上面这些代码,我们的ViewPager就算搞定了

20160505092319642

20160505092328156

三.实现雷达扫描图

代码中也注释得很清楚了,当然因为要扫描,我们需要不停的转动,所以这里我们用到了矩阵变换Matrix,扫描消息的停顿和传递我们用到了Runnable
,如果要是觉得在向主线程一直投递变换的消息对主线程不好,你可以考虑下用SurfaceView来实现

四.完成小圆点的放置

现在我们的扫描图有了,对比发现我们还差啥?没错,就是小圆点

有了小圆点,我们最后只需要把扫描图和小圆点放在一起就好了
因为我们是想变扫描变出现小圆点,所以我们需要在RadarView中定义一个接口IScanningListener,告诉RadarViewGroup我正在扫描,你快让小圆点出现吧
所以在RadarViewGroup的onScanning中需要调用requestLayout();

每次点击雷达图中的小圆点都会告诉ViewPager切换到指定的页面,所以RadarViewGroup中需要定义一个IRadarClickListener,让ViewPager所在的MainAcitivity去实现该接口
完成的效果就是这样了

20160505093231277

五.总结

这里写图片描述

我们最终实现的效果还是挺棒的,通过实战,我们对于自定义View,自定义ViewGroup更加熟练啦~

源码下载

觉得不错,欢迎star 、fork,算是对我的鼓励吧 >.< 如果对我感兴趣,欢迎 follow!

老司机开车结束

1 2 收藏 评论

关于作者:ImmortalZ

简介还没来得及写 :) 个人主页 · 我的文章 · 1 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部