如何用 Swift 语言构建一个自定控件

用户界面控件是所有应用程序重要的组成部分之一。它们以图形组件的方式呈现给用户，用户可以通过它们与应用程序进行交互。苹果提供了一套控件， 例如 UITextField，UIButton，UISwitch。通过工具箱中的这些已有控件，我们可以创建各式各样的用户界面。

然而，有时候你希望界面做得稍微的与众不同，那么此时苹果提供的这些控件就无法满足你的需求。

自定义控件，除了是自己构建二外，与苹果提供的，没什么差别。也就是说，自定义控件不存在于 UIKit 框架。自定义控件跟苹果提供的标准控件一样，应该是通用，并且多功能的。你也会发现，互联网上有一些积极的开发者乐意分享他们自定义的控件。

本文中，你将实现一个自己的 RangeSlider 自定义控件。这个控件是一个两端都可以滑动的，也就是说，你可以通过该控件获得最小值和最大值。你将会接触到这样一些概念：对现有控件的扩展，设计和实现 自定义控件的 API，甚至还能学到如何分享你的自定义控件到开发社区中。

注意：本文截稿时，我们还不会贴出关于 iOS 8 beta 版本的截图。所有文中涉及到的截图都是在iOS 8之前的版本中得到的，不过结果非常类似。

目录：

开始

Images vs. CoreGraphics

添加默认的控件属性

添加交互逻辑

添加触摸处理

值改变的通知

结合 Core Graphics 对控件进行修改

处理控件属性的改变

何去何从？

开始

假设你在开发一个应用程序，该程序提供搜索商品价格列表。通过这个假象的应用程序允许用户对搜索结果进行过滤，以获得一定价格范围的商品。你可 能会提供这样一个用户界面：两个 UISlider 控件，一个用于设置最低价格，另外一个设置最高价格。然而，这样的设计，不能够让用户很好的感知价格的范围。要是能够提供一个 slider，两端可以分别设置用于搜索的最高和最低的价格范围，就更好了。

你可以通过创建一个 UIView 的子类，然后为可视的价格范围定做一个 view。这对于应用程序内部来说，是 ok的，但是要想移植到别的程序中，就需要花更多的精力了。

最好的办法是将构建一个新的尽可能通用的 UI 控件，这样就能在任意的合适场合中重用。这也是自定义控件的本质。

启动 Xcode，File/New/Project，选中 iOS/Application/Single View Application 模板，然后点击 Next。在接下来的界面中，输入 CustomSliderExample 当做工程名，然后是 Organization Name 和 Organization Identifier，然后，一定要确保选中 Swift 语言，iPhone 选中，Use Core Data 不要选。

最后，选择一个保存工程的地方并单击 Create。

首先，我们需要做出决定的就是创建自定义控件需要继承自哪个类，或者对哪个类进行扩展。

位了使自定义控件能够在应用程序中使用，你的类必须是 UIView 的一个子类。

如果你注意观察苹果的 UIKit 参考，会发现框架中的许多控件，例如 UILabel 和 UIWebView 都是直接继承自 UIView 的。然而，也有极少数，例如 UIButton 和 UISwitch 是继承自 UIControl 的，如下继承图所示：

注意：iOS 中 UI 组件的完整类继承图，请看 UIKit Framework 参考。

UIControl 实现了 target-action 模式，这是一种将变化通知订阅者的机制。UIControl 同样还有一些与控件状态相关的属性。在本文中的自定义空间中，将使用到 target-action 模式，所以从 UIControl 开始继承使用将是一个非常好的切入点。

在 Project Navigator 中右键单击 CustomSliderExample，选择 New File…，然后选择 iOS/Source/Cocoa Touch Class 模板，并单击 Next。将类命名位 RangeSlider，在 Subclass of 字段中输入 UIControl，并确保语言是 Swift。然后单击 Next，并在默认存储位置中 Create 出新的类。

虽然编码非常让人愉悦，不过你可能也希望尽快看到自定义控件在屏幕中熏染出来的模样！在写自定义控件相关的任何代码之前，你应该先把这个控件添加到 view controller中，这样就可以实时观察控件的演进程度。

ew的。尽管如此，还是有一些棘手的事情，像 UIButton 和UISwitch 是继承于 UIControl ，像如下的层级关系所示：

注意：如果你想查看一个完整的UI组件类层级示意图，请阅读UIKit Framework Reference。

UIControl 使用的是target-action pattern机制，这是一种用于通知用户信息改变的机制。 UIControl 也具有很多的属性来表示当前的控制状态。在这个自定义控件中将使用target-action pattern，所以 UIControl 将担当重要的起始点。

在项目导航中右击CustomSliderExample组然后选择New File…，选择iOS/Source/Cocoa Touch Class模板点击Next。类取名为RangeSlider，在Subclass of中输入 UIC

由于项目是从基于谷歌浏览器改版成基于IE浏览器，所以项目中基本上是以jQuery来控制DOM，其中遇到了使用数组的push和jQuery的html方法来动态生成页面（主要是一个个运单），页面中引用了swiper，再通过循环生成后台数据所反的相对应个数的slider，但是发现在页面载入后，组件并没有生效，后来终于通过一系列搜索找到了解决的方法，也是痴呆了TAT。

<section>标签中就是装的动态生成的内容。

这里是生成所有订单的方法，其中涉及到swiper的push方法在相关图片注释处。

接下来初始化swiper，然后在请求后台数据成功后的回调函数调用fullOrder方法

结果发现swiper根本没有被调用到，默默的mark一下，在图片多的情况下判断swiper是否成功初始化看左右按钮的颜色是否一深一浅就知道了。

正确初始化swiper的方法应该是在fullOrder方法之后或者是在fullOrder里的element.html()之后。由于swiper是需要 先初始化再执行 ，但这里是先生成swiper， 所以需要在生成swiper之后再初始化 。

只有这样在页面加载完后swiper才会被调用成功哒。

---