在Xcode6中使用IBDesignable建立自定义控件(翻译)

英文原文地址

在 Xcode 的旧版本中，试图建立一个自定义控件，并非很容易，由于在IB中，并不能实时预览到你的设计成果，只能在模拟器中测试。对于设计一个单一组件，可能须要花费大量时间。

Xcode6 的发布，苹果为开发者构建自定义控件推出了新功能IBDesignable和IBInspectable，容许在IB中实时预览设计成果。很明显，这会给实际开发提高很高效率。

在本教程中，将介绍IBDesignable IBInspectable，以及展现如何利用这个新功能。除过建立demo示例没有更好地方式来阐述这一新特性，所以，建立一个"Rainbow"自定义界面。

---

IBDesignable和IBInspectable

使用IBDesignable和IBInspectable，开发者建立界面(或视图)能够实时呈如今IB中。通常来讲，为了使用这个新特性，你须要作的是建立一个UIView或者UIControl的子类，而后在定义类的前面加上@IBDesignable关键字。若是是OC，使用IB_DESIGNABLE宏。下面是Swift示例代码:

@IBDesignable
class Rainbow: UIView {
}
复制代码

在Xcode旧版本中，你能够在IB中编辑User Defined Runtime Attributes来改变一个对象的属性(例如:layer.cornerRadius)，问题是你须要确切知道属性名。IBInspectable只须要一步，对一个可视化类的属性前面加上IBInspectable关键字前缀，该属性会在暴露在IB中，这就是一个更改属性值更简单的方法。

你若是使用Swift开发app，你须要作的只是在你选择的属性前面加上@IBInspectable关键字，下面是个示例代码片断:

@IBInspectable var firstColor: UIColor = UIColor.blackColor() {
   // 值改变时更新UI
}
复制代码

建立Xcode项目

建立一个新的Xcode项目，选择Single View Application模板，起名为RainbowDemo，在此项目中，将使用Swift语言，所以，建立项目时不要忘记勾选。

完成后，选择Main.storyboard文件，设置View Controller的根视图View的背景颜色Hex Color值为38334C(或者任何你想要的颜色)。而后从对象库中拖一个View放进View Controller，设置它的大小Width为600，Height为434，而后把它放在根视图的中心，设置新视图View和根视图相同背景颜色。

提示：若是想改变RGB颜色值，只需打开调色板和切换到滑块标签来改变RGB值

在Xcode6中，为了适配各个iOS设备，你必须为视图View配置自动布局约束。对于简单的约束，你能够在自动布局菜单单击Issues选项，选择Add Missing Contraints，Xcode将自动为View添加布局约束。

---

建立自定义View类

如今，你已经在storyboard中建立了一个View，是时候建立自定义View类了。使用Cocoa Touch Class文件模板，建立自定义类文件，继承自UIView，起名为"Rainbow"。

在自定义类中插入如下代码:

import UIKit

class Rainbow: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}
复制代码

如前所述，这个可视化类是UIView的子类，让自定义类实时呈现，须要override上述两个方法。而后，打开辅助编辑器，更改新拖的View的自定义类为Rainbow类。

---

实现IBDesignable控制

为了实现实时预览，在自定义类前面加一个前缀@IBDesignable关键字

@IBDesignable 
class Rainbow: UIView {
    ...
}
复制代码

这个关键字确实简单，可是这简单地关键字将使你的开发更加容易。接下来，添加一些设置颜色的属性。在Rainbow类中插入如下代码:

@IBInspectable var firstColor: UIColor = UIColor(red: (37.0/255.0), green: (252.0/255), blue: (244.0/255.0), alpha: 1.0)
@IBInspectable var secondColor: UIColor = UIColor(red: (171.0/255.0), green: (250.0/255), blue: (81.0/255.0), alpha: 1.0)
@IBInspectable var thirdColor: UIColor = UIColor(red: (238.0/255.0), green: (32.0/255), blue: (53.0/255.0), alpha: 1.0)
复制代码

在这里，咱们预先定义每一个属性一个默认颜色，每次用户更改它们的值时会重绘视图。更重要的是，咱们为每一个属性加了一个@IBInspectable关键字前缀，如今去IB的属性检查器，你能够直观地发现这些属性:

很酷，对吧？IBInspectable经过指示属性，你可使用颜色选择器可视化地编辑它们。

在Rainbow类中，为了在屏幕上画一个圆，插入如下代码:

func addOval(lineWidth: CGFloat, path: CGPathRef, strokeStart: CGFloat, strokeEnd: CGFloat, strokeColor: UIColor, fillColor: UIColor, shadowRadius: CGFloat, shadowOpacity: Float, shadowOffset: CGSize) {
        
   let arc = CAShapeLayer()
   arc.lineWidth = lineWidth
   arc.path = path
   arc.strokeStart = strokeStart
   arc.strokeEnd = strokeEnd
   arc.strokeColor = strokeColor.CGColor
   arc.fillColor = fillColor.CGColor
   arc.shadowRadius = shadowRadius
   arc.shadowOpacity = shadowOpacity
   arc.shadowOffset = shadowOffset
   layer.addSublayer(arc)
}
复制代码

为了保证代码的简洁和可读性，咱们定义了依据方法调用者传入参数来绘制一个完整的圆或者半圆的公共方法。利用CAShapeLayer类能够很简单的画一个圆或圆弧。你可使用strokeStart和strokeEnd属性控制渲染的开始和结束。经过改变strokeEnd的值在0.0到1.0之间，你能够绘制一个完整或者部分的圆。其他的属性是只是用于设置渲染颜色，阴影颜色等，在CAShaperLayer官方文档中能够查看更详细的全部可用属性。

接下来，添加如下方法:

override func drawRect(rect: CGRect) {
    // 添加圆弧
    addCircle(80, capRadius: 20, color: firstColor)
    addCircle(150, capRadius: 20, color: secondColor)
    addCircle(215, capRadius: 20, color: thirdColor)
}

func addCircle(arcRadius: CGFloat, capRadius: CGFloat, color: UIColor) {
    let x = CGRectGetMidX(bounds)
    let y = CGRectGetMidY(bounds)
    
    // 底部圆弧
    let pathBottom = UIBezierPath(ovalInRect: CGRectMake((x - (arcRadius/2)),
        (y - (arcRadius/2)), arcRadius, arcRadius)).CGPath
    addOval(20.0, path: pathBottom, strokeStart: 0, strokeEnd: 0.5,
        strokeColor: color, fillColor: UIColor.clearColor(),
        shadowRadius: 0, shadowOpacity: 0, shadowOffset: CGSizeZero)
    
    // 中间圆弧
    let pathMiddle = UIBezierPath(ovalInRect: CGRectMake((x - (capRadius/2)) - (arcRadius/2),
        (y - (capRadius/2)), capRadius, capRadius)).CGPath
    addOval(0.0, path: pathMiddle, strokeStart: 0, strokeEnd: 1.0,
        strokeColor: color, fillColor: color,
        shadowRadius: 5.0, shadowOpacity: 0.5, shadowOffset: CGSizeZero)
    
    // 顶部圆弧
    let pathTop = UIBezierPath(ovalInRect: CGRectMake((x - (arcRadius/2)),
        (y - (arcRadius/2)), arcRadius, arcRadius)).CGPath
    addOval(20.0, path: pathTop, strokeStart: 0.5, strokeEnd: 1.0,
        strokeColor: color, fillColor: UIColor.clearColor(),
        shadowRadius: 0, shadowOpacity: 0, shadowOffset: CGSizeZero)
}
复制代码

drawRect:方法默认什么也不作，为了在自定义View中画圆，咱们override此方法来实现本身的绘制代码。addCircle:方法有三个参数：arcRadius，capRadius和color。arcRadius是圆弧的半径，capRadius是圆弧边缘半径。

addCircle:方法利用UIBezierPath画圆弧的简单工做原理:

1. 首先，在底部画了个半圆弧
2. 接下来，在圆弧边缘画了一个完整的小圆
3. 最后，画了另外一半圆弧

在drawRect:方法中，咱们调用了addCircle:方法三次，传入的参数指定圆弧该怎样画：

利用IBInspectable属性，你能够在IB中自由改变每一个圆弧的颜色，而不须要写代码:

显然，你能够进一步利用@IBInspectable暴露arcRadius属性，即可以在IB中修改绘制圆弧半径。

---

总结

经过本教程后，你如今了解了在Xcode6中如何利用IBDesignable和IBInspectable实时预览界面。利用这个新特性，你能够更高效建立自定义组件。

RainbowDemo地址