如何在iOS中的下图中制作仪表视图？

Question

我看过像gaukit这样的库，但它们并没有解决我的问题。是否还有其他库用于制作仪表视图？如果没有，那我该如何解决呢？

正如@DonMag指出的那样。我试图通过在仪表视图顶部添加一个视图来进行仪表套件的更改......但它并没有证明是好的。

所以我坚持在实际规格之间制作空间。

https://imgur.com/Qk1EpcV

Answer 1

我建议你创建自己的自定义视图，这并不困难。我就是这样做的。为清楚起见，我遗漏了一些细节，但您可以在评论中看到我建议的解决方案。

首先，创建一个UIVew的子类。我们需要一个属性来跟踪仪表位置。这进入你的.h文件。

@interface GaugeView : UIView

@property (nonatomic) CGFloat knobPosition;

@end

接下来，添加实现。 GaugeView本身就是一个视图，因此它将被用作我们想要的其他部分的容器。我已经使用awakeFromNib函数进行初始化，因此您可以在Storyboard中将该类用于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];
}

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

Answer 2

基于图像，我看到最简单的解决方案可能是创建12个图像，然后以编程方式交换图像，因为它代表的值增长或缩小。