UIControl for Needle Gauge aka Google O Meter

Question

對於那些UISlider不夠好玩的時候，我想我會設計一個自定義的UIControl來做一些類似谷歌O Meter的東西， iOS版。

下面是我在視覺上討論的一個例子。我的目標是啓用針的觸摸操作，並輕鬆定製範圍標籤和着色漸變。該谷歌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); 

}