iOS 刻度尺实现

作者: 披萨配可乐 | 来源:发表于2018-07-26 11:11 被阅读616次

前言

最近工作中有个刻度尺的需求,要求:
1、支持整数(一位)、小数
2、最大值和最小值范围控制
3、能支持较大数字精度(如:最大数据10000)

之前由于项目进度,在网上找了个刻度尺,原理是使用drawRect实现刻度尺的绘制,然后根据偏移量来计算当前值。这种方案有以下缺点:
1、数值不能过大。因为采用drawRect方式,每次都是将所有的刻度一次性绘制出来,耗时较长
2、内存占用过大。单个刻度尺在drawRect这种吃内存的方式下,每个刻度尺真机占用约300M以上内存,由于我们这边需求中有血压(舒张压和收缩压)这种需要两个刻度尺的,在iPhone6设备上,如果多次点击刻度视图,导致内存占用超过系统预警内存,而被watchdog直接杀掉了进程

所以我们的目的是自己写一个内存占用小且速度快的刻度尺。

我的方案

由于刻度尺是连续滑动的,所以这里我采用的是使用UICollectionView来实现。好处是显而易见的:
循环利用cell来布局刻度尺,速度快,内存占用小,样式更好控制。

目前实现方案中,支持水平和垂直方向,支持滑动选中,支持样式自定义,具体参考如下图: 实现效果图

上图是在模拟器中运行,一个控制器中添加4个,整个工程运行占用45M内存,已经达到了我们的目的。

实现代码

为了满足多种方案,所以在刻度尺拥有许多自定义参数:


自定义属性

参数说明:


参数说明
说明:
  • 顶部距离即刻度尺的起始位置

  • 刻度尺的方向由numberDirection属性决定,枚举值如下:

    刻度尺方向
  • 该刻度尺最多支持一位小数,小数由isDecimal决定

  • selectionEnableYES 时,刻度尺在滑动停止后,自动选中数字

  • 如当前布局不能满足需求时,可以在 RulerCollectionViewCell 文件中修改刻度尺的布局

以上为此刻度尺的实现方案和说明,demo在这里。
如有错误或疑问,欢迎在评论区指正😁

相关文章

  • iOS 刻度尺实现

    前言 最近工作中有个刻度尺的需求,要求:1、支持整数(一位)、小数2、最大值和最小值范围控制3、能支持较大数字精度...

  • Android自定义View之滑动刻度尺

    纵向滑动刻度尺 横向滑动刻度尺 实现思路:onDraw方法中画出整个刻度尺和指针。重写onTouchEvent,根...

  • ios:利用Slider实现刻度尺效果

    需求:实现一个带刻度尺的滑竿UI 实现方案:重写Slider 利用画布原理,重绘画布上的UI,添加刻度尺的方法,实...

  • iOS-刻度尺实现,画图的可怕!

    FanDrage(iOS实现一个可以自由缩放,移动的刻度尺) 最近公司需要做一个画曲线的坐标轴,动画在坐标轴上运动...

  • Android自定义滑动刻度尺

    一 基础: 自定义View实现跟随手指滚动的刻度尺,实现了类似SeekBar的滑动选中效果。项目地址,欢迎star...

  • 旋转弧形刻度尺的实现

    转载请注明出处:https://www.jianshu.com/p/613c81c47537弧形刻度尺的实现,依照...

  • 微信小程序插件

    刻度尺组件:https://www.jianshu.com/p/0bf4289a1605 问:微信小程序怎么实现地...

  • Android 进度控件

    Android 进度控件 Android 圆形、半圆形进度效果、半圆SeekBar、刻度尺效果实现代码下载:Git...

  • Android滚动刻度尺实现

    缘起 最近在帮人做一个计步器,其中涉及到身高、体重等信息的采集;我参考了众多app的实现,觉得"乐动力"中滑动刻度...

  • 简单刻度尺的实现

    在新的开发版本中,遇到一个这样的需要,实现一个类似刻度尺的样式,UI如下:第一眼看到这个需求的时候,我的第一感觉,...

网友评论

  • RunLoop:您还可以添加渐变方向,如水平,垂直渐变等
    RunLoop:@披萨配可乐 我自己手动改你源码添加的,不错您确实可以添加新功能,丰富点:smile:
    披萨配可乐:不错的建议:smile:
  • 8c463753807b:这个可以设置一个大刻度间的小刻度吗?比如现在是10个小刻度为一个大刻度,现在想修改成2~3个小刻度为一个大刻度
    披萨配可乐:可以的,需要修改下cell中的刻度尺规则就好了
  • f6c961e467f7:竖直尺子,如果要改上面大数字、下面小数字,有没有property可以直接设置?没有的话,要怎么修改?
    谢谢
    披萨配可乐:@James_tang 我明白你的意思了,我更新了仓库的代码,新增了一个reverse属性。你可以在github上浏览代码,看我改动了哪些地方,感谢支持
    f6c961e467f7:@披萨配可乐 您误会我的问题啦。比如尺子刻度从1-100,现在尺子上面是小数,下面是大数,我要改成下面小,上面大。要怎么修改?
    披萨配可乐:numberFont属性是控制小数字的字体哦

本文标题:iOS 刻度尺实现

本文链接:https://www.haomeiwen.com/subject/avivmftx.html