二维码识别是很常见的app功能,为了更方便的在每一个使用二维码功能地方都能更快的实现,我把二维码功能写入到了一个自动的View里面,使用的时候和普通的UIView是一样的。效果如图(因为是模拟器运行的,所以摄像头看不到,用真机的时候就正常了):

ios_qr

 

分成3步来实现:

1、自定义UIView,实现方形的块。
2、实现摄像头捕捉。
3、扫描的横线动画。

自定义UIView

首先新建一个类继承自UIView

class QRScannerView: UIView

接着实现两个重要的方法:

required init(coder aDecoder: NSCoder)// 这个方法实现的目的是,我们在storyboard文件中使用这个View的时候,会直接显示出来效果。
override func drawRect(rect: CGRect)// 这个实现的目的是绘制我们要显示的内容

Ios_qr_ui
两个方法实现的代码如下:

    required init(coder aDecoder: NSCoder)
    {
        super.init(coder: aDecoder)
        self.initView()
    }
    override func drawRect(rect: CGRect)
    {
        let centerRect = getScannerRect(rect)
        //获取画图上下文
        let context:CGContextRef = UIGraphicsGetCurrentContext();
        CGContextSetAllowsAntialiasing(context, true)
        
        // 填充整个控件区域
        CGContextSetFillColorWithColor(context, mBackgroundColor.CGColor)
        CGContextFillRect(context, rect)
        
        //移动坐标
        let x = rect.size.width/2
        let y = rect.size.height/2
        var center = CGPointMake(x,y)
        // 中间扣空
        CGContextClearRect(context, centerRect)
        
        // 绘制正方形框
        CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
        CGContextSetLineWidth(context, mLineSize)
        CGContextAddRect(context, centerRect)
        CGContextDrawPath(context, kCGPathStroke)
        // 绘制4个角
        let cornerWidth = centerRect.width/mCornerLineRatio;
        let cornerHeight = centerRect.height/mCornerLineRatio;
        CGContextSetLineWidth(context, mCornerLineSize)
        CGContextSetStrokeColorWithColor(context, UIColor.greenColor().CGColor)
        // 绘制左上角
        CGContextMoveToPoint(context, centerRect.origin.x, centerRect.origin.y + cornerHeight)
        CGContextAddLineToPoint(context, centerRect.origin.x, centerRect.origin.y)
        CGContextAddLineToPoint(context, centerRect.origin.x + cornerWidth, centerRect.origin.y)
        // 绘制右上角
        CGContextMoveToPoint(context, centerRect.origin.x + centerRect.size.width - cornerWidth, centerRect.origin.y)
        CGContextAddLineToPoint(context, centerRect.origin.x + centerRect.size.width, centerRect.origin.y)
        CGContextAddLineToPoint(context, centerRect.origin.x + centerRect.size.width, centerRect.origin.y + cornerHeight)
        // 绘制右下角
        CGContextMoveToPoint(context, centerRect.origin.x + centerRect.size.width, centerRect.origin.y + centerRect.size.height - cornerHeight)
        CGContextAddLineToPoint(context, centerRect.origin.x + centerRect.size.width, centerRect.origin.y + centerRect.size.height)
        CGContextAddLineToPoint(context, centerRect.origin.x + centerRect.size.width - cornerWidth, centerRect.origin.y + centerRect.size.height)
        // 绘制左下角
        CGContextMoveToPoint(context, centerRect.origin.x, centerRect.origin.y + centerRect.size.height - cornerHeight)
        CGContextAddLineToPoint(context, centerRect.origin.x, centerRect.origin.y + centerRect.size.height)
        CGContextAddLineToPoint(context, centerRect.origin.x + cornerWidth, centerRect.origin.y + centerRect.size.height)
        CGContextDrawPath(context, kCGPathStroke)
    }

到此自定义控件的界面已经完成,这个时候可以看到有一个方形的框在屏幕上了。一篇太长分成两篇来写,继续请看下一篇。