自定义进度条样式

前言：
最近在做和播放器相关的东西。其中涉及的一项就是视频播放的进度条展示。根据需求，我们要实现以下样式的进度条，能够拖拽控制视频的播放进度。
进度条样式：

其实中间的“圆圈进度”是要不断显示进度时间的。

实现办法：
1.除去“开始播放”按钮 和 显示整体时间的Label。要考虑综合的progress。
2.那么好，我的方案如下：
（1）进度条用原生的UIProgressView
（2）在进度条上添加个label显示视频的播放进度，给label添加手势，可改变视频的播放进度。
实现代码：

 //进度条    UIProgressView *progressView = [[UIProgressView alloc]init];    [self.view addSubview:progressView];    [progressView mas_makeConstraints:^(MASConstraintMaker *make) {        make.left.equalTo(beginPlayButton.mas_right).offset(5.0);        make.centerY.equalTo(beginPlayButton.mas_centerY);        make.right.equalTo(wholeTimeLabel.mas_left).offset(-5.0);    }];    progressView.tintColor = [UIColor yellowColor];    progressView.trackTintColor = [[UIColor blackColor]colorWithAlphaComponent:0.4];    self.progress = progressView;    UIView *showView = [[UIView alloc]init];    [progressView.superview addSubview:showView];    [showView mas_makeConstraints:^(MASConstraintMaker *make) {        make.centerY.equalTo(progressView.mas_centerY);        make.width.equalTo(@30);        make.height.equalTo(@30);        make.centerX.equalTo(progressView.mas_left).offset(15);    }];    showView.layer.cornerRadius = 15.0;    self.showView = showView;    UILabel *showLabel = [[UILabel alloc]init];    [showView addSubview:showLabel];    [showLabel mas_makeConstraints:^(MASConstraintMaker *make) {        make.edges.equalTo(showView);    }];    showLabel.layer.cornerRadius = 15;    showLabel.font = [UIFont systemFontOfSize:9.0];    showLabel.backgroundColor = [UIColor colorWithRed:254/255.0 green:254/255.0 blue:254/255.0 alpha:1.0];    showLabel.clipsToBounds = YES;    showLabel.textAlignment = NSTextAlignmentCenter;    self.showLabel = showLabel;    self.showLabel.text = @"00:00";    self.showView.userInteractionEnabled = YES;    self.showLabel.userInteractionEnabled = NO;    self.pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panTheProgressAction:)];    [self.showView addGestureRecognizer:self.pan];    self.pan.enabled = NO;

手势拖动事件：

- (void)panTheProgressAction:(UIPanGestureRecognizer *)panGesture{    [self.playerController pause];    CGFloat centerX;    if (panGesture.state == UIGestureRecognizerStateBegan)    {        NSLog(@"UIGestureRecognizerStateBegan");        NSLog(@"触摸手势开始");        self.currentCenterX = self.showView.center.x - CGRectGetMinX(self.progress.frame);    }    else if (panGesture.state == UIGestureRecognizerStateChanged)    {        NSLog(@"UIGestureRecognizerStateChanged");        centerX = self.currentCenterX + [panGesture translationInView:self.view].x;        NSLog(@"centerX = %f",centerX);        if (centerX < 0.0f) {            centerX = 0.0f;        }        else if (centerX > CGRectGetWidth(self.progress.bounds))        {            centerX = CGRectGetWidth(self.progress.bounds);        }        [self.showView mas_updateConstraints:^(MASConstraintMaker *make)         {             make.centerX.equalTo(self.progress.mas_left).offset(centerX);         }];        [self.progress setProgress: centerX / CGRectGetWidth(self.progress.bounds)];    }    else if (panGesture.state == UIGestureRecognizerStateEnded)    {        NSLog(@"UIGestureRecognizerStateEnded");        CGFloat currentProgress = (CGRectGetMidX(self.showView.frame) - CGRectGetMinX(self.progress.frame)) / CGRectGetWidth(self.progress.bounds);        self.showLabel.text =  [NSString stringWithFormat:@"%02d:%02d",(int)(currentProgress *self.playerController.duration)/60,(int)(self.progress.progress *self.playerController.duration)%60];        [self.playerController seekTo:self.progress.progress * self.playerController.duration];        [self.playerController play];    }}

时时显示播放器的进度。这个要在播放器的代理方法里面实现，我们用的PLPlayerKit.

- (void)videoPlayerController:(PLVideoPlayerController *)playerController positionDidChange:(NSTimeInterval)position{    self.progress.progress = position / self.playerController.duration;    CGFloat width = self.progress.progress * (CGRectGetWidth(self.progress.bounds) - 25);    [self.showView mas_updateConstraints:^(MASConstraintMaker *make)     {         make.centerX.equalTo(self.progress.mas_left).offset(width+15);     }];    self.wholeTimeLabel.text = [NSString stringWithFormat:@"%02d:%02d",(int)((self.playerController.duration)/60),(int)((int)(self.playerController.duration)%60)];    self.showLabel.text = [NSString stringWithFormat:@"%02d:%02d",(int)(self.progress.progress *self.playerController.duration)/60,(int)(self.progress.progress *self.playerController.duration)%60];}

其中要值得注意的是，我们在添加showView的时候，一定要是progress.superView添加。而不是progress添加。否则拖拽事件不灵敏。