目标:双向拖动的自定义View

国际惯例先预览后实现

我们要实现的就是一个段位样式的拖动条,用来做筛选条件用的, 细心的朋友可能会发现微信设置里面有个一个通用字体的设置, 拖动然后改变字体大小;

这个相对比微信那个的自定义view算是一个扩展,因为我们是双向滑动,这个多考虑的一点就是手指拖动的是哪一个滑动块!

我们先看下GIF预览,然后我们今天就一步步实现这个小玩意…


实现步骤

  • 自定义属性的抽取
  • view尺寸的计算
  • 相关内容的绘制(文字,原点,背景进度条,当前进度条等等)
  • 处理滑动事件

大体思路分四部分;我们一步步来;简单的就一部带过了

  • 自定义属性获取:

拿到我们设置的属性后,初始化我们需要的工具,比如画笔,等

  • 确定自定义view尺寸
  • 绘制相关的内容部分, 这里我们分析效果图发现,需要绘制五部分,两个圆,两个进度条一个 一堆文字,我们根据计算出来的view尺寸以及UI给的比例,即可绘制出来他们这个就是canvas的API使用

具体的文字绘制,是根据外界传入的数据来绘制的所以细节如下


这个View的核心部分不是绘制,而是计算,描述下我们具体的确定位置的思路

  1. 根据外界传入的数据集合平均分view的宽度,求得平均一份的宽度大小
  2. 然后循环数据集合根据平均一份的宽度,确定没个文字所在的坐标值

然后我们看下计算的代码:

这个方法可以说是最重要的一个了,


核心的代码全部完毕了,我们看下onTouch里面的处理


大部分的核心的代码就这么多,然后剩下的view写完了就该把回调借口透出给UI 完活了…..

写了这么多重要的还是这个地方源代码下载地址https://github.com/GuoFeilong/ATDragViewDemo

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-09-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

一个类似于进度和打卡进度的自定义view

一个类似于进度和打卡进度的自定义view ---- 如下图: ? 看GIF岂不是更好 ? ---- 这个view在现在的app中挺常见的,基本都是这个套路, -...

21980
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

21830
来自专栏小灰灰

Css实战训练之图片点击放大

Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片 那么这个功能是怎么...

1K40
来自专栏熊二哥

Html与CSS快速入门02-HTML基础应用

这部分是html细节知识的学习。 ? 示例代码:https://github.com/wanliwang/Bjork.Demo htmlDemo 最近胡乱删除...

38060
来自专栏Guangdong Qi

iOS开发常用之图像浏览及处理

28350
来自专栏生信宝典

WB图片处理-教你利用PPT做出漂亮的WB图片!

WB是很科研多小伙伴都会用到的实验技术,而对于最终WB图片的处理也是各自有各自的手段,不过主流主要分为两大派:PPT或者Adobe Photoshop/Illu...

2.1K20
来自专栏知无涯

PS给照片换背景的小技巧[易学易用]

504170
来自专栏我分享我快乐

响应式jquery小效果实现思路

有很多同学在实现jquery效果时,不知道怎样符合响应式布局。我写了个小案例,帮大家找找思路,希望能帮到你。 效果如下: ? 代码如下: <!doct...

395110
来自专栏小樱的经验随笔

关于前端的photoshop初探的学习笔记

写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来。 温馨提示:比较乱,写给自...

30560
来自专栏BestSDK

shift键在Excel中,还有这10种变态玩法?

电脑键盘上有很多「瑞士军刀」似的按键,掌握这些按键的使用技巧,你让你在Excel操作中,如虎添翼。 SHIFT键就是其中之一。 Excel中的技巧有很多,基本都...

42870

扫码关注云+社区

领取腾讯云代金券