學作iOS開發：繪製線條

才接觸iOS開發的時候，以爲有件事很是奇怪，Xcode中組件有不少，但卻沒有一條線的組件。當時想到應該能夠經過UIView將高度設置爲1，就能夠獲得一條線了吧，不過放在視圖裏面就是需設置各類線束。也下分不便。更要命的時候，有時想要畫一個框，再來一個View上放一個View,再調整位置的話，那真是一場惡夢。想一想真是太無知了，這種思惟方式安全就是按PS或是AI的繪圖方式來作，但惋惜iOS不吃這一套。

後來才知道，UIView就至關於一個畫版，而只要你有足夠的想像力，你就可使用代碼在這張畫板上作出各類畫來，固然像繪製線條、矩形框之類的，可是小菜一碟。

要線一條線，無非就是告訴畫筆起點，再說提明終點，給出線條的粗細，顏色，如此這般就能夠繪出一條線來了。

前面咱們說過，UIView就是一張畫板，而這條畫板默認狀況下，就只能堆放一些組件，就是一張空白的，你想畫上東西，就得本身從新定義它。

在Xcode中，你能夠建立一個以UIView爲SuperClass的子類，而後再在drawRect(rect:) 中使用代碼繪出線條便可。

繪製線條，須要使用到UIBezierPath這個類。

let linePath = UIBezierPath()

// 將畫筆移動到起點位置
linePath.moveToPoint(CGPoint(x: 30, y: 120))
// 繪到 （290， 120）這個點
linePath.addLineToPoint(CGPoint(x: 290, y: 120))
linePath.addLineToPoint(CGPoint(x: 30, y: 240))
linePath.addLineToPoint(CGPoint(x: 290, y: 240))

// 線的粗線
linePath.lineWidth = 2.0
// 線條顏色
UIColor.redColor().setStroke()
// 繪出線條
linePath.stroke()

這裏繪出的是一條實線，若是須要繪出虛線怎麼呢？能夠這樣作：

// 畫虛線
let context = UIGraphicsGetCurrentContext()
let dashedPath = UIBezierPath()
dashedPath.moveToPoint(CGPoint(x: 30, y: 280))
dashedPath.addLineToPoint(CGPoint(x: 290, y: 280))
CGContextSaveGState(context)
CGContextSetLineDash(context, 0, [10, 10], 2)

dashedPath.lineWidth = 3.0

dashedPath.stroke()
CGContextRestoreGState(context)

在模擬裏跑下，能夠看到這樣的效果：

這是直線的畫法，若是是繪製一個矩形的話，能夠這樣作：

@IBDesignable
class RectView: UIView {
    
    // 邊框顏色
    @IBInspectable var strokeColor: UIColor = UIColor.blackColor()
    // 填充色
    @IBInspectable var fillColor: UIColor = UIColor.whiteColor()
    // 線的粗細
    @IBInspectable var lineWidth: CGFloat = 1.0
    
    override func drawRect(rect: CGRect) {
        // 實線矩形
        // 位置、長、寬
        let rectPath = UIBezierPath(rect: CGRectMake(30, 80, 260, 120))
        // 設置邊框顏色
        strokeColor.setStroke()
        // 線的粗細
        rectPath.lineWidth = lineWidth
        // 開始繪製
        rectPath.stroke()
        
        // 對矩形框進行填充
        fillColor.setFill()
        rectPath.fill()
        
        // 繪製虛線框
        let context = UIGraphicsGetCurrentContext()
        let dashedRect = UIBezierPath(rect: CGRectMake(30, 220, 260, 120))
        
        dashedRect.lineWidth = lineWidth
        
        CGContextSaveGState(context)
        CGContextSetLineDash(context, 5, [10, 10], 2)
        strokeColor.setStroke()
        dashedRect.stroke()
        CGContextRestoreGState(context)
    }

}

運行起來的效果是這樣的：

這裏有了兩個新的方法，一個是@IBDesignable，另外一個是@IBInspectable，他們有什麼做用呢？

通常狀況下，咱們使用代碼寫出來的圖，是Storyboard裏是看不以的，只能運行在模擬器中才能看到效果，這種太過於考驗寫代碼者的水平了，若是能邊寫代碼，邊看到圖形的效果，那就太好了。因而@IBDesignable就閃亮登場了。有了，你就能夠邊寫代碼，邊看到效果了。

那@IBInspectable又是幹什麼的呢？他是將代碼裏的變量添加到Xcode的變量列表中，這就樣就在GUI狀態下，直接修改代碼中的參數了。像這樣：

終於解決了這個技術難題，感受本身的開發水平進步了一大截。繼續加油！