使用For循环在UISlider上绘制线条

Question

我有一个UISlider我用来播放视频，我想把红色＆＃34;中断指示＆＃34;我的UISlider中的行可以在中断时以可视方式显示用户，如下图所示。我的滑块有一个.duration的属性，我有一个充满时间戳的数组，其中包含视频暂停休息所需的时间。我仍然掌握iOS，所以我不知道如何在UISlider上绘制线条。我希望它看起来像这样：

在我的研究中，我已经在Apple Docs中读到UISlider幸运地基于浮点值为滑块坐标提供了一种方法。这是完美的，因为现在我可以根据数组中的时间戳确定滑块中的哪个位置可以绘制黄线，对吧？

所以，我创建了一个for循环来调用方法，并且我（尝试）绘制一条线。

绘制线条部分是我遇到的问题。我一直在阅读Apple网站上的文档和其他问题，但我似乎无法弄清楚绘图逻辑。它绘制得很好，问题是它的坐标都是错误的。它将大部分线条绘制并重叠在一个特定位置，即我视图的左上角。这就是我尝试做的事情：

更新代码与@Bannings答案相关（非常感谢你）。

    - (void)breakStarted:(NSNotification *)notification {

        self.lines = [NSMutableArray new];

        for (int i = 0; i < myArray.count; i++) {
            long long nanoSeconds = [[myArray.adMarkerTimes objectAtIndex:i] floatValue];
            float minutes = nanoSeconds / 60000000000;

            [self sliderThumbCenter:self.scrubberSliderView forValue:minutes];

            NSLog(@"Minute Readings: %f", minutes);
        }
    }

    - (float)sliderThumbCenter:(UISlider *)slider forValue:(float)value {

    CGRect trackRect = [slider trackRectForBounds:slider.bounds];
    CGRect thumbRect = [slider thumbRectForBounds:slider.bounds trackRect:trackRect value:value];
    CGFloat centerThumb = CGRectGetMidX(thumbRect);

    NSLog(@"Center Thumb / Line Placements on slider are: %f", centerThumb);

    [self.lines addObject:@(centerThumb)]; // Added the rect values to an array which we will loop through to draw the lines over the slider

    [self setNeedsDisplay];

    return centerThumb;
}
- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 2);

    for (NSNumber *x in self.lines) {
        CGContextMoveToPoint(context, x.floatValue, 0);
        CGContextAddLineToPoint(context, x.floatValue, rect.size.height);
        CGContextStrokePath(context);
    }
}

我忘了添加：我在循环中手动将CMTimeValue转换为秒。这是myArray.adMarkerTimes的内容。也许我做错了......

Answer 1

您可以覆盖UISlider的drawRect。

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 2);


    CGContextMoveToPoint(context, 20, 0);
    CGContextAddLineToPoint(context, 20, rect.size.height);

    CGContextStrokePath(context);
}

或将UIView插入UISlider。

- (UIView *)lineViewForRect:(CGRect)rect {
    UIView *lineView = [[UIView alloc] initWithFrame:rect];
    lineView.backgroundColor = [UIColor redColor];
    return lineView;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    [slider addSubview:[self lineViewForRect:CGRectMake(20, 0, 2, slider.bounds.size.height)]];
}

您也可以设置lineView.layer.zPosition = 1：

之前：

后：

修改 您可以在一个数组中存储行，并在上下文中绘制每个行 看起来像这样：

// YourSlider.m
- (void)addLineToX:(CGFloat)x {
    [self.lines addObject:@(x)];

    // This will cause drawRect to be called
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetLineWidth(context, 2);

    for (NSNumber *x in self.lines) {
        CGContextMoveToPoint(context, x.floatValue, 0);
        CGContextAddLineToPoint(context, x.floatValue, rect.size.height);
    }

    CGContextStrokePath(context);
}