ios - 如何在iOS中如下图所示制作量规 View ？

我看过高更这样的图书馆，但它们并不能解决我的问题。
是否有其他库可以像图片中那样生成仪表视图？
如果没有，那我该怎么办呢？
正如@DonMag指出的。
我试图通过在gaugeekit视图的顶部添加一个视图来对gaugeekit进行更改……但结果并不是很好。
所以我很擅长在两个实际尺寸之间留出空间。
https://imgur.com/Qk1EpcV

最佳答案

我建议您创建自己的自定义视图，这并不难。这是我该怎么做的。为了清楚起见，我遗漏了一些细节，但你可以在评论中看到我对此提出的解决方案。
首先，创建UIVew的子类。我们需要一个属性来跟踪仪表位置。这是你的.h文件。

@interface GaugeView : UIView

@property (nonatomic) CGFloat knobPosition;

@end

接下来，添加实现。GaugeView本身就是一个视图，因此它将用作我们想要的其他部分的容器。我使用了awakeFromNib函数来进行初始化，这样您就可以在故事板中使用该类作为UIView。如果愿意，也可以从init函数进行初始化。
我没有提供中心旋钮的代码，但我建议您只创建一个带有白色光盘（或两个用于制作灰色圆圈）的视图和用于容纳文本部分的标签，然后在下面添加带有灰色指针的图像视图。通过应用旋转变换可以移动指针。

- (void)awakeFromNib {
    [super awakeFromNib];

    // Initialization part could also be placed in init
    [self createSegmentLayers];

    // Add knob views to self
    // :

    // Start somewhere
    self.knobPosition = 0.7;
}

接下来，创建段。此处不添加实际形状，因为它们需要视图的大小。最好推迟到layoutSubviews。

- (void)createSegmentLayers {
    for (NSInteger segment = 0; segment < 10; ++segment) {
        // Create the shape layer and set fixed properties
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];

        // Color can be set differently for each segment
        shapeLayer.strokeColor = [UIColor blueColor].CGColor;
        shapeLayer.lineWidth = 1.0;

        [self.layer addSublayer:shapeLayer];
    }
}

接下来，我们需要对视图的大小更改做出响应。这也是我们创建实际形状的地方。

- (void)layoutSubviews {
    [super layoutSubviews];

    // Dynamically create the segment paths and scale them to the current view width
    NSInteger segment = 0;
    for (CAShapeLayer *layer in self.layer.sublayers) {
        layer.frame = self.layer.bounds;
        layer.path = [self createSegmentPath:segment radius:self.bounds.size.width / 2.0].CGPath;

        // If we should fill or not depends on the knob position
        // Since the knobPosition's range is 0.0..1.0 we can just multiply by 10
        // and compare to the segment number
        layer.fillColor = segment < (_knobPosition * 10) ? layer.strokeColor : nil;

        // Assume we added the segment layers first
        if (++segment >= 10)
            break;
    }

    // Move and size knob images
    // :
}

然后我们需要形状。

- (UIBezierPath *)createSegmentPath:(NSInteger)segment radius:(CGFloat)radius {
    UIBezierPath *path = [UIBezierPath bezierPath];

    // We could also use a table with start and end angles for different segment sizes
    CGFloat startAngle = segment * 21.0 + 180.0 - 12.0;
    CGFloat endAngle = startAngle + 15.0;

    // Draw the path, two arcs and two implicit lines
    [path addArcWithCenter:CGPointMake(radius, radius) radius:0.9 * radius startAngle:DEG2RAD(startAngle) endAngle:DEG2RAD(endAngle) clockwise:YES];
    [path addArcWithCenter:CGPointMake(radius, radius) radius:0.75 * radius startAngle:DEG2RAD(endAngle) endAngle:DEG2RAD(startAngle) clockwise:NO];
    [path closePath];

    return path;
}

最后，我们希望响应对knobPosition属性的更改。调用setNeedsLayout将触发对layoutSubviews的调用。

// Position is 0.0 .. 1.0
- (void)setKnobPosition:(CGFloat)knobPosition {
    // Rotate the knob image to point at the right segment
    // self.knobPointerImageView.transform = CGAffineTransformMakeRotation(DEG2RAD(knobPosition * 207.0 + 180.0));

    _knobPosition = knobPosition;
    [self setNeedsLayout];
}

这就是它现在的样子。添加旋钮，一些颜色和可能不同大小的部分，你就完成了！