自定义圆环控件

秒速五厘米 2022-03-18 15:55 280阅读 0赞

![Image 1][]

circularSlider.001.jpeg

在开发过程中，有时候标准的 UIKit 控件并不能满足我们的需求，这时候就需要我们自定义。

自定义控件可以参考系统中已有控件来实现，比如 UIButton, ,UISegmentedControl, UISlider, UISwitch 等，它们都继承自 UIControl。

先来看一张最终的效果：

![Image 1][]

circular\_slider.gif

该圆环控件可以做的事情：定制一个用户界面，通过该界面用户，可以在指定区域内拖动手柄，将当前的角度转化为需要显示的数据。交互操作会被转为控件的 Target 对应的 Action。

完整的工程示例可以在这里下载：[SFCircularSlider][]

### 绘制用户界面 ###

1.  绘制底部圆环

CGContextSaveGState(context);
        
        CGContextAddArc(context, kSelfWidth / 2, kSelfHeight / 2, _radius, -M_PI, M_PI * 2, 0);
        
        [_circularColor setStroke];
        
        CGContextSetLineWidth(context, _borderWidth);
        CGContextSetLineCap(context, kCGLineCapButt);
        
        CGContextDrawPath(context, kCGPathStroke);
        
        CGContextRestoreGState(context);

这里绘制圆的方向，零度位于圆的最右侧，向上为负数，向下是正数。

1.  绘制填充区域

CGContextSaveGState(context);
        
        CGContextAddArc(context, kSelfWidth / 2, kSelfHeight / 2, _radius,
                        DegreesToRadians(kCircleDegreeMin),
                        DegreesToRadians(kCircleDegree360 - _angle), 0);
        
        [_minimumTrackTintColor setStroke];
        
        CGContextSetLineWidth(context, _borderWidth);
        CGContextSetLineCap(context, kCGLineCapRound);  //设置线起点终点形状
        
        CGContextDrawPath(context, kCGPathStroke);
        
        CGContextRestoreGState(context);

\_angle 代表当前角度，需要转换到绘制角度上。绘制起点为最小值到当前手势所在位置。

1.  绘制未填充区域圆弧

CGContextAddArc(context, kSelfWidth / 2, kSelfWidth / 2,
                        _radius, DegreesToRadians(kCircleDegree360 - _angle),
                        DegreesToRadians(kCircleDegreeMax), 0);
        
        [_maximumTrackTintColor setStroke];
        
        CGContextSetLineWidth(context, _borderWidth);
        CGContextSetLineCap(context, kCGLineCapRound);  //设置线起点终点形状
        
        CGContextDrawPath(context, kCGPathStroke);

未填充颜色区域原理相同，起点为手势所在位置，终点为最大值处。

1.  绘制手柄(thumb)

CGPoint handleCenter = [self pointFromAngle:_angle radius:_radius];
        
        [_thumbTintColor set];
        
        CGSize shadowOffset = CGSizeMake(0, 0);
        CGFloat colorValues[] = {0, 0, 1/2, .6};
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB ();
        CGColorRef color = CGColorCreate (colorSpace, colorValues);
        CGContextSetShadowWithColor(context, shadowOffset, 3, color);
        
        CGContextFillEllipseInRect(context, CGRectMake(handleCenter.x - _thumbRadius,
                                                       handleCenter.y - _thumbRadius,
                                                       _thumbRadius * 2, _thumbRadius * 2));
        
        CGContextSetLineCap(context, kCGLineCapButt);
        CGContextDrawPath(context, kCGPathStroke);
        
        CGColorRelease(color);
        CGColorSpaceRelease(colorSpace);

手柄跟踪当前手势所在的位置。为了增强立体感，添加投影的效果。CGContextSetShadowWithColor 中 offset 参数代表偏移的距离和方向，左负右正，上负下正，\{0，0\} 代表在一周上投影。

### 跟踪用户操作 ###

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

通过重载 `beginTracking` 方法控制起始的触发区域。

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

重载 `continueTracking` 来连续跟踪用户的手势，并在超出响应范围之外返回 `NO`。

### 使用示例 ###

SFCircularSlider *circularSlider = [[SFCircularSlider alloc] init];
        circularSlider.value = 5;
        circularSlider.minimumValue = 0;
        circularSlider.maximumValue = 10;
        circularSlider.minimumTrackTintColor = [UIColor colorWithRed:255/255.0 green:177/255.0 blue:0/255.0 alpha:1];
        [circularSlider addTarget:self action:@selector(toucheUpInsideAction:) forControlEvents:UIControlEventTouchUpInside];
        [circularSlider addTarget:self action:@selector(valueChangedAction:) forControlEvents:UIControlEventValueChanged];
        [self.view addSubview:circularSlider];

支持设定最小/最大值，亦可接受 ValueChanged 和 TouchUpInside 的事件来响应当前拖动的值和拖动结束的值。

[Demo 下载地址][SFCircularSlider]

作者：SmallflyBlog  
链接：https://www.jianshu.com/p/75f7cc577e8a  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Image 1]: 
[SFCircularSlider]: https://link.jianshu.com?t=https://github.com/iostalks/SFCircularSlider