以自定义仪表样式和令人愉悦的动画显示值

填充一个形状并用颜色来视觉上反映百分比应该很容易

它有很多有用的例子

• 简单的进度条视图
• 星星评级视图
• 情感视图
• 趋势值视图

运行演示

克隆仓库并安装 CocoaPods 依赖项。

$ git clone https://github.com/dulaccc/DPMeterView.git
$ cd DPMeterView/Example
$ pod install
$ open Example.xcworkspace

然后选择正确的活动方案 Example（如果选择了其他方案，如 Pod 或 Pod-DPMeterViewTests），然后您就可以在模拟器或设备上运行应用程序。

使用指南

#import "DPMeterView.h"
#import "UIBezierPath+BasicShapes.h"

DPMeterView *fiveStarsShape = [[DPMeterView alloc] init];
[fiveStarsShape setFrame:CGRectMake(0, 0, 200, 40)];
[fiveStarsShape setMeterType:DPMeterTypeLinearHorizontal];
[fiveStarsShape setShape:[UIBezierPath stars:5 shapeInFrame:fiveStarsShape.bounds].CGPath];

setProgress:animated

[fiveStarsShape setProgress:0.6 animated:YES];

它将使用漂亮的动画更新视图。

自定义形状

不是单个图像像素！

在上面的示例中，我只使用了一个包含在分类 UIBezierPath+BasicShapes 中的 UIBezierPath。您可以随意fork项目并添加其他您认为很棒的形状。

您可以使用任何您想要的形状，类 DPMeterView 使用 CGPath 作为遮罩。

重力感知

要尝试此功能，您需要在一个设备上运行 Example 项目，因为模拟器不提供 CoreMotion 加速度数据。

startGravity

[fiveStarsShape startGravity];

stopGravity

[fiveStarsShape stopGravity];

已知问题

• 请勿在版本 0.0.1 上使用 initWithFrame:，否则不会调用 commonInit 方法。相反，请使用 initWithFrame:shape: 或 init 后再使用 setShape:。
• 从使用 arcsin 计算的 CoreMotion 加速度四元数中获取的 yaw 被限制在区间 [-PI/2, PI/2] 内，这是由 arcsin 的定义限制的。如果我们能找到将其扩展到完整区间 [-PI, PI] 的方法那就更好了，但遗憾的是，我并不是“四元数大师”。
• 对于具有定向角度不是垂直或水平的外向渐变，将出现一些边界问题。特别是在不是100%进度的情况下，即使是 DPMeterView 形状也可能被完全填充...

路线图 / 发展历程

• 拥有能够随着progress值变化而变化的progressTintColor，就像在热图刻度上一样。
• 使用图片而不是CGPath作为蒙版，但不知道如何实现这一点。
• 我想添加一个小工具，使开发者能够直接将形状从.svg文件加载到UIBezierPath中，省去手动创建UIBezierPath的麻烦。（目前的解决方案是使用出色的PaintCode应用程序）

联系方式

Pierre Dulac
@dulaccc

许可

DPMeterView适用于MIT许可证。有关更多信息，请参阅LICENSE文件。