《iOS自定义控件教程制作一个可重用的旋钮解析》由会员分享，可在线阅读，更多相关《iOS自定义控件教程制作一个可重用的旋钮解析（44页珍藏版）》请在金锄头文库上搜索。
1、（原文： Custom Control for iOS Tutorial:A Reusable Knob乍者：Sam Davies译者： 培子 ）当你的APP需要一些新功能时，自定义 UI 控件会十分有用，尤其是这些自定义 控件可以在其他 APP 里面很好的重用。 Colin Eberhart 写过一篇很棒的介绍自定 义 UI 控件的教程。这个教程涉及的是一 个继承自 UISlider 类的自定义控件的生 成；该控件的功能是给定一个（滑动） 范围供（用户滑动）选择，并返回一个 （与滑动位置相对应的）固定值。本篇基于 iOS 7的自定义 UI 教程在 Colin Eberhart 那篇的基础上更
2、深入一步； 受调 音台旋钮的启发，这里介绍如何制作一 个功能类似UlSlider的圆形旋转控件。UlKit框架里的UISlider控件就是供用户 在一个给定的范围内设置一个浮动的 值。如果用过 iOS 设备，你就会知道 UISlider控件可以用来设置音量、屏幕亮 度，或者其他一些（在一定范围内浮动） 的变量。在这篇教程里建立的项目将会 实现同样的功能，只不过不是线性滑动 的Slider，而是圆形旋转的Slider,就像 之前提到的旋钮。行动起来吧！ 首先，下载这个项目文件。这是一个简 单的 single-view APP， Storyboard 里包含 一些控件并捆绑在主视图控制器。在之 后
3、演示旋钮控件的不同特性时，你会用 到这些控件。在正式的编写代码之前， 我们先构建运行一下 APP,对每个控件 的呈现有个大致的了解；它看起来应该 是下面这个样子：首 先 新 建 一 个 旋 钮 类 ， 点 击“FileNewFile ”，然后选择 “ iOSCocoaTouchObjective-C class o 在之后的界面 上,把类命名为RWKnobControl,并让它 继 承 UIControl o 点 击 Next ， 选 择“KnobControl” 目录，最后点击 “Create”。 在为新控件编写代码之前， 你应该把它添加到视图中，方便查看。打开RWViewControlle
4、r.m,把下面的代码导入 到文件顶部：#import”RWKnobControl.h” 然 后 在 interface 私有扩展区里，如下添加一 个实例变量：interfaceRWViewController()RWKnob Control*_knobControl;end 这个变量是 对 RWKnobControl的引用接下来，重写viewDidLoad,如下： -(void)viewDidLoadsuperviewDidLoad;_knobControl=RWKnobControlallocinit WithFrame:self.knobPlaceholder.bounds; self.k
5、nobPlaceholderaddSubview:_knobC ontrol; 上 面 所 做 的 就 是 创 建 一 个 RWKnobControl 实例,并把它加入到故 事板视图里。 knobPlaceholder 属性已经 与故事板里的视图对象建立了联接。打 开 RWKnobControl.m 文 件 , 重 写 initWithFrame: 方法：-(id)initWithFrame:(CGRect)frameself=s uperinitWithFrame:frame;if(self)/Initiali zationcodeself.backgroundColor=UIColor b
6、lueColor;returnself; 上面 的 代码 设置 了 knob 控件的背景颜色， 这样你就能清 楚的在屏幕上看到它了。运行你的APP,你会看到下面的内容：现在，你的APP大体的布局已经搭建完 成。下面开始为你的控件搭建 API吧！ 设计控件API我们创建一个自定义控件 的初衷就是想获得一个方便可重用的组 件。前期,多花些时间为控件设计一套 好的 API 函数接口是值得的；其他开发 者在使用你的控件时,可以直接从控件 的 API 上理解怎么运用它,而不需要再 去看里面的源代码。这意味你同样需要 创建一个有关控件的API文档。自定义控件的头文件包含所有可供调 用 的 API 函 数
7、接 口 。 在 这 里 , 就 是 RWKnobControl.h。打开RWKnobControl.h,把下面的代码添加到inteface和end之间：#pragmamark-Knobvalue/*Containsthe currentvalue*/property(nonatomic,assi gn)CGFloatvalue;/*Setsthevaluetheknobs houldrepresent,withoptionalanimationoft hechange.*/-(void)setValue:(CGFloat)valu eanimated:(BOOL)animated;#pragm
8、amark -ValueLimits/*Theminimumvalueofthekn ob.Defaultsto0.*/property(nonatomic,a ssign)CGFloatminimumValue;/*Themaxi mumvalueoftheknob.Defaultsto1.*/pro perty(nonatomic,assign)CGFloatmaximum Value;#pragmamark-KnobBehavior/*Con tainsaBooleanvalueindicatingwhetherchan gesinthevalueoftheknobgeneratecon
9、tinuo usupdateeve nts. Thedefaultvalueis、YES、.*/ property(nonatomic,assign,getter=isCon tinuous)BOOLcontinuous;value,minimumV alue 和 maximumValue 是控件的基本 操作参数setValue:animated: 和 continuous 直 接参照UISlider控件；因为knob控件实现的功能和 UISlider 类似，所以 API 也应 保持一致setValue: animated:可以用程序为你的 knob控件赋值，而另外的BOOL参数表 示是否动态
10、的改变 value 属性的值。如果continuous设为YES那么在值改 变时，控件会重复的回调； 如果设为 NO， 那么只有在用户结束交互操作时，控件 才会执行一次回调。备注:如果想对方法用不同的名字进行 访问，你最好通过“动作“+”属性名“的 方式来命名你的方法。当前，属性是 Boolean类型（YES / NO,通常 getter 就 是以” is “开头；而getter获取的属性名 是 continuous , 最 终 的 名 字 就 是 isContinuous。因为这篇教程的后面部分会在此基础 上继续拓展,所以你需要确保这些属性 方法能正确的运行。尽管只有短短的五 行代码,但由于
11、附加了额外的代码备注, 造成了 RWKnobContro看上去篇幅很长。 这些备注看上去没多大用处,但是它们在用户获取属性方法时给予相应提示，像下面这样：不论对你、你的团队成员、还是其他人 来说，上述的代码提示能帮助开发者在 使用该控件时节省大量的时间！打 开 RWKnobControl.m, 在 initWithFrame ：方法下面添加如下代码： #pragmamark-APIMethods-(void)setValu e:(CGFloat)valueanimated:(BOOL)animate dif(value!=_value)/Savethevaluetotheb ackingiva
12、r/Makesurewelimitittothereque stedbounds_value=MIN(self.maximumVal ue,MAX(self.minimumValue,value);#pra gmamark-Propertyoverrides-(void)setValu e:(CGFloat)value/Chainwiththeanimatio nmethodversionselfsetValue:valueanimat ed:NO;这里重写value的setter方法的 目 的 是 把 它 的 值 直 接 传 递 给 setValue:a ni mated:方法。该方法目前没
13、 有保证属性值是介于控件限定的范围之内。还有你的 API 文档应该指定一些默 认值。为了实现这些方法，下面更新 RWKnobControl.m 的 initWithFrame: 方 法：-(id)initWithFrame:(CGRect)frameself=s uperinitWithFrame:frame;if(self)/Initiali zationcodeself.backgroundColor=UIColor blueColor;_minimumValue=0.0;_maximu mValue=1.0;_value=0.0;_continuous=YES; returnself;
14、既然你已经给控件定义好了 它的AP,下面是时候在视觉设计上下功 夫了。设 置 控 件 外 观 Colin 的 教 程 里 用 了 CoreGraphics 和图片两种途径来设置控 件外观。然而，不止上面两种方法；本 篇教程将引入第三种方法来设置控件外 观： CoreAnimation 的 layer。每当你使用一个UlView，视图内容都是 绘制在CALaye上的。CALayer能帮助iOS 系统优化图形集渲染。它管理显示各种 视图内容，并且在执行各种类型的动画 时 ， 拥 有 令 人 难 以 置 信 的 高 效 率 ！（Amazing）Knob控件由两个CALayer对象组成：- 个是滑动轨
15、迹图层，一个是滑动指针图 层。之后你将看到，这会带来很棒的动 画表现。下面的图阐明了 knob 控件的基本构造：上图中，蓝色和红色正方形分别代表两 个CALaye对象；蓝色图层包含knob控 件的滑动轨迹， 红色图层包含滑动指针。 两个图层叠在一起就如预期那样生成了 一个可滑动 knob 的外观。上述图层两种 不同的背景颜色仅仅只是为了表征控件 两个不同的图层实际创建时不必如 此。使用两个独立图层的原因也是显而易 见：你需要移动指针到一个新的值。你 要的做就是旋转那个包含指针的图层， 即上面图中的红色图层。对 CoreAnimation 来说，旋转图层是一 件资源消耗小且操作简便的事情。而如
16、果 你 选 择 使 用 CoreGraphics， 重 写 drawRect方法，那么knob控件在动画执 行的每个阶段都会被重复渲染。这样的 操作所消耗的资源是十分巨大的，尤其 当knob控件的value值改变引起APP里 的其他动作， 甚至会造成动画卡顿现象。 下面创建一个类， 用来编写控件渲染相 关的代码。点击 “FileNewFile “选择” iOSCocoa TouchObjective-C class“ ， 命 名 为 ” RWKnobRenderef并让它继承 NSObject= 单击” Next “并把文件保存在默认的目 录下。打 开 RWKnobRenderer.h 文 件 ， 在 i nteface和e nd之间添加如下代码：#pragma
