iOS自定义弧线Slider

效果图

iOS自定义弧线Slider_第1张图片
效果图

思路

1.自定义DIYSlider继承UIControl,因为UIControl方便监听手势触摸到上面开始,滑动中和结束三个状态。

2.在DIYSlider中的- (void)drawRect:(CGRect)rect方法中先将弧线划出来。

- (void)drawRect:(CGRect)rect {

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextTranslateCTM(context, 0.0, self.bounds.size.height); //改变画布位置(0,0位置移动到此处)

CGContextScaleCTM(context, 1.0, -1.0);

CGContextSetLineWidth(context, self.lineWidth);

CGPoint center = CGPointMake(CGRectGetMaxX(self.bounds) + 3, CGRectGetMidY(self.bounds));

CGFloat radius = CirCleradius;

CGFloat arcStartAngle = DegreesToRadians(self.startAngle);

CGFloat progressAngle = DegreesToRadians((self.startAngle + 180) + 60) * self.progress;

CGFloat arcEndAngle = arcStartAngle - progressAngle;

[self.guideLineColor set];

CGContextAddArc(context, center.x, center.y, radius, arcStartAngle, arcEndAngle, 1);

CGContextSetLineCap(context, kCGLineCapRound);

CGContextStrokePath(context);

CGPoint handle = CGPointCenterRadiusAngle(center, radius , arcStartAngle - progressAngle);

_handcenterPoint = handle;

CGContextSaveGState(context);

CGContextDrawImage(context, CGRectMake(handle.x - _handleInSideRadius, handle.y - _handleInSideRadius, _handleInSideRadius * 2, _handleInSideRadius * 2), [UIImage imageNamed:@"椭圆3拷贝+"].CGImage);

CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);//填充颜色

CGContextRestoreGState(context);

}

注意点:iOS设备的坐标系原点在左上角,x向右增加,y向下增加。圆的坐标系坐标原点在圆心,x向右增加,y向上增加。

3.在-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event

       - (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event

       -(void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event

三个事件中监听手势落下的点,在第一个方法中监听落下的点是否在弧线上的起始小圆上(这里的判断范围要增大2-4倍,优化实际用户体验),这里设定一个全局BOOL变量canScroll,如果手势落下的开始点在小圆范围上,canScroll为YES

-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{

[super beginTrackingWithTouch:touch withEvent:event];

_location = [touch locationInView:self];

CGPoint handleCenter = CGPointMake(_handcenterPoint.x, JZHEIGHT(300) -  _handcenterPoint.y) ;

CGFloat handleRadius = _handleInSideRadius;

CGRect handleRect = CGRectMake(handleCenter.x - 3*handleRadius, handleCenter.y - 2*handleRadius, handleRadius * 6, handleRadius * 5);

self.canScroll = CGRectContainsPoint(handleRect, _location);

return YES;

}

第二个方法中先判断canScroll是否可以滑动,然后找到在DIYSlider上落下的点到圆心的弧度,找到起始点到圆心的弧度,然后计算出弧度差,将弧度差转化为角度差,通过角度差计算出弧线滑动的比例,这个比例赋值给自己定义的一个progress的属性。

- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {

[super continueTrackingWithTouch:touch withEvent:event];

if (self.canScroll == YES) {

_location = [touch locationInView:self];

[self drawWithLocation:_location with:1];

}

return YES;

}

第三个方法,将canScroll设置成NO,表示一个弧线滑动动作结束。

3.整体思路总结,监听手势,判断在设定的范围内,计算出手势所在弧度为结束弧度点,在drawRect方法中进行画弧线,达到滑动弧线的效果。

你可能感兴趣的:(iOS自定义弧线Slider)