iOS利用UIView自定义播放器进度条

最新推荐文章于 2024-08-31 07:18:45 发布
置顶 最新推荐文章于 2024-08-31 07:18:45 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： iOS 文章标签： iOS自定义进度条 iOS自定义UISlider iOS自定义播放器进度条 播放器进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RockWG/article/details/101026465
版权

前段时间做项目遇到播放器自定义进度条的需求，刚开始想的是继承自系统的UISlider去做，内部重写系统方法完成样式定制。后来遇到头疼的问题，在iphone6、7手机上样式显示正常，遇到plus手机进度条样式显示有问题，缓存进度跟最底部的进度高度不匹配，有偏移，调了很多次，都以徒劳告终，后来没办法，自己自定义了一套进度条的实现方案，配合iOS自有手势操作，完成基本功能操作。下面介绍下自定义实现类：

这块功能主要涉及到两个类文件，ZTCSlider，ZTCProgressView：

一、ZTCSlider类，负责进度条交互操作、进度条变化

 ZTCSlider.h，介绍初始化方法，及相关操作回调，返回进度值；播放进度、缓存进度可通过外部调用setter方法传入

#import <UIKit/UIKit.h>

/**
 获取滑动进度回调

 @param value 滑动进度
 */
typedef void (^MGBroadcastGetSlideValueHandler)(CGFloat value);

/**
 开始拖动进度块回调
 */
typedef void (^MGBroadcastSliderPanBeginHandler)(void);

/**
 结束拖动进度块回调

 @param value 进度值
 */
typedef void (^MGBroadcastSliderPanEndHandler)(CGFloat value);


/**
 点击进度条某一部分

 @param value 进度值
 */
typedef void (^MGBroadcastSliderTapSliderHandler)(CGFloat value);

@interface ZTCSlider : UIView

/**
 滑条初始化方法

 @param sliderWidth 滑块宽度
 @param sliderColor 滑块颜色
 @param progressHeight 进度条高度
 @param progressBgColor 进度套背景色
 @param progressPlayedColor 进度条播放后的颜色
 @param progressCachedColor 进度条缓存的颜色
 @param isShowCorner 是否设置进度条圆角效果
 */
- (instancetype)initWithSliderWidth:(CGFloat)sliderWidth
                        sliderColor:(UIColor *)sliderColor
                     progressHeight:(CGFloat)progressHeight
                    progressBgColor:(UIColor *)progressBgColor
                progressPlayedColor:(UIColor *)progressPlayedColor
                 progressCachedColor:(UIColor *)progressCachedColor
                         showCorner:(BOOL)isShowCorner;

///播放值
@property (nonatomic, assign) CGFloat slideValue;

///缓存值
@property (nonatomic, assign) CGFloat cacheValue;

/**
 开始拖动的操作
 */
@property (nonatomic, copy) MGBroadcastSliderPanBeginHandler panBeginHandler;

/**
 结束拖动的操作
 */
@property (nonatomic, copy) MGBroadcastSliderPanEndHandler panEndHandler;

/**
 获取进度值
 */
@property (nonatomic, copy) MGBroadcastGetSlideValueHandler getSlideValueHandler;

/**
 点击进度条某个部分的操作
 */
@property (nonatomic, copy) MGBroadcastSliderTapSliderHandler tapSliderHandler;

@end

ZTCSlider.m

#import "ZTCSlider.h"
#import "ZTCProgressView.h"

@interface ZTCSlider()

///滑块
@property (nonatomic, strong) UIView *sliderView;

///h进度条
@property (nonatomic, strong) ZTCProgressView *progressView;

@property (nonatomic, strong) UIPanGestureRecognizer *panGesture;

@property (nonatomic, strong) UITapGestureRecognizer *tapGesture;

@property (nonatomic, assign) CGFloat sliderWidth;

@property (nonatomic, strong) UIColor *sliderColor;

@property (nonatomic, assign) CGFloat progressHeight;

@property (nonatomic, strong) UIColor *progressBgColor;

@property (nonatomic, strong) UIColor *progressPlayedColor;

@property (nonatomic, strong) UIColor *progressCachedColor;

@property (nonatomic, assign) BOOL isShowCorner;

@end

@implementation ZTCSlider

- (instancetype)initWithSliderWidth:(CGFloat)sliderWidth
                        sliderColor:(UIColor *)sliderColor
                     progressHeight:(CGFloat)progressHeight
                    progressBgColor:(UIColor *)progressBgColor
                progressPlayedColor:(UIColor *)progressPlayedColor
                progressCachedColor:(UIColor *)progressCachedColor
                       showCorner:(BOOL)isShowCorner {
    self = [super init];
    if (self) {
        _sliderWidth = sliderWidth;
        _sliderColor = sliderColor;
        _progressHeight = progressHeight;
        _progressBgColor = progressBgColor;
        _progressPlayedColor = progressPlayedColor;
        _progressCachedColor = progressCachedColor;
        _isShowCorner = isShowCorner;
        [self setUpUI];
    }
    return self;
}

- (void)setUpUI {
    [self addSubview:self.progressView];
    [self addSubview:self.sliderView];
    self.userInteractionEnabled = YES;
    [self addGestureRecognizer:self.panGesture];
    [self addGestureRecognizer:self.tapGesture];
}

- (void)setSlideValue:(CGFloat)slideValue {
    if (_slideValue != slideValue) {
        _slideValue = slideValue;
        CGRect frame = self.sliderView.frame;
        frame.origin.x = _slideValue *(CGRectGetWidth(self.bounds) - CGRectGetWidth(self.sliderView.bounds));
        self.progressView.playValue = _slideValue;
    }
}

- (void)setCacheValue:(CGFloat)cacheValue {
    if (_cacheValue != cacheValue) {
        _cacheValue = cacheValue;
        self.progressView.cacheValue = cacheValue;
    }
}

- (void)tapGesture:(UITapGestureRecognizer *)tap {
    CGPoint point = [tap locationInView:tap.view];
    
    if (point.x <= _sliderWidth / 2) {
        point.x = _sliderWidth / 2;
    }
    
    if (point.x > CGRectGetWidth(self.bounds) - _sliderWidth / 2) {
        point.x = CGRectGetWidth(self.bounds) - _sliderWidth / 2;
    }
    
    CGPoint center = self.sliderView.center;
    center.x = point.x;
    self.sliderView.center = center;
    
    CGRect frame = self.sliderView.frame;
    
    CGFloat value =  frame.origin.x / (CGRectGetWidth(self.bounds) - CGRectGetWidth(self.sliderView.bounds));
    
    self.progressView.playValue = value;
    if (self.tapSliderHandler) {
        self.tapSliderHandler(value);
    }
}

- (void)panGesture:(UIPanGestureRecognizer *)pan {
    //移动的距离
    CGPoint point = [pan translationInView:pan.view];
    CGRect frame = self.sliderView.frame;
    frame.origin.x += point.x;
    
    if (frame.origin.x + CGRectGetWidth(frame) >= CGRectGetWidth(self.bounds)) {
        frame.origin.x = CGRectGetWidth(self.bounds) - CGRectGetWidth(frame);
    }
    
    if (frame.origin.x <= 0) {
        frame.origin.x = 0;
    }
    self.sliderView.frame = frame;

    if (pan.state == UIGestureRecognizerStateBegan) {
        if (self.panBeginHandler) {
            self.panBeginHandler();
        }
    }
    
    CGFloat value =  frame.origin.x / (CGRectGetWidth(self.bounds) - CGRectGetWidth(frame));
    
    self.progressView.playValue = value;
    if (self.getSlideValueHandler) {
        self.getSlideValueHandler(value);
    }
    
    if (pan.state == UIGestureRecognizerStateEnded) {
        if (self.panEndHandler) {
            self.panEndHandler(value);
        }
    }
    [pan setTranslation:CGPointZero inView:pan.view];
}

-(void)layoutSubviews {
    [super layoutSubviews];
    _progressView.frame = CGRectMake(0, (CGRectGetHeight(self.frame) - _progressHeight) * 0.5, CGRectGetWidth(self.frame), _progressHeight);
    _progressView.layer.cornerRadius = _isShowCorner ? _progressHeight * 0.5 : 0;
    _sliderView.frame = CGRectMake(0, (CGRectGetHeight(self.frame) - _sliderWidth) / 2, _sliderWidth, _sliderWidth);
}

- (ZTCProgressView *)progressView {
    if (!_progressView) {
        _progressView = [[ZTCProgressView alloc] initWithProgressBgColor:_progressBgColor
                                                             progressPlayedColor:_progressPlayedColor
                                                             progressCachedColor:_progressCachedColor];
        _progressView.clipsToBounds = YES;
    }
    return _progressView;
}

- (UIPanGestureRecognizer *)panGesture {
    if (!_panGesture) {
        _panGesture =[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGesture:)];
    }
    return _panGesture;
}

- (UITapGestureRecognizer *)tapGesture {
    if (!_tapGesture) {
        _tapGesture =[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGesture:)];
        _tapGesture.numberOfTapsRequired = 1;
    }
    return _tapGesture;
}

- (UIView *)sliderView {
    if (!_sliderView) {
        _sliderView =[[UIView alloc] init];
        _sliderView.backgroundColor = _sliderColor ?: [UIColor whiteColor];
        _sliderView.layer.cornerRadius = _sliderWidth * 0.5;
        _sliderView.clipsToBounds = YES;
        _sliderView.layer.shadowOpacity = 0.8;
        _sliderView.layer.shadowOffset = CGSizeMake(0, 2);
        _sliderView.layer.shadowColor = [UIColor blackColor].CGColor;
    }
    return _sliderView;
}

@end

二、ZTCProgressView，负责进度条的显示样式

ZTCProgressView.h

#import <UIKit/UIKit.h>

@interface ZTCProgressView : UIView

/**
 设置进度条样式

 @param progressBgColor 进度条背景色，最底部
 @param progressPlayedColor 进度条已经播放的颜色
 @param progressCachedColor 视频已缓存部分的颜色
 */
- (instancetype)initWithProgressBgColor:(UIColor *)progressBgColor
                    progressPlayedColor:(UIColor *)progressPlayedColor
                    progressCachedColor:(UIColor *)progressCachedColor;


///播放进度
@property (nonatomic, assign) CGFloat playValue;

///加载进度
@property (nonatomic, assign) CGFloat cacheValue;

@end

ZTCProgressView.m

#import "ZTCProgressView.h"

@interface ZTCProgressView()

@property (nonatomic, strong) UIView *cacheView;

@property (nonatomic, strong) UIView *playProgressView;

@property (nonatomic, strong) UIColor *progressBgColor;

@property (nonatomic, strong) UIColor *progressPlayedColor;

@property (nonatomic, strong) UIColor *progressCachedColor;

@end

@implementation ZTCProgressView

- (instancetype)initWithProgressBgColor:(UIColor *)progressBgColor
                    progressPlayedColor:(UIColor *)progressPlayedColor
                    progressCachedColor:(UIColor *)progressCachedColor {
    self = [super init];
    if (self) {
        _progressBgColor = progressBgColor;
        _progressPlayedColor = progressPlayedColor;
        _progressCachedColor = progressCachedColor;
        [self setUpUI];
    }
    return self;
}

- (void)setUpUI {
    self.backgroundColor = _progressBgColor;
    [self addSubview:self.cacheView];
    [self addSubview:self.playProgressView];
}

- (void)setPlayValue:(CGFloat)playValue {
    _playValue = playValue;
    CGRect frame = self.playProgressView.frame;
    frame.size.width = playValue * CGRectGetWidth(self.bounds);
    self.playProgressView.frame = frame;
}

- (void)setCacheValue:(CGFloat)cacheValue {
    _cacheValue = cacheValue;
    CGRect frame = self.cacheView.frame;
    frame.size.width = cacheValue * CGRectGetWidth(self.bounds);;
    self.cacheView.frame = frame;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    self.playProgressView.frame = CGRectMake(0, 0, _playValue * CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds));
    self.cacheView.frame = CGRectMake(0, 0, _cacheValue * CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds));
}

- (UIView *)cacheView {
    if (!_cacheView) {
        _cacheView = [[UIView alloc] init];
        _cacheView.backgroundColor = _progressCachedColor;
    }
    return _cacheView;
}

- (UIView *)playProgressView {
    if (!_playProgressView) {
        _playProgressView =[[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, self.bounds.size.height)];
        _playProgressView.backgroundColor = _progressPlayedColor;
    }
    return _playProgressView;
}

@end

三、ZTCSlider实现调用:

ZTCSlider *slider = [[ZTCSlider alloc] initWithSliderWidth:25 sliderColor:[UIColor whiteColor] progressHeight:5 progressBgColor:[UIColor darkGrayColor] progressPlayedColor:[UIColor blueColor] progressCachedColor:[UIColor lightGrayColor] showCorner:YES];
    
    [slider setPanBeginHandler:^{
        NSLog(@"开始拖动");
    }];
    
    [slider setTapSliderHandler:^(CGFloat value) {
        NSLog(@"点击位置：%f", value);
    }];
    
    [slider setGetSlideValueHandler:^(CGFloat value) {
        NSLog(@"获取进度：%f", value);
    }];
    
    [slider setPanEndHandler:^(CGFloat value) {
        NSLog(@"拖动结束位置：%f", value);
    }];
    
    slider.frame = CGRectMake(50, 200, 275, 35);
    slider.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:slider];

注：实际开发中，进度条大多会跟播放器同步使用，ZTCSlider类中的进度条操作回调传值可用来控制播放器的进度。

显示效果：

说明：这里的橙色是创建的slider的实际大小，所以对于系统的UISlider手势操作范围小的问题，也完美的解决了；蓝色是已经播放的进度，深灰色是背景颜色，缓存进度由于我这里没有嵌入播放器，没有展示出来。可根据需要嵌入播放器中来加载显示缓存进度。

cloud_sky_z
关注
专栏目录
iOS 自定义进度条
搬砖
12-12 607
经常会遇到需要自定义进度条的需要，那么使用以下的小demo可以实现 .m文件 #import “GGProgressView.h” @interface GGProgressView() { UIView *_progressView; float _progress; float _width; float _heigth; } @end @implementation GGProgressVi...
iOS绘制 - 自定义制作进度条
chinnyman的博客
04-07 3107
I. ProgressView的类ProgressView.h #import <UIKit/UIKit.h>@interface ProgressView : UIView@property (nonatomic, assign) CGFloat progress;@end ProgressView.m #import "ProgressView.h"@interface ProgressView
ios-自定义进度条封装 简单易用.zip
07-11
可以根据自己需求设置进度条的背景颜色或者图片，还有左侧进度的背景颜色或者图片，进度数字的大小颜色，调用一个设置present的方法即可改变进度，跟系统的一样简单易用
iOS-CircleProgressView 使用教程
最新发布
gitblog_01167的博客
08-31 1029
iOS-CircleProgressView 使用教程 项目地址:https://gitcode.com/gh_mirrors/io/iOS-CircleProgressView 项目介绍 iOS-CircleProgressView 是一个用于在 iOS 应用中创建圆形进度条的开源库。它基于 UIKit 框架，提供了简单易用的接口来定制和显示进度条。该库支持自定义颜色、动画效果以及进度更新，适用...
iOS 自定义步骤进度条
weixin_34082854的博客
12-14 264
新项目要做入驻功能,其中包括一个入住流程,类似登录或者注册流程如下图。 之前想着用自己绘图来做,可是又懒不想多写代码，所以就想着能不能用进度条来做。 1.用进度条做的首先要解决的是进度条的高度问题,可以通过仿射变换来扩大高度。 progressView.transform = CGAffineTransformMakeScale(1.0f,2.0f); 2.用进度条要设置进度p...
iOS如何自定义步骤进度条实例详解
08-26
在iOS开发中，自定义步骤进度条是一种常见的需求，它能直观地展示用户完成某项任务的进度。本文将深入探讨如何在iOS中创建自定义的步骤进度条，并通过具体的代码示例帮助开发者理解实现过程。 首先，我们需要解决...
iOS自定义水平滚动条、进度条
08-26
iOS自定义水平滚动条、进度条 iOS自定义水平滚动条、进度条是iOS应用程序中非常重要的UI组件之一。滚动条和进度条可以用来显示进度、进度、评分等信息，今天我们将详细介绍如何自定义水平滚动条和进度条。 首先，...
ios 自定义下载进度条
06-04
完成自定义进度条的开发后，需要在多种设备和iOS版本上进行测试，确保兼容性和性能。可能需要对动画性能进行优化，比如使用CADisplayLink或定时器来更精确地控制动画帧率。 以上就是关于“ios自定义下载进度条”的...
一款自定义圆形进度条效果
04-01
1. **自定义视图**：这个库创建了一个自定义的UIView子类，专门用于实现圆形进度条。在iOS中，自定义视图允许开发者根据需求扩展基础视图的功能，实现独特的视觉效果。 2. **属性定制**：源码中提供了多种属性来...
ios 自定义进度条
12-30
自定义进度条
iOS实现音频进度条效果
08-26
主要介绍了ios实现音频进度条效果,本文写了一个小demo通过实例代码相结合的形式给大家详细介绍，需要的朋友可以参考下
iPhone之实现自定义进度条Progress
08-05
iPhone之实现自定义进度条Progress
swift-一个简单的下载进度条可自定义线宽颜色等等
08-15
一个简单的下载进度条，可自定义线宽颜色等等
iOS 自定义进度条 MDRadialProgress
WriteOnRead
12-06 829
这两天接触到了进度条（其实很早就看到了，只是当时视而不见，如今需要在这个地方做改动了，才去详细了解）。
ios自定义条形进度条
代码小疯子
06-30 4847
题记 在今天这个变化多端的世界，我们最大的危险不是外界的压力与竞争，而是我们内心的模式，这些模式决定我们看到些什么，感受到些什么，如何思考以及最终成为怎么样的人 效果 代码实现 #import &amp;lt;UIKit/UIKit.h&amp;gt; @interface HWProgressView : UIView @property (nonatomic, assign) CGFl...
iOS 自定义抖音效果进度条实现拖拽修改播放进度
liubo的博客
07-08 2103
在整个进度条视图上添加拖拽手势 ，根据手势所在的位置参数转换成宽度比例，实现修改播放进度这里关键用到了手势的这个接口 *- (CGPoint)locationInView:(nullable UIView)view; ** 计算出手势的进度 和占的宽度比例 完整代码 这里为了方便，将两个类放到同一个文件当 .h .m.........
iOS快速创建环形渐变进度条教程
这可以通过自定义一个UIView子类，比如名为CycleView，并重写其`drawRect:`方法来完成。在这个方法里，我们需要获取当前图形上下文（CGContextRef），设定圆心位置、半径以及起始和结束的角度。然后，我们可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值