ios 绘制线框_学做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状态下，直接修改代码中的参数了。像这样：

终于解决了这个技术难题，感觉自己的开发水平进步了一大截。继续加油！