才接触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状态下,直接修改代码中的参数了。像这样:
终于解决了这个技术难题,感觉自己的开发水平进步了一大截。继续加油!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。