简单实现自定义横向滚动选择View

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/c10WTiybQ1Ye3/article/details/78098530

640?wx_fmt=png

今日科技快讯

昨日有人举行记者招待会,实名举报页游运营平台4399大股东蔡文胜涉嫌偷逃国家税款3.6亿元人民币。举报人称4399隐瞒重大事实,意图欺骗上市。而蔡文胜回应称2013年开始全面退出4399的管理层,已不再参与4399之后的所有经营管理活动,而举报的很多事实发生在这之后的。

作者简介

本篇是 哦罢了 的第三篇投稿,分享了自己写得横向滚动View,效果不错,希望大家喜欢。

哦罢了 的博客地址:

http://blog.csdn.net/iamdingruihaha

需求

今日产品经理让在产品里面加了个横向选择的功能,控件样子大致要求为:

640?wx_fmt=png

网上找了好久没找到此控件,只能自己动手写了,很适合新手练习自定义View,并贡献给大家,效果如下:

640?wx_fmt=gif

其实很多滚轮控件也只是这个简单控件组合一下就可以了 。

实现思路

这里我偷懒了,没有把上、左、右三个箭头写到控件里面,写进去也简单,不过突然感觉在外面布局,写个方法出来也是蛮帅的。所以今天我们的主角就是中间的可以横向滑动的部分,乍一看就是个 recycleview,不过这里我没有想过要用 recycleview 来实现,不是不可以,是用 recycleview 的话,各种判断、计算偏移量太多了。

而且需求中要求只是文本,无需加载布局,所以为了节省时间就干脆自定义一个名为 HorizontalselectedView 的 View,宽高无需自己计算,只需在 onDraw() 方法里面把每个String 画出来, 然后监听滑动事件或者点击左右箭头的时候,重走onDraw()方法就可以了,难点在于 onDraw 的时候,每个 String 的坐标如何获得

控件特征

1、中间箭头下面的文字(被选中的文字)颜色和字体和其他的不一样

2、可以横向左右滑动,滑动过程当中,被选中的文字在变化

3、点击左右箭头的时候也可以 实现滚动,从而改变被选中的文字

4、可见区域内,显示的文字数是可以改变的

5、左右滑动的时候有回弹选择效果

根据以上特征,就能得到我们所需要的自定义属性,如下:

640?wx_fmt=png

在构造方法里面初始化画笔和属性:

640?wx_fmt=png

重写onDraw()方法

所有的文字里面,被选中的文字是特殊的,他的大小和颜色不一样,所有我们先把他给画出来,关键点在于要测量文本的宽高,代码如下:

640?wx_fmt=png

下面要做的是就是要遍历集合,把其他的文字给画出来,刚才也提到了,坐标是难点,我们看张图来理一理:

640?wx_fmt=png

其实最巧妙的是得到图中所标注的一个单元的长度anInt,可见区域的长度除以可见个数就得到了 , 还有就是这个 n,给到数据源的时候,我是让数据源集合的长度除以2的,这个可以理解的。然后遍历集合的时候 就可以根据下面得到x的坐标:x=width/2+anInt*(i-n)-textWidth/2,这里面的 textWidth 我们默认他一样长了,但实际情况中,可能会出现三位数,四位数,三个字,四个字,所以在代码中,我是获得被选中文字左右两面长度的平均值得到的

640?wx_fmt=png

接下来就可以在 onDraw() 方法里面遍历了:

640?wx_fmt=png

这样所得到的效果是把strings平铺在了控件上,其实已经有点样子了,下面就是进行滑动监听了。

触屏监听事件

触屏监听,自然而然就是要复写 onTouchEvent 方法了 , 这里的触屏事件还是比较简单的,先贴上代码:

640?wx_fmt=png

奇怪的是,在这里面打 log,只有 down事件 触发,move 和 up 事件触发不了,这就要加上一行代码:

setClickable(true);//使可点击

down 的时候记录下 downX 坐标值,然后 move 时根据 scrollX 和 downX 的大小判断向左还是向右

从而当 scrollX -downX 的绝对值刚好等于 anInt 的时候,n 相应的 加1 或者 减一 , 再进行重绘,继而把此时的 scrollX 赋值给 downX;

这就实现了左右滑动,这个时候,整个文本向右或者向左 一个单元一个单元的移动,这显然不是我们要的效果,我们要的是,滑动的过程当中,文本就跟着手势在动,所以这里面肯定需要个偏移量 offSet;

offset = scrollX - downX;

当移动一个单元长度的时候再把 offset 归零就可以了;所以最终每个文本的x坐标为:

640?wx_fmt=png

这样就基本实现需求了,需要注意的是有几个地方需要加上 n 的大小判断的,不能让他小于0了,或者大于集合长度了,防止越界

对外提供的一些方法

640?wx_fmt=png

经验总结

本篇文章为适合初级程序员学习的典型自定义View,可能很多人看到效果都觉得一头雾水,不知用了什么高大上的东西实现的,其实一步步理下来,就是先展示,再让他动起来,最多就是难在计算坐标而已,模糊的地方我们一定要善于画图去总结,发现里面的规律,最后祝各位工作顺利,幸福美满!

只贴出了部分代码,源码已上传至github:

https://github.com/385841539/HorizontalScrollSelectedView

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

640?wx_fmt=gif

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

640?wx_fmt=jpeg

展开阅读全文

没有更多推荐了,返回首页