iOS自定义控件教程制作一个可重用的旋钮

（原文：CustomControlforiOSTutorial:AReusableKnob作者：SamDavies译者：培子）当你的APP需要一些新功能时，自定义UI控件会十分有用，尤其是这些自定义控件可以在其他APP里面很好的重用。ColinEberhart写过一篇很棒的介绍自定义UI控件的教程。这个教程涉及的是一个继承自UISlider类的自定义控件的生成；该控件的功能是给定一个（滑动）范围供（用户滑动）选择，并返回一个（与滑动位置相对应的）固定值。本篇基于iOS7的自定义UI教程在ColinEberhart那篇的基础上更深入一步；受调音台旋钮的启发，这里介绍如何制作一个功能类似UISlider的圆形旋转控件。UIKit框架里的UISlider控件就是供用户在一个给定的范围内设置一个浮动的值。如果用过iOS设备，你就会知道UISlider控件可以用来设置音量、屏幕亮度，或者其他一些（在一定范围内浮动）的变量。在这篇教程里建立的项目将会实现同样的功能，只不过不是线性滑动的Slider，而是圆形旋转的Slider，就像之前提到的旋钮。行动起来吧！首先，下载这个项目文件。这是一个简单的single-viewAPP，Storyboard里包含一些控件并捆绑在主视图控制器。在之后演示旋钮控件的不同特性时，你会用到这些控件。在正式的编写代码之前，我们先构建运行一下APP，对每个控件的呈现有个大致的了解；它看起来应该是下面这个样子：首先新建一个旋钮类，点击“File\New\File…”,然后选择“iOS\CocoaTouch\Objective-Cclass”。在之后的界面上，把类命名为RWKnobControl，并让它继承UIControl。点击Next，选择“KnobControl”目录，最后点击“Create”。在为新控件编写代码之前，你应该把它添加到视图中，方便查看。打开RWViewController.m，把下面的代码导入到文件顶部：#import”RWKnobControl.h”然后在@interface私有扩展区里，如下添加一个实例变量：@interfaceRWViewController(){RWKnobControl*_knobControl;}@end这个变量是对RWKnobControl的引用接下来，重写viewDidLoad，如下：-(void)viewDidLoad{[superviewDidLoad];_knobControl=[[RWKnobControlalloc]initWithFrame:self.knobPlaceholder.bounds];[self.knobPlaceholderaddSubview:_knobControl];}上面所做的就是创建一个RWKnobControl实例，并把它加入到故事板视图里。knobPlaceholder属性已经与故事板里的视图对象建立了联接。打开RWKnobControl.m文件，重写initWithFrame:方法：-(id)initWithFrame:(CGRect)frame{self=[superinitWithFrame:frame];if(self){//Initializationcodeself.backgroundColor=[UIColorblueColor];}returnself;}上面的代码设置了knob控件的背景颜色，这样你就能清楚的在屏幕上看到它了。运行你的APP，你会看到下面的内容：现在，你的APP大体的布局已经搭建完成。下面开始为你的控件搭建API吧！设计控件API我们创建一个自定义控件的初衷就是想获得一个方便可重用的组件。前期，多花些时间为控件设计一套好的API函数接口是值得的；其他开发者在使用你的控件时，可以直接从控件的API上理解怎么运用它，而不需要再去看里面的源代码。这意味你同样需要创建一个有关控件的API文档。自定义控件的头文件包含所有可供调用的API函数接口。在这里，就是RWKnobControl.h。打开RWKnobControl.h，把下面的代码添加到@interface和@end之间：#pragmamark-Knobvalue/**Containsthecurrentvalue*/@property(nonatomic,assign)CGFloatvalue;/**Setsthevaluetheknobshouldrepresent,withoptionalanimationofthechange.*/-(void)setValue:(CGFloat)valueanimated:(BOOL)animated;#pragmamark-ValueLimits/**Theminimumvalueoftheknob.Defaultsto0.*/@property(nonatomic,assign)CGFloatminimumValue;/**Themaximumvalueoftheknob.Defaultsto1.*/@property(nonatomic,assign)CGFloatmaximumValue;#pragmamark-KnobBehavior/**ContainsaBooleanvalueindicatingwhetherchangesinthevalueoftheknobgeneratecontinuousupdateevents.Thedefaultvalueis`YES`.*/@property(nonatomic,assign,getter=isContinuous)BOOLcontinuous;value,minimumValue和maximumValue是控件的基本操作参数setValue:animated:和continuous直接参照UISlider控件；因为knob控件实现的功能和UISlider类似，所以API也应保持一致setValue：animated：可以用程序为你的knob控件赋值，而另外的BOOL参数表示是否动态的改变value属性的值。如果continuous设为YES，那么在值改变时，控件会重复的回调；如果设为NO，那么只有在用户结束交互操作时，控件才会执行一次回调。备注：如果想对方法用不同的名字进行访问，你最好通过“动作“+”属性名“的方式来命名你的方法。当前，属性是Boolean类型（YES/NO），通常getter就是以”is“开头；而getter获取的属性名是continuous，最终的名字就是isContinuous。因为这篇教程的后面部分会在此基础上继续拓展，所以你需要确保这些属性方法能正确的运行。尽管只有短短的五行代码，但由于附加了额外的代码备注，造成了RWKnobControl看上去篇幅很长。这些备注看上去没多大用处，但是它们在用户获取属性方法时给予相应提示，像下面这样：不论对你、你的团队成员、还是其他人来说，上述的代码提示能帮助开发者在使用该控件时节省大量的时间！打开RWKnobControl.m,在initWithFrame：方法下面添加如下代码：#pragmamark-APIMethods-(void)setValue:(CGFloat)valueanimated:(BOOL)animated{if(value!=_value){//Savethevaluetothebackingivar//Makesurewelimitittotherequestedbounds_value=MIN(self.maximumValue,MAX(self.minimumValue,value));}}#pragmamark-Propertyoverrides-(void)setValue:(CGFloat)value{//Chainwiththeanimationmethodversion[selfsetValue:valueanimated:NO];}这里重写value的setter方法的目的是把它的值直接传递给setValue:animated:方法。该方法目前没有保证属性值是介于控件限定的范围之内。还有你的API文档应该指定一些默认值。为了实现这些方法，下面更新RWKnobControl.m的initWithFrame:方法：-(id)initWithFrame:(CGRect)frame{self=[superinitWithFrame:frame];if(self){//Initializationcodeself.backgroundColor=[UIColorblueColor];_minimumValue=0.0;_maximumValue=1.0;_value=0.0;_continuous=YES;}returnself;}既然你已经给控件定义好了它的API，下面是时候在视觉设计上下功夫了。设置控件外观Colin的教程里用了CoreGraphics和图片两种途径来设置控件外观。然而，不止上面两种方法；本篇教程将引入第三种方法来设置控件外观：CoreAnimation的layer。每当你使用一个UIView，视图内容都是绘制在CALayer上的。CALayer能帮助iOS系统优化图形集渲染。它管理显示各种视图内容，并且在执行各种类型的动画时，拥有令人难以置信的高效率！（Amazing）Knob控件由两个CALayer对象组成：一个是滑动轨迹图层，一个是滑动指针图层。之后你将看到，这会带来很棒的动画表现。下面的图阐明了knob控件的基本构造：上图中，蓝色和红色正方形分别代表两个CALayer对象；蓝色图层包含knob控件的滑动轨迹，红色图层包含滑动指针。两个图层叠在一起就如预期那样生成了一个可滑动knob的外观。上述图层两种不同的背景颜色仅仅只是为了表征控件两个不同的图层——实际创建时不必如此。使用两个独立图层的原因也是显而易见：你需要移动指针到一个新的值。你要的做就是旋转那个包含指针的图层，即上面图中的红色图层。对CoreAnimation来说，旋转图层是一件资源消耗小且操作简便的事情。而如果你选择使用CoreGraphics，重写drawRect:方法，那么knob控件在动画执行的每个阶段都会被重复渲染。这样的操作所消耗的资源是十分巨大的，尤其当knob控件的value值改变引起APP里的其他动作，甚至会造成动画卡顿现象。下面创建一个类，用来编写控件渲染相关的代码。点击“File\New\File…“选择”iOS\CocoaTouch\Objective-Cclass“，命名为”RWKnobRenderer“并让它继承NSObject。单击”Next“并把文件保存在默认的目录下。打开RWKnobRenderer.h文件，在@interface和@end之间添加如下代码：#pragmamark-Propertiesassociatedwithallpartsoftherenderer@property(nonatomic,strong)UIColor*color;@property(nonatomic,assign)CGFloatlineWidth;#pragmamark-Propertiesassociatedwiththebackgroundtrack@property(nonatomic,readonly,strong)CAShapeLayer*trackLayer;@property(nonatomic,assign)CGFloatstartAngle;@property(nonatomic,assign)CGFloatendAngle;#pragmamark-Propertiesassociatedwiththepointerelement@property(nonatomic,readonly,strong)CAShapeLayer*pointerLayer;@property(nonatomic,assign