系统的控件有UIButton、UISlider、UITextField等，它们共有的特点是能够响应触摸事件，并作出相应的变化。
这些系统控件都继承自UIControl，顾名思义，UIControl能够处理各种触摸事件，它的头文件中列出了所有能够处理的事件。
创建自定义控件的基本思路是：先在-drawRect:方法中画出Normal状态下的样子，用户触发触摸事件时，根据触摸事件画出相应的图形，这时控件的样子会随触摸事件改变，调用-sendActionsForControlEvents:方法向外部发送触摸事件。
现在制作一个如下图的自定义控件。
一、继承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会有部分区域重合。这里我使用的方法是创建一个梯形贝塞尔路径，正好把标签包含住而又不重合，当然代码也多了不少。效果如下，是不是很赞？
使用方法[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。
