前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >目标:双向拖动的自定义View

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

作者头像
非著名程序员
发布2018-02-02 15:37:26
7200
发布2018-02-02 15:37:26
举报
文章被收录于专栏:非著名程序员

国际惯例先预览后实现

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

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

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


实现步骤

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

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

  • 自定义属性获取:

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

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

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


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

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

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

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


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


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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2016-09-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 非著名程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写了这么多重要的还是这个地方源代码下载地址https://github.com/GuoFeilong/ATDragViewDemo
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档