iOS绘制渐变背景滑动条
2015-10-20 22:01
225 查看
欢迎到个人博客: liumh.com查看本文。
本文记录的是如何绘制一个背景颜色渐变的滑动条,最终的效果如下图:
绘制渐变背景这里用到了CAGradientLayer和CALayer的mask,首先使用两个CAGradientLayer绘制如下的背景:
代码如下:
然后绘制maskLayer,可使用UIShapeLayer+UIBezierPath组合绘制规则图形的maskLayer,如下代码所示:
mask 的作用是将maskLayer层不透明像素覆盖的底层显示出来,而不被不透明像素覆盖的底层则隐藏,添加mask后效果如下所示:
绘制滑动条肯定有个滑动块handler,这里使用CALayer实现,代码如下:
最后控制滑动块在制定的轨道上活动,首先控制手指触摸事件的响应范围,重载UIView的
其次,限定滑动块在轨道的范围内滑动,重载UIControl的事件函数
如下所示:
所有的代码在ios绘制渐变背景滑动条可以下载。
本文参考:
iOS实现一个颜色渐变的弧形进度条
如果觉得本文对你有帮助,就请用微信打赏我吧^_^
本文记录的是如何绘制一个背景颜色渐变的滑动条,最终的效果如下图:
绘制渐变背景这里用到了CAGradientLayer和CALayer的mask,首先使用两个CAGradientLayer绘制如下的背景:
代码如下:
_bgLayer = [CALayer layer]; _bgLayer.bounds = CGRectMake(0, 0, CGRectGetWidth(self.bounds) - LS_HANDLE_RADIUS * 2, CGRectGetHeight(self.bounds) - LS_HANDLE_RADIUS * 2); _bgLayer.position = self.centerPoint; [self.layer addSublayer:_bgLayer]; CGColorRef topLeftColor = [UIColor blackColor].CGColor; CGColorRef bottomColor = [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:1].CGColor; CGColorRef topRightColor = [UIColor whiteColor].CGColor; CAGradientLayer *leftGradientLayer = [CAGradientLayer layer]; leftGradientLayer.frame = CGRectMake(0, 0, CGRectGetWidth(_bgLayer.bounds)/2, CGRectGetHeight(_bgLayer.bounds)); leftGradientLayer.colors = @[(__bridge id)topLeftColor, (__bridge id)bottomColor]; leftGradientLayer.startPoint = CGPointMake(0.5, 0); leftGradientLayer.endPoint = CGPointMake(0.5, 1); [_bgLayer addSublayer:leftGradientLayer]; CAGradientLayer *rightGradientLayer = [CAGradientLayer layer]; rightGradientLayer.frame = CGRectMake(CGRectGetWidth(_bgLayer.bounds)/2, 0, CGRectGetWidth(_bgLayer.bounds)/2, CGRectGetHeight(_bgLayer.bounds)); rightGradientLayer.colors = @[(__bridge id)bottomColor, (__bridge id)topRightColor]; rightGradientLayer.startPoint = CGPointMake(0.5, 1); rightGradientLayer.endPoint = CGPointMake(0.5, 0); [_bgLayer addSublayer:rightGradientLayer];
然后绘制maskLayer,可使用UIShapeLayer+UIBezierPath组合绘制规则图形的maskLayer,如下代码所示:
CGPoint circleCenterPoint = CGPointMake(CGRectGetWidth(_bgLayer.bounds)/2, CGRectGetHeight(_bgLayer.bounds)/2); CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.position = circleCenterPoint; maskLayer.bounds = _bgLayer.bounds; maskLayer.fillColor = [UIColor clearColor].CGColor; maskLayer.strokeColor = [UIColor redColor].CGColor; maskLayer.lineCap = kCALineCapRound; maskLayer.lineWidth = self.lineWidth; UIBezierPath *maskPath = [UIBezierPath bezierPathWithArcCenter:circleCenterPoint radius:self.radius startAngle:CompassToCartesian(self.startradianFromNorth) endAngle:CompassToCartesian(self.endradianFromNorth) clockwise:true]; maskLayer.path = maskPath.CGPath; _bgLayer.mask = maskLayer;
mask 的作用是将maskLayer层不透明像素覆盖的底层显示出来,而不被不透明像素覆盖的底层则隐藏,添加mask后效果如下所示:
绘制滑动条肯定有个滑动块handler,这里使用CALayer实现,代码如下:
CGPoint handleCenter = [self pointOnCircleAtRadian:self.radianFromNorth]; _outerCircleLayer = [CALayer layer]; _outerCircleLayer.bounds = CGRectMake(0, 0, LS_HANDLE_RADIUS * 2, LS_HANDLE_RADIUS * 2); _outerCircleLayer.cornerRadius = LS_HANDLE_RADIUS; _outerCircleLayer.position = handleCenter; _outerCircleLayer.shadowColor = [UIColor grayColor].CGColor; _outerCircleLayer.shadowOffset = CGSizeZero; _outerCircleLayer.shadowOpacity = 0.7; _outerCircleLayer.shadowRadius = 3; _outerCircleLayer.borderWidth = 1; _outerCircleLayer.borderColor = [UIColor grayColor].CGColor; _outerCircleLayer.backgroundColor = [UIColor whiteColor].CGColor; [self.layer addSublayer:_outerCircleLayer]; CAShapeLayer *innerCircleLayer = [CAShapeLayer layer]; innerCircleLayer.bounds = CGRectMake(0, 0, LS_HANDLE_INNER_RADIUS * 2, LS_HANDLE_INNER_RADIUS * 2); innerCircleLayer.cornerRadius = LS_HANDLE_INNER_RADIUS; innerCircleLayer.position = CGPointMake(LS_HANDLE_RADIUS, LS_HANDLE_RADIUS); innerCircleLayer.backgroundColor = self.handleFillColor.CGColor; innerCircleLayer.borderWidth = 1; innerCircleLayer.borderColor = [UIColor grayColor].CGColor; [_outerCircleLayer addSublayer:innerCircleLayer];
最后控制滑动块在制定的轨道上活动,首先控制手指触摸事件的响应范围,重载UIView的
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event, 如下所示:
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { if ([self pointInsideHandle:point withEvent:event]) { return YES; // Point is indeed within handle bounds } else { return [self pointInsideCircle:point withEvent:event]; // Return YES if point is inside slider's circle } } //检测触摸点是否在slider所在圆圈范围内 - (BOOL)pointInsideCircle:(CGPoint)point withEvent:(UIEvent *)event { CGPoint p1 = [self centerPoint]; CGPoint p2 = point; CGFloat xDist = (p2.x - p1.x); CGFloat yDist = (p2.y - p1.y); double distance = sqrt((xDist * xDist) + (yDist * yDist)); return distance < self.radius + self.lineWidth * 0.5; } //检测触摸点是否在滑动块中 - (BOOL)pointInsideHandle:(CGPoint)point withEvent:(UIEvent *)event { NSLog(@"%@", NSStringFromSelector(_cmd)); CGPoint handleCenter = [self pointOnCircleAtRadian:self.radianFromNorth]; CGFloat handleRadius = MAX(LS_HANDLE_RADIUS * 2, 44.0) * 0.5; // Adhere to apple's design guidelines - avoid making touch targets smaller than 44 points // Treat handle as a box around it's center CGRect handleRect = CGRectMake(handleCenter.x - handleRadius, handleCenter.y - handleRadius, handleRadius * 2, handleRadius * 2); return CGRectContainsPoint(handleRect, point); }
其次,限定滑动块在轨道的范围内滑动,重载UIControl的事件函数
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
如下所示:
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event { [super continueTrackingWithTouch:touch withEvent:event]; CGPoint lastPoint = [touch locationInView:self]; self.radianFromNorth = [self radianFromPoint:lastPoint toReferencePoint:self.centerPoint]; BOOL continueTracking = YES; if (self.radianFromNorth > self.endradianFromNorth) { self.radianFromNorth = self.endradianFromNorth; [self sendActionsForControlEvents:UIControlEventTouchDragExit]; continueTracking = NO; } else if (self.radianFromNorth < self.startradianFromNorth) { self.radianFromNorth = self.startradianFromNorth; [self sendActionsForControlEvents:UIControlEventTouchDragExit]; continueTracking = NO; } [self moveHandle]; self.currentValue = RADIAN_TO_DEGREE(self.radianFromNorth); [self sendActionsForControlEvents:UIControlEventValueChanged]; return continueTracking; }
所有的代码在ios绘制渐变背景滑动条可以下载。
本文参考:
iOS实现一个颜色渐变的弧形进度条
如果觉得本文对你有帮助,就请用微信打赏我吧^_^
相关文章推荐
- iOS NSLayoutConstraint priority
- iOS AutoLayout 百分比布局
- iOS代码设置渐变背景色
- iOS设计模式 - 组合
- iOS NSData 和十六进制字符串之间的相互转换
- iOS-语言本地化
- iOS---自定义带占位文字placeholder的TextView
- iOS开发中常用的第三方插件和框架小结
- iOS初探KVO
- iOS项目中全局变量的定义与使用
- iOS7编译错误:CGContextSaveGState...please set CG_CONTEXT_SHOW_BACKTRACE...
- iOS开发之3D Touch
- iOS图形绘制方法汇总及图片处理
- iOS_AutoLayout自动布局
- IOS 基于APNS消息推送原理与实现
- iOS中的单例
- iOS9开发--(Content Blocker)Safari广告拦截详解
- iOS内存管理---block机制详解
- IOS开发证书配置问题总结
- IOS引用计数的小细节