使用For循環在UISlider上繪製線條

Question

我有用於播放視頻的UISlider，我想在我的UISlider中放置紅色的「中斷指示」線，以便在休息時間時直觀地顯示用戶如下圖所示。我的滑塊有一組.duration屬性，而且我有一個包含時間戳的陣列，其中包含視頻暫停休息所需的時間。我仍然得到了iOS的縈繞，所以我不知道如何去描繪UISlider的線條。我希望它看起來與此類似：

在我的研究，我在蘋果文檔閱讀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); 
}