iphone - UIControl for a Needle Gauge aka Google O Meter

Question

对于那些 UISlider 不够有趣的时候，我想我会设计一个自定义 UIControl 来做类似于 iOS 上谷歌图表 API 中的谷歌 O Meter 的事情。

这是我在视觉上谈论的一个例子。我的目标是实现针的触摸操作以及范围标签和颜色渐变的轻松定制。Google Charts API 是一个很好的灵感：

在我重新发明轮子之前，是否有人知道现有的努力我可以利用好的示例代码与类似的东西或我也可以贡献的项目？

感谢您的任何指示。

Answer 1

我已经将 GaugeView 实现为 UIView 的子项，并在 drawRect 方法中添加了绘制仪表的代码。没什么花哨的，但可能有助于开始

 - (void)drawRect:(CGRect)rect {

     [super drawRect:rect];
     CGRect parentViewBounds = self.bounds;
     CGFloat x = CGRectGetWidth(parentViewBounds)/2;
     CGFloat y = CGRectGetHeight(parentViewBounds);
     CGFloat radius = y;
     CGFloat percent_angle = _progress * M_PI;

     CGContextRef ctx = UIGraphicsGetCurrentContext();
     CGContextBeginPath(ctx);

     // Add path
     CGFloat m2_x = radius * (1.0 - 0.9*cos(percent_angle));
     CGFloat m2_y = radius * (1.0 - 0.9*sin(percent_angle));      

     CGContextBeginPath(ctx);
     CGContextAddArc(ctx, x, y, radius, M_PI, 0, 0);
     CGContextAddLineToPoint(ctx, x + 0.1*radius, y);
     CGContextAddArc(ctx, x, y, 0.1*radius, 0, M_PI, 1);
     CGContextClosePath(ctx);
     CGContextSetFillColorWithColor(ctx,[UIColor whiteColor].CGColor);
     CGContextFillPath(ctx);

     CGContextBeginPath(ctx);
     CGContextMoveToPoint(ctx, m2_x, m2_y);
     CGContextAddArc(ctx, x, y, 0.9*radius, M_PI + percent_angle, M_PI, 1);
     CGContextAddLineToPoint(ctx, 0.8*radius, y);
     CGContextSetStrokeColorWithColor(ctx,self.fillColor.CGColor);
     CGContextAddArc(ctx, x, y, 0.2*radius, M_PI, M_PI + percent_angle, 0);
     CGContextClosePath(ctx);
     CGContextStrokePath(ctx);

     CGContextBeginPath(ctx);
     CGContextMoveToPoint(ctx, m2_x, m2_y);
     CGContextSetFillColorWithColor(ctx,self.fillColor.CGColor);
     CGContextAddArc(ctx, x, y, 0.9*radius, M_PI + percent_angle, M_PI, 1);
     CGContextAddLineToPoint(ctx, 0.8*radius, y);
     CGContextAddArc(ctx, x, y, 0.2*radius, M_PI, M_PI + percent_angle, 0);
     CGContextClosePath(ctx);
     CGContextFillPath(ctx);

    /* CGContextBeginPath(ctx);
     CGContextAddArc(ctx, x, y, radius, M_PI, 0, 0);
     CGContextAddLineToPoint(ctx, x + 0.1*radius, y);
     CGContextAddArc(ctx, x, y, 0.1*radius, 0, M_PI, 1);
     CGContextClosePath(ctx);
     CGContextSetStrokeColorWithColor(ctx,[self.strokeColor CGColor]);
     CGContextStrokePath(ctx);*/

     for(int i = 0; i < 100; i++)
     {
         CGFloat angle =M_PI * 0.01 * i;
         CGFloat l1_x = radius * (1.0 - 0.98*cos(angle));
         CGFloat l1_y = radius * (1.0 - 0.98*sin(angle));
         if(i%10 == 0)
         {
             l1_x = radius * (1.0 - 0.9*cos(angle));
             l1_y = radius * (1.0 - 0.9*sin(angle));
         }
         else if(i%5 == 0)
         {
             l1_x = radius * (1.0 - 0.95*cos(angle));
             l1_y = radius * (1.0 - 0.95*sin(angle));             
         }

         CGFloat l2_x = radius * (1.0 - cos(angle));
         CGFloat l2_y = radius * (1.0 - sin(angle)); 
         CGContextMoveToPoint(ctx, l1_x, l1_y);
         CGContextSetLineWidth(ctx, 1.0);
         CGContextAddLineToPoint(ctx, l2_x, l2_y);
         CGContextSetStrokeColorWithColor(ctx,[self.strokeColor CGColor]);
         CGContextStrokePath(ctx);
     }

     CGFloat n1_x = radius * (1.0 - 0.1*cos(percent_angle));
     CGFloat n1_y = radius * (1.0 - 0.1*sin(percent_angle));
     CGFloat n2_x = radius * (1.0 - cos(percent_angle));
     CGFloat n2_y = radius * (1.0 - sin(percent_angle)); 
     CGContextMoveToPoint(ctx, n1_x, n1_y);
     CGContextSetLineWidth(ctx, 4.0);
     CGContextAddLineToPoint(ctx, n2_x, n2_y);
     CGContextSetStrokeColorWithColor(ctx,[self.needleColor CGColor]);
     CGContextStrokePath(ctx);

 }