自定义控件演示@IBDesignable和@IBInspectable

@IBInspectable：通过这个属性，你现在为你的自定义类的任何属性建立了一个用户界面。
@IBDesignable：指定这个属性，能在interface builder上实时渲染自定义控件。
我们做一个简单的自定义控件，完成视图是这样的：

Screen Shot 2015-09-05 at 11.22.35 PM.png

正如上面说到，@IBDesignable使其实时渲染，而@IBInspectable则在右边属性栏体现出了
Bar Circle Color
Progress Color
Line Width
Progress Value
Value Font Size
这几个属性，我们可以直接修改，视图会实时发生改变。

第一步：
新建一个项目&&新建一个Cocoa Touch Class文件继承于UIView，命名为ProgressView

Screen Shot 2015-09-06 at 10.47.34 PM.png

第二步：
在ProgressView里面敲入如下代码:
`

import UIKit
@IBDesignable class ProgressView: UIView {

    private let π = CGFloat(M_PI)
    private let botCircle = CAShapeLayer()
    private let progressCircle = CAShapeLayer()
    private var circlePath = UIBezierPath()
    private var textLabel = UILabel()

    @IBInspectable var botCircleColor: UIColor = UIColor.grayColor()
    @IBInspectable var progressCircleColor: UIColor = UIColor.greenColor()
    @IBInspectable var lineWidth: Float = 3.0
    @IBInspectable var progressValue: Int = 50
    @IBInspectable var valueFontSize: Int = 40

//
private func calcArc(arc: CGFloat) -> CGFloat {
    return π * arc / 180
}

private func formatPercent(var percent: Int) -> NSMutableAttributedString {
    
    let string = String("\(percent)%") as NSString
    var attributedString = NSMutableAttributedString(string: string as String)
    
    var numColor = UIColor.blackColor()
    let firstAttributes = [NSForegroundColorAttributeName: numColor,
        NSFontAttributeName: UIFont.systemFontOfSize(CGFloat(valueFontSize))]
    let secondAttributes = [NSForegroundColorAttributeName: UIColor.blackColor(),  NSUnderlineStyleAttributeName: 1, NSFontAttributeName: UIFont.systemFontOfSize(11)]
    
    attributedString.addAttributes(firstAttributes, range: string.rangeOfString(String(percent)))
    attributedString.addAttributes(secondAttributes, range: string.rangeOfString("%"))
    
    return attributedString
}

override func drawRect(rect: CGRect) {
    
    // define the path
    let centerPointCircle = CGPoint(x: frame.width/2, y: frame.height/2)
    let radius = frame.width / 2 * 0.8
    circlePath = UIBezierPath(arcCenter: centerPointCircle, radius: radius, startAngle: calcArc(-90), endAngle: calcArc(270), clockwise: true)
    
    // define background circle
    botCircle.path = circlePath.CGPath
    botCircle.strokeColor = botCircleColor.CGColor
    botCircle.fillColor = UIColor.clearColor().CGColor
    botCircle.lineWidth = CGFloat(lineWidth)
    botCircle.strokeStart = 0
    botCircle.strokeEnd = 1
    
    // define progress circle
    progressCircle.path = circlePath.CGPath
    progressCircle.strokeColor = progressCircleColor.CGColor
    progressCircle.fillColor = UIColor.clearColor().CGColor
    progressCircle.lineWidth = CGFloat(lineWidth)
    progressCircle.strokeStart = 0
    progressCircle.strokeEnd = CGFloat(progressValue) / 100
    
    // define UIlabel
    textLabel.frame = CGRect(origin: CGPoint(x: circlePath.bounds.minX, y: circlePath.bounds.minY), size: circlePath.bounds.size)
    textLabel.textAlignment = NSTextAlignment.Center
    textLabel.numberOfLines = 0
    textLabel.layer.cornerRadius = radius
    textLabel.layer.masksToBounds = true
    textLabel.attributedText = formatPercent(progressValue)
    
    addSubview(textLabel)
    
    layer.addSublayer(botCircle)
    layer.addSublayer(progressCircle)
}
}

注意使用@IBDesignable和@IBInspectable标注的部分。

第三步：
在storyboard拖拽一个uiview到viewcontroller上，

Screen Shot 2015-09-08 at 7.46.28 PM.png

右侧属性栏设置类为ProgressView。
点击Editor->Refresh All Views.然后就能看到结果啦～