Я предлагаю вам создать свой собственный вид, это не так сложно. Вот как бы я это сделал. Я оставил некоторые детали для ясности, но вы можете увидеть в комментариях мои предлагаемые решения для этого.
Сначала создайте подкласс 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];
}
Вот так это будет выглядеть сейчас. Добавьте ручку, несколько цветов и, возможно, сегменты разных размеров, и все готово!
