使用自定义UISlider制作音频播放进度条

使用自定义UISlider制作音频播放进度条

在项目的需求中需要自定义一个音频播放器的进度条，于是就想到了使用UISlider,但是系统默认的样式无法满足需求，需要进行一些修改。

创建一个AudioProgressView继承UISlider。

UISlider类中有四个方法

// 自定义最小值端的图片大小
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
// 自定义最大值端的图片大小
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;
//改变 slider 的高度，设置 slider 的 frame 并不能修改高度表
- (CGRect)trackRectForBounds:(CGRect)bounds;
// 改变滑块的触摸范围
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;

自定义slider

我们的需求是需要点击进度条进行播放进度的调整，所以使用手势给 slider 添加点击事件

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(actionTapGesture:)];
        _tapGesture.delegate = self;
        [self addGestureRecognizer:_tapGesture];
    }
    return self;
}

- (void)actionTapGesture:(UITapGestureRecognizer *)sender {
    CGPoint touchPoint = [sender locationInView:self];
    CGFloat value = (self.maximumValue - self.minimumValue) * (touchPoint.x / self.frame.size.width );
    [self setValue:value animated:YES];
    // block回调输出点击后的数值
    if (_sliderValueTouchChanged) {
        _sliderValueTouchChanged(value);
    }
}

在控制器中创建进度条

    self.progressView = [[AudioProgressView alloc] initWithFrame:CGRectMake(80, 18, self.view.bounds.size.width - 160, 5)];
    self.progressView.minimumTrackTintColor = [UIColor redColor];
    self.progressView.maximumTrackTintColor = [UIColor lightGrayColor];
// 进度条不需要显示滑块，所以就做一个透明图片
    UIImage *img = [self scaleToSize:[self getImageWithColor:[UIColor clearColor]] size:CGSizeMake(0.5, 0.5)];
    [self.progressView setThumbImage:img forState:UIControlStateNormal];
    __weak typeof(self) weakSelf = self;
    self.progressView.sliderValueTouchChanged = ^(CGFloat value) {
        // silder的改变后的值
    };
    [self.view addSubview:self.progressView];

缩放图片

- (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size {
    // 创建一个bitmap的context
    // 并把它设置成为当前正在使用的context
    UIGraphicsBeginImageContext(size);
    // 绘制改变大小的图片
    [img drawInRect:CGRectMake(0, 0, size.width, size.height)];
    // 从当前context中创建一个改变大小后的图片
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    // 使当前的context出堆栈
    UIGraphicsEndImageContext();
    // 返回新的改变大小后的图片
    return scaledImage;
}

生成纯色图片

- (UIImage *)getImageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

� 类似效果