// // HDLOnWaveSeekbar.m // HDL_Widget_iOS // // Created by 陈嘉乐 on 2020/7/2. // Copyright © 2020 JLChen. All rights reserved. // #import "HDLOnWaveSeekbar.h" #import "HDLUtlisXM.h" //#define DEFAULT_WAVE_COLOR HEXCOLOR(0xFD692E) //#define DEFAULT_WAVE_END_COLOR HEXCOLOR(0xFB3140) @interface HDLOnWaveSeekbar () /** 是否正在移动 */ @property (nonatomic, assign) BOOL bTouchMove; /** 进度单位符号 */ @property (nonatomic, strong) NSString *mProgressBarUnitSring; /** 最小值 */ @property (nonatomic, assign) float mMinValue; /** 最大值 */ @property (nonatomic, assign) float mMaxValue; /** 进度渐变颜色数组 */ @property (nonatomic, strong) NSArray *mWaveProgressBarColors; /** 进度渐变颜色数组 */ @property (nonatomic, strong) NSArray *mOfflineProgressBarColors; /** 是否离线 */ @property (nonatomic, assign) BOOL isOffline; /** 是否离线 */ @property (nonatomic, assign) BOOL isShowThumbBtn; @end @implementation HDLOnWaveSeekbar{ int _mMoveCount; CGPoint _mCenterPoint; //圆心坐标 bool _bIsInWaveProgress; CGFloat _mWaveHeight; CGFloat _mWaveWidth; CGFloat _mWaveStartX; CGFloat _mWaveEndX; CGFloat _mThumbBtnStartX; CGFloat _mThumbBtnEndX; float _mPercent; CGFloat _mCurtainY; } -(instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { _isClickable = YES; _mMoveCount = 0; _mProgress = 0; _mPercent = 0; _mMaxValue = 100.0f; _mMinValue = 0.0f; //圆角 _mCornerRadius = 20; //进度文字 _mProgressTextColor = [UIColor blackColor]; _mProgressTextSize = 15; _mProgressBarUnitSring = @"%"; _isProgressTextShow = YES; //拖动按钮 _thumbBtnColor = [UIColor whiteColor]; _thumbBtnHeight = 10; _isShowThumbBtn = YES; //颜色配置 _mWaveBackgroundColor = HEXCOLOR(0xF2F3F7); [self setProgressBarColor:HEXCOLOR(0xFC9C04)]; [self setOfflineProgressBarColor:HEXCOLOR(0xDFE1E6)]; [self refreshFrame]; self.backgroundColor = [UIColor clearColor]; } return self; } /** 刷新布局,更新关键值 */ -(void)refreshFrame{ _mCenterPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2); _mWaveHeight = self.frame.size.height; _mWaveWidth = self.frame.size.width; _mWaveStartX = 0; _mWaveEndX = _mWaveWidth; _mThumbBtnStartX = _mWaveWidth * 3 / 8; _mThumbBtnEndX = _mWaveWidth * 5 / 8; } ///** // 刷新布局,更新关键值 // // */ //-(void)onWaveSizeChange{ // _mWaveHeight = self.frame.size.height; // _mWaveWidth = self.frame.size.width; // _mWaveStartX = 0; // _mWaveEndX = _mWaveWidth; // _mThumbBtnStartX = _mWaveWidth * 3 / 8; // _mThumbBtnEndX = _mWaveWidth * 5 / 8; //} #pragma mark drawRect 绘制图形 -(void)drawRect:(CGRect)rect{ [super drawRect:rect]; CGContextRef ctx = UIGraphicsGetCurrentContext(); //将当前图形状态推入堆栈 CGContextSaveGState(ctx); // //*********绘制边框背景********* // [self drawBorderPath:ctx]; //*********绘制动态的进度条********* [self drawProgressBar:ctx]; //*********绘制拖动按钮********* [self drawThumbBtn:ctx]; //*********绘制显示进度值文字********* [self drawProgressText:ctx]; //把堆栈顶部的状态弹出 CGContextRestoreGState(ctx); } /** 绘制进度条 @param ctx 画布 */ -(void)drawProgressBar:(CGContextRef)ctx{ //*******绘制剪裁限制显示区域********* CGRect drawRect2 = CGRectMake(0, 0 , _mWaveWidth, _mWaveHeight ); UIBezierPath *path2 = [UIBezierPath bezierPathWithRoundedRect:drawRect2 cornerRadius:_mCornerRadius];; CGContextAddPath(ctx, path2.CGPath); // 剪裁路径 CGContextClip(ctx); //*******绘制剪裁限制显示区域********* //绘制背景颜色设置 [_mWaveBackgroundColor set]; CGContextFillRect(ctx, drawRect2); //绘制进度矩形 CGFloat y = _mWaveHeight - _mPercent * _mWaveHeight; _mCurtainY = y; CGContextBeginPath( ctx ); //起点-终点 CGPoint pointsRect[4] = {CGPointMake(_mWaveStartX, _mCurtainY),CGPointMake(_mWaveStartX, _mWaveHeight), CGPointMake(_mWaveEndX,_mWaveHeight),CGPointMake(_mWaveEndX, _mCurtainY)}; CGContextAddLines(ctx, pointsRect, 4); //绘制渐变颜色 [self drawArcWithGradient:ctx rect:drawRect2]; } /** 绘制拖动按钮 @param ctx 画布 */ -(void)drawThumbBtn:(CGContextRef)ctx{ if(_isShowThumbBtn){ //画线 CGContextSetLineWidth(ctx, _thumbBtnHeight); CGContextSetLineCap(ctx, kCGLineCapRound); CGContextSetStrokeColorWithColor(ctx,_thumbBtnColor.CGColor); CGPoint aPoints[2];//坐标点 aPoints[0] =CGPointMake(_mThumbBtnStartX, _mCurtainY);//坐标1 aPoints[1] =CGPointMake(_mThumbBtnEndX, _mCurtainY);//坐标2 //points[]坐标数组,和count大小 CGContextAddLines(ctx, aPoints, 2);//添加线 CGContextStrokePath(ctx); } } /** 绘制进度显示值文字 @param ctx 画布 */ -(void)drawProgressText:(CGContextRef)ctx{ if(_isProgressTextShow){ if(_mPercent > 0.6){ _mProgressTextColor = [UIColor whiteColor]; }else{ _mProgressTextColor = [UIColor blackColor]; } [self drawString:[NSString stringWithFormat:@"%d%@", _mProgress, _mProgressBarUnitSring] outsidePoint:_mCenterPoint]; } } /** drawString 现在当前进度值 @param mText 显示文本 @param outsidePoint 坐标 */ - (void) drawString:(NSString *)mText outsidePoint:(CGPoint)outsidePoint{ NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init]; paragraph.alignment = NSTextAlignmentCenter; NSDictionary *dic = @{NSFontAttributeName : [UIFont systemFontOfSize:_mProgressTextSize], NSForegroundColorAttributeName : _mProgressTextColor, NSParagraphStyleAttributeName : paragraph }; // CGRect textRect = CGRectMake(outsidePoint.x, outsidePoint.y, 80, 20); // [mText drawInRect:textRect withAttributes:dic]; //2019-08-15 修改文字绘制方法,最终实现文本居中效果 CGSize textSize = [mText sizeWithAttributes:dic]; CGPoint textPoint = CGPointMake(outsidePoint.x - textSize.width/2, outsidePoint.y - textSize.height/2);//根据中点坐标绘制 [mText drawAtPoint:textPoint withAttributes:dic]; } /** 绘制渐变效果 */ -(void)drawArcWithGradient:(CGContextRef)ctx rect:(CGRect)rect{ // 创建一个渐变色 // 创建RGB色彩空间,创建这个以后,context里面用的颜色都是用RGB表示 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient; if(_isOffline){ gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)_mOfflineProgressBarColors, NULL); }else{ gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)_mWaveProgressBarColors, NULL); } // 释放色彩空间 CGColorSpaceRelease(colorSpace); colorSpace = NULL; // 剪裁路径 CGContextClip(ctx); // 用渐变色填充 CGContextDrawLinearGradient(ctx, gradient, CGPointMake(rect.origin.x, rect.origin.y), CGPointMake(rect.origin.x+rect.size.width, rect.origin.y+rect.size.height), 0); // 释放渐变色 CGGradientRelease(gradient); gradient = NULL; CGContextRestoreGState(ctx);// 恢复到之前的context CGContextSaveGState(ctx); } ///** // 计算2点坐标之间的距离 // // @param startPoint 起点坐标 // @param endPonit 终点坐标 // @return 距离 // */ //-(float) getTwoPointDistance:(CGPoint)startPoint endPonit:(CGPoint)endPonit{ // CGPoint v = CGPointMake(startPoint.x - endPonit.x, startPoint.y - endPonit.y); // float d = sqrt(SQR(v.x) + SQR(v.y)); // NSLog(@"2点距离:%f ", d); // return d; // //} #pragma mark Touch Event 点击事件 -(BOOL) beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { [super beginTrackingWithTouch:touch withEvent:event]; if(!_isClickable) return YES;//禁止点击 _bTouchMove = NO; _mMoveCount = 0; // CGPoint startPoint = [touch locationInView:self]; // _bIsInArcProgress = [self getStartPointIsInArcProgress:startPoint];//判断开始坐标是否在可点击区域 _bIsInWaveProgress = YES;//不限制点击区域 [self.mProgressChangedDelegate onStartTrackingTouch]; return YES; } -(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{ [super endTrackingWithTouch:touch withEvent:event]; if(!_isClickable) return;//禁止点击 if(!_bTouchMove){//没移动,仅点击 CGPoint lastPoint = [touch locationInView:self]; [self getCurrentProgressWithLastPoint:lastPoint]; [self sendActionsForControlEvents:UIControlEventValueChanged]; } [self.mProgressChangedDelegate onStopTrackingTouch:_mProgress]; } -(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { [super continueTrackingWithTouch:touch withEvent:event]; if(!_isClickable) return YES;//禁止点击 if(_mMoveCount < 2){ _mMoveCount++; }else{ _bTouchMove = YES; //开始移动 } if(_bIsInWaveProgress){//如果刚开始点击的坐标在可点击区域 CGPoint lastPoint = [touch locationInView:self]; [self getCurrentProgressWithLastPoint:lastPoint]; } [self sendActionsForControlEvents:UIControlEventValueChanged]; return YES; } ///** // 判断最后离开坐标是否在可点击区域 // // @param lastPoint 最后的坐标 // */ //-(void)getEndPointIsInArcProgress:(CGPoint)lastPoint { // [self getCurrentProgressWithLastPoint:lastPoint]; //} /** 根据坐标计算出当前进度百分比和对应的进度值 @param point 当前坐标 */ -(void)getCurrentProgressWithLastPoint:(CGPoint)point { _mPercent = (point.y) / _mWaveHeight; if(_mPercent > 1){ _mPercent = 1; }else if(_mPercent < 0){ _mPercent = 0; } _mPercent = 1 - _mPercent; _mProgress = _mPercent * (_mMaxValue - _mMinValue) + _mMinValue; if(_bTouchMove){ [self.mProgressChangedDelegate onProgressChanged:_mProgress]; } [self setNeedsDisplay]; } /** 根据进度值,计算当前 _mProgressAngle值 @param mProgress 进度值 */ -(void)setSeekBarProgressToValue:(int)mProgress{ if(mProgress < _mMinValue){ mProgress = _mMinValue; } if(mProgress > _mMaxValue){ mProgress = _mMaxValue; } _mProgress = mProgress; _mPercent = (_mProgress - _mMinValue) / (_mMaxValue - _mMinValue); // [self.mProgressChangedDelegate onProgressChanged:_mProgress]; } #pragma mark 设置进度条位置 /** 设置进度值 @param mProgress 进度值 */ -(void)setProgress:(int)mProgress{ [self setSeekBarProgressToValue:mProgress]; [self setNeedsDisplay]; } /** 设置进度显示值单位 @param mString 单位字符 */ -(void)setProgressBarUnitSring:(NSString *)mString{ _mProgressBarUnitSring = mString; } /** 设置最大值最小值 @param mMinValue 最小值 @param mMaxValue 最大值 */ -(void)setMinAndMaxValue:(float)mMinValue mMaxValue:(float)mMaxValue{ if(mMinValue < mMaxValue){ _mMinValue = mMinValue; _mMaxValue = mMaxValue; }else{ _mMinValue = mMaxValue; _mMaxValue = mMinValue; } _mProgress = _mMinValue; _mPercent = 0.0f; } /** 重置布局 @param mCGRect 布局 */ -(void)initWithFrameWaveSeekBar:(CGRect) mCGRect{ self.frame = mCGRect; [self refreshFrame]; } /** 设置渐变效果 @param startColor 开始颜色 @param endColor 结束颜色 */ -(void)setProgressBarColors:(UIColor *)startColor endColor:(UIColor*)endColor{ // _mArcProgressBarColors = [NSArray arrayWithObjects(id)startColor.CGColor,(id)endColor.CGColor,nil]; _mWaveProgressBarColors = @[ (id)startColor.CGColor, (id)endColor.CGColor ]; } /** 设置进度条颜色 单一颜色 @param oneColor 单一颜色 */ -(void)setProgressBarColor:(UIColor *)oneColor{ _mWaveProgressBarColors = @[ (id)oneColor.CGColor, (id)oneColor.CGColor ]; } /** 获取高度 Y值 */ -(CGFloat)getProgressY{ return _mCurtainY; } /** 设置是否离线 */ -(void)setOffline:(BOOL)isOffline{ _isOffline = isOffline; _isClickable = !_isOffline; [self setNeedsDisplay]; } /** 设置显示拖动按钮 */ -(void)setThumbBtnShow:(BOOL)isShow{ _isShowThumbBtn = isShow; [self setNeedsDisplay]; } /** 设置离线进度条颜色 单一颜色 @param oneColor 单一颜色 */ -(void)setOfflineProgressBarColor:(UIColor *)oneColor{ _mOfflineProgressBarColors = @[ (id)oneColor.CGColor, (id)oneColor.CGColor ]; } @end