本文记录的是如何绘制一个背景颜色渐变的滑动条,最终的效果如下图:

背景颜色渐变的滑动条

背景颜色渐变的滑动条

绘制渐变背景这里用到了CAGradientLayer和CALayer的mask,首先使用两个CAGradientLayer绘制如下的背景:

渐变背景

渐变背景

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
_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,如下代码所示:

1
2
3
4
5
6
7
8
9
10
11
12
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实现,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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, 如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
- (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

如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (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绘制渐变背景滑动条可以下载。

本文参考:


如果觉得本文对你有帮助,就请用微信打赏我吧^_^