类Radio功能的Button控件

在一个VPN里看到了这个效果的控件，感觉用着不错，就自己参照着写了一个轮子，效果如下图：

效果图

控件的实现比较简单，主要是在UIView上添加了两个CASharpLayer，一个用来绘制控件的背影及颜色，一个用来绘制围绕控件的环状进度条。

CASharpLayer

我们知道一般情况下UIView都是矩形的，虽然我们可以通过设置layer的maskToBound属性来使用其圆角化，但实质上它还是矩形的，如果view的足够大，我们是可以通过点击View的圆角部分来触发View所绑定的事件的。
UIView默认的Layer类型是CALayer，我们可以通过重写UIView中的layerClass接口将其修改为CASharpLayer.
CASharpLayer通过path属性定义View的外观形状，通过fillColor来设置填充色，通过strokeColor/lineWidth来定义边界的颜色值与宽度。

+(Class)layerClass
{
    return [CAShapeLayer class];
}

-(void)setUp
{
    //将控件绘制成内部颜色为红色，边界宽度为2颜色为灰色
    CAShapeLayer* mainLayer = (CAShapeLayer*)self.layer;
    mainLayer.fillColor = [UIColor redColor].CGColor;
    mainLayer.lineWidth = 2.0f;
    mainLayer.strokeColor = [UIColor grayColor].CGColor;
    mainLayer.strokeEnd = 1.0f;
    //进度条，用于覆盖控件的灰色边界，strokeEnd用于进度的显示
    self.onCircleLayer = [CAShapeLayer layer];
    self.onCircleLayer.fillColor = [UIColor clearColor].CGColor;
    self.onCircleLayer.lineWidth = 2.0f;
    self.onCircleLayer.strokeColor = [UIColor greenColor].CGColor;
    self.onCircleLayer.strokeEnd = self.progress;
    [self.layer addSublayer:self.onCircleLayer];
}

UIBezierPath

控件的主体背景及环状的进度条都使用到了Bezier曲线。Bezier曲线是数学上的一个比较有名的曲线，具体曲线什么样我也不是太了解。但UIBezierPath类就是专门用来绘制各种形状曲线的，Bezier只是其中的一个特例罢了。
我们可以使用UIBezierPath来描述矩形、圆形、弧形等几何图形、也能够用它来将一些不规则的点连接起来表示一些无规则的曲线，甚至可以通过指定几个控件点来描述一条波浪。
在这个控件的实现中，我们只是用UIBezierPath来描述CALayer的圆形形状，参见以下代码：

-(void)setFrame:(CGRect)frame
{
    [super setFrame:frame];
    CGRect bounds = self.bounds;
    CAShapeLayer* mainLayer = (CAShapeLayer*)self.layer;
    mainLayer.path = [UIBezierPath bezierPathWithOvalInRect:bounds].CGPath;
    
    self.onCircleLayer.frame = bounds;
    self.onCircleLayer.path = [UIBezierPath bezierPathWithOvalInRect:bounds].CGPath;
}

最后给出控件的源码文件，有兴趣的朋友可以取用。