iOS自定义转盘控件

系统的控件有UIButton、UISlider、UITextField等，它们共有的特点是能够响应触摸事件，并作出相应的变化。

这些系统控件都继承自UIControl，顾名思义，UIControl能够处理各种触摸事件，它的头文件中列出了所有能够处理的事件。

创建自定义控件的基本思路是：先在-drawRect:方法中画出Normal状态下的样子，用户触发触摸事件时，根据触摸事件画出相应的图形，这时控件的样子会随触摸事件改变，调用-sendActionsForControlEvents:方法向外部发送触摸事件。

现在制作一个如下图的自定义控件。

自定义控件.png

一、继承UIControl，重写方法

UIControl是抽象类，只提供API接口，并不能直接使用。所以先创建一个类，继承自UIControl，然后重写它的一些方法：

- (void)drawRect:(CGRect)rect;
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event;
- (void)cancelTrackingWithEvent:(UIEvent *)event;

-drawRect:方法中绘制控件，控件就是这个方法画出来的
-beginTrackingWithTouch:withEvent:是监测到触摸事件并开始追踪
-continueTrackingWithTouch:withEvent:是持续监测触摸事件
-endTrackingWithTouch:withEvent:是监测结束
-cancelTrackingWithEvent:是监测到取消触摸事件

-drawRect:方法负责图形显示，另外三个方法负责交互。交互的方法被用户触发之后，调用-setNeedsDisplay来间接调用-drawRect:方法进行绘图。注意不要直接手动调用drawRect，要通过setNeedsDisplay方法让系统异步调用drawRect，否则可能会发生错误。

二、在-drawRect:中绘图

控件的最底部是三个白色半透明的圆弧，上面是白色不透明的圆弧，每个圆弧上有前后两个标签，白色不透明圆弧随标签的滑动而改变，标签外侧是说明文字。其实还是蛮好画的，不算很复杂。

- (void)drawRect:(CGRect)rect {
    for (NSInteger i = 0; i < _sectors.count; i ++) {
        // 取出三个弧形区域对象
        Sector *sector = [_sectors objectAtIndex:i];
    
        CGContextRef context = UIGraphicsGetCurrentContext();
        // 画圆弧
        CGContextSetLineWidth(context, 25);
    
        UIColor *bottomColor = [UIColor colorWithWhite:1 alpha:0.5];
        UIColor *topColor = [UIColor colorWithWhite:1 alpha:1];
    
        [bottomColor setStroke];
        CGContextAddArc(context, sector.centerPoint.x, sector.centerPoint.y, Circle_Width, sector.startAngle, sector.startAngle+0.6*M_PI, 0);
        CGContextStrokePath(context);
    
        [topColor setStroke];
        CGContextAddArc(context, sector.centerPoint.x, sector.centerPoint.y, Circle_Width, sector.beginAngle, sector.endAngle, 0);
        CGContextStrokePath(context);
    
        // 画直线
        [sector.color setStroke];
        CGContextSetLineWidth(context, 2.0);
    
        CGPoint beginSmallPoint = polarToDecart(sector.centerPoint, Circle_Width-15, sector.beginAngle);
        CGPoint beginBigPoint = polarToDecart(sector.centerPoint, Circle_Width+15, sector.beginAngle);
    
        CGContextMoveToPoint(context, beginSmallPoint.x, beginSmallPoint.y);
        CGContextAddLineToPoint(context, beginBigPoint.x, beginBigPoint.y);
        CGContextStrokePath(context);
    
        CGPoint endSmallPoint = polarToDecart(sector.centerPoint, Circle_Width-15, sector.endAngle);
        CGPoint endBigPoint = polarToDecart(sector.centerPoint, Circle_Width+15, sector.endAngle);
    
        CGContextMoveToPoint(context, endSmallPoint.x, endSmallPoint.y);
        CGContextAddLineToPoint(context, endBigPoint.x, endBigPoint.y);
        CGContextStrokePath(context);
    
        // 画扇形
        CGContextSetLineWidth(context, 2.0);
        [sector.color setStroke];
        [sector.color setFill];
        CGContextMoveToPoint(context, beginBigPoint.x, beginBigPoint.y);
        CGContextAddArc(context, beginBigPoint.x, beginBigPoint.y, 10, sector.beginAngle-0.2*M_PI, sector.beginAngle+0.2*M_PI, 0);
        CGContextClosePath(context);
        CGContextDrawPath(context, kCGPathFillStroke);
    
        CGContextMoveToPoint(context, endBigPoint.x, endBigPoint.y);
        CGContextAddArc(context, endBigPoint.x, endBigPoint.y, 10, sector.endAngle-0.2*M_PI, sector.endAngle+0.2*M_PI, 0);
        CGContextClosePath(context);
        CGContextDrawPath(context, kCGPathFillStroke);
    
        NSString *startString = @"end";
        NSString *endString   = @"start";

        // 直角坐标转极坐标
        PolarCoordinate strBeginPolar = decartToPolar(sector.centerPoint, sector.beginPoint);
        // 极坐标转直角坐标
        CGPoint strBeginPoint = polarToDecart(sector.centerPoint, strBeginPolar.radius+50, strBeginPolar.angle);
    
        PolarCoordinate strEndPolar = decartToPolar(sector.centerPoint, sector.endPoint);
        CGPoint strEndPoint = polarToDecart(sector.centerPoint, strEndPolar.radius+50, strEndPolar.angle);
    
        // 画文字
        [self drawString:startString
                withFont:[UIFont systemFontOfSize:17]
                andColor:[UIColor whiteColor]
               andCenter:strBeginPoint
                  andTag:sector.tag
                  radius:strBeginPolar.radius+50];
    
        [self drawString:endString
                withFont:[UIFont systemFontOfSize:17]
                andColor:[UIColor whiteColor]
               andCenter:strEndPoint
                  andTag:sector.tag
                  radius:strEndPolar.radius+50];
    }
}

这样控件就画好了，对象初始化之后会自动调用一次drawRect绘制出来。

三、处理触摸事件

控件画出来了，接下来就要处理触摸事件，这个自定义控件的触摸事件类似UISlider，是滑动式的事件。

控件有三个主要区域，每个区域有两个滑动标签，只要捕获到用户触摸区域在滑动标签周围，就说明用户要开始滑动标签了，然后让标签跟随用户的触摸点移动，这个自定义控件就“活”了。

1.如何知道用户的触摸点是否在滑动标签周围呢？

- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event方法最先捕获到用户触摸事件，touch对象包含了触摸区域，通过[touch locationInView:self]方法可以获取触摸点的坐标。

简单的自定义控件可以通过CGRectContainsPoint(rect, point)判断point是否在rect内，但这个控件就不行，因为两个区域之间的距离太近，标签的frame会有部分区域重合。这里我使用的方法是创建一个梯形贝塞尔路径，正好把标签包含住而又不重合，当然代码也多了不少。效果如下，是不是很赞？

标签区域.png

使用方法[beginPath containsPoint:touchPoint];来判断触摸区域是否在滑动标签周围，是的话就返回YES继续处理，否则返回NO终止处理。

2.继续处理触摸事件

- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event是继续处理的方法。

用户触摸的位置是任意的，但我们的控件却是圆的，所以这里就需要一个函数把触摸点所在的直角坐标转换成极坐标，这样就能得到触摸点的角度，得到角度之后立即绘制该角度对应的图像。比如滑动标签1原始位置是0度，用户触摸的位置是20度，就立即调用setNeedsDisplay方法把滑动标签1绘制到20度的位置。

在- continueTrackingWithTouch:withEvent:方法中，用户滑动的坐标基本是连续的，我们不断地调用setNeedsDisplay，系统就不断地重绘，这就产生了用户滑到哪里，滑动标签就跟随到哪里的效果。

手动调用[self sendActionsForControlEvents:UIControlEventValueChanged];方法，就能在每次改变值之后向外发通知，我们在外部就能通过[custom addTarget:self action:@selector(sectorValueChanged:) forControlEvents:UIControlEventValueChanged];来实时获取值了。

3.触摸事件结束

- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event表示用户离开屏幕，不再进行触摸。

到这里，自定义控件基本就创建好了，当然创建自定义控件是要使用的，所以得对外暴露一些接口，比如设置颜色、角度、数值等。

---

结束了吗？还没有。

---

这种直接绘制的方法太粗暴，下面用一种优雅的方式创建它。

四、优雅地创建自定义控件

最好的方法是仿照苹果，将显示与交互分开，CALayer负责图形显示，控件本身负责交互。重绘代码分离到CALayer中，交互代码留在UIControl中，代码结构清晰、逻辑明了。

这个自定义控件的三个区域其实是一个样子的，只是位置和颜色不同，上面的方法是一次性绘制三个区域，代码比较臃肿，如果使用CALayer绘制一个区域的Layer，使用的时候创建三个分别放在不同位置，这样就简单多了。

1.创建UIControl子类，重写交互方法

与上面一样，先创建一个类继承于UIControl，重写begin/continue/end/cancel四个方法，主要在begin和continue中处理触摸逻辑与数据计算，有些复杂的控件这里的判断代码可能写起来比较困难。

2.创建Layer，绘制控件

continue方法中，数据处理完毕之后手动调用layer的-setNeedsDisplay方法进行重绘，重绘的代码与上面类似。CALayer中的重绘方法与UIView不同，它是在- (void)drawInContext:(CGContextRef)ctx中进行的。

要注意的是，重绘需要的所有参数都是由自定义控件传过来的，比如半径、颜色、宽度等，正是这些数据将两个类关联了起来，有必要重写这些参数的setter方法，发现修改任意参数的时候就进行重绘。

自定义控件就写这么多吧，具体的源码请参考我的GitHub。

zdykj.gif