前言:利用一個小demo來對二維碼進行學習,總共四個界面(主界面,生成二維碼界面,識別二維碼界面,掃描二維碼界面)

想要源碼點這里:QR-code

一.二維碼的介紹

1.什么是二維碼?

二維條碼/二維碼是用某種特定的幾何圖形按一定規(guī)律在平面分布的黑白相間的圖形記錄數(shù)據(jù)符號信息的

總結(jié): 用圖形記錄標記一些信息,方便通過圖形識別來獲取信息

2 應(yīng)用場景

信息獲?。?、地圖、WIFI密碼、資料）
手機電商（用戶掃碼、手機直接購物下單）
手機支付（掃描商品二維碼，通過銀行或第三方支付提供的手機端通道完成支付)
微信添加好友

二.二維碼界面的搭建

1.總共四個界面,可以采用storyBoard來搭建

2.四個storyBoard放在一個界面,看起來不美觀,還很容易搞混,有沒有優(yōu)化方案?
可以把四個storyBoard分別開來,單獨放到一個界面里面

3.怎么把storyBoard單獨放在一個界面,而且還讓這些界面有聯(lián)系(連線)?

可以用storyBoard reference 來解決 就是用一個引用來代替storyBoard,保持storyBoard間的聯(lián)系(連線)

4.最終效果

三.二維碼的生成

1.生成二維碼的步驟

1.1 創(chuàng)建濾鏡 CIFilter
濾鏡屬于CoreImage框架,要導入該框架 該框架將常用來處理圖片(生成毛玻璃效果/二維碼)

1.2 給濾鏡設(shè)置內(nèi)容(用kvc方式賦值)
內(nèi)容必須為NSData類型

1.3 獲取生成的二維碼圖片
獲取的圖片是CIImage類型的,使用的話要進行轉(zhuǎn)換

2.運行程序發(fā)現(xiàn)生成的二維碼圖片很模糊,為什么?

生成為二維碼圖片大小為 27 * 27 被拉伸的太大,所以不清晰

3.怎么顯示清晰的二維碼?

蘋果提供一個api對圖片放大,還不影響清晰度

  // 1.創(chuàng)建Transform
    let scale = imageView.bounds.width / orginalImage.extent.width
    let transform = CGAffineTransformMakeScale(scale, scale)

    // 2.放大圖片
    let hdImage = orginalImage.imageByApplyingTransform(transform)

4.設(shè)置前景圖片

4.1 為什么要設(shè)置前景圖片?
一般二維碼中心都有一張小的圖片,就是前景圖片
生成二維碼沒有前景圖片,需要手動添加前景圖片

4.2 怎么添加前景圖片?
就是把兩張圖片合成為一張圖片,用繪圖就可以輕松搞定

4.3 繪圖的步驟
4.31 開啟圖形上下文
4.32 將二維碼圖片畫到圖形上下文(二維碼的size = 圖形上下文的size)
4.33 將前景圖片畫到圖形上下文(前景圖片的center = 圖形上下文的center)
4.34 從圖形上下文獲取新的圖片
4.35 關(guān)閉圖形上下文

四.二維碼的識別

1.獲取相冊中的二維碼

1.1 怎么獲取相冊?
1.11 創(chuàng)建照片選擇控制器
1.12 設(shè)置照片的來源類型
1.13 設(shè)置代理
1.14 彈出控制器

     // 1.創(chuàng)建照片選擇控制器
    let ipc = UIImagePickerController()
    // 2.設(shè)置來源的類型
    ipc.sourceType = .PhotoLibrary
    // 3.設(shè)置代理
    ipc.delegate = self
    // 4.彈出控制器
    presentViewController(ipc, animated: true, completion: nil)

      在代理方法中實現(xiàn)    選中圖片dismiss掉控制器
func imagePickerController(picker: UIImagePickerController,   
didFinishPickingMediaWithInfo info: [String : AnyObject]) {

      //選中照片
    imageView.image = info[UIImagePickerControllerOriginalImage] as? UIImage

    picker.dismissViewControllerAnimated(true, completion: nil)
}

2.識別二維碼的步驟

2.1 創(chuàng)建 CIDetector對象(識別器)
2.2 獲取圖片,并將圖片轉(zhuǎn)成 CIIImage
2.3 識別圖片中的二維碼(得到一個數(shù)組,圖片中可能有多個二維碼)
2.4 遍歷數(shù)組

   // 1.創(chuàng)建識別器
    let detector = CIDetector(ofType: CIDetectorTypeQRCode, context: nil, options: nil)

    // 2.獲取圖片,并且將圖片轉(zhuǎn)成CIIImage
    let image = imageView.image!
    guard let ciImage = CIImage(image: image) else {
        return
    }
    // 3.識別圖片中二維碼
    let features = detector.featuresInImage(ciImage)

    // 4.遍歷數(shù)組中所有的元素
    for f in features {
        guard let qrCodeF = f as? CIQRCodeFeature else {
            continue
        }
        //打印二維碼的信息
        print(qrCodeF.messageString)
    }

五.掃描二維碼(需要真機操作)

1.掃描二維碼界面搭建

1.1 主要就是掃描框的搭建
掃描框中再加上一個ImageView,給ImageView一個動畫 模擬正在掃描(沖擊波)

1.2 掃描框是一張圖片,沖擊波也是一張圖片,他們的位置和尺寸是一樣的
為了方便以后更改控件的位置,可以用一個view把掃描框和沖擊波封裝在里面

1.3 掃描動畫(沖擊波)動畫怎么做?
1.31 設(shè)置沖擊波的底部約束相對于父控件(view)有一個間距
1.32 更改約束的間距,來達到動畫的效果

    // 1.改變約束(原來約束為-240)
    scanViewBottomCons.constant = 240
    // 2.執(zhí)行動畫
    UIView.animateWithDuration(1.0) {
        UIView.setAnimationRepeatCount(MAXFLOAT)
        self.qrCodeView.layoutIfNeeded()
    }

2.掃描二維碼

2.1 掃描步驟
2.11 創(chuàng)建捕捉會話(需要導入AVFoundation框架)
2.12 設(shè)置輸入(攝像頭)
2.13 設(shè)置輸出 Metadata
2.14 添加預覽圖層(可以沒有)
預覽圖層是為了讓用戶知道掃描到哪里了,一般為了用戶體驗,都會添加
2.15 開始掃描

源代碼:建議不要死記,用的時候直接拷貝
     // 1.創(chuàng)建捕捉會話
    let session = AVCaptureSession()

    // 2.設(shè)置輸入(攝像頭)
    let device = AVCaptureDevice.defaultDeviceWithMediaType(AVMediaTypeVideo)
    guard let input = try? AVCaptureDeviceInput(device: device) else {
        return
    }
    session.addInput(input)

    // 3.設(shè)置輸出(Metadata)
    let output = AVCaptureMetadataOutput()
    // 設(shè)置代理
    output.setMetadataObjectsDelegate(self, queue: dispatch_get_main_queue())
    session.addOutput(output)
    // 設(shè)置output的輸出的類型(該類型的設(shè)置必須在添加到session之后)
    output.metadataObjectTypes = [AVMetadataObjectTypeQRCode]

    // 4.添加預覽圖層(可以沒有)
    let previewLayer = AVCaptureVideoPreviewLayer(session: session)
    previewLayer.frame = view.bounds
    view.layer.insertSublayer(previewLayer, atIndex: 0)

    // 5.開始掃描
    session.startRunning()

3.獲取掃描結(jié)果

3.1設(shè)置代理,在代理方法中拿到結(jié)果
代理方法

func captureOutput(captureOutput: AVCaptureOutput!, 
didOutputMetadataObjects metadataObjects: [AnyObject]!, 
fromConnection connection: AVCaptureConnection!) {

  guard let objc = metadataObjects.last as? AVMetadataMachineReadableCodeObject 

        else {
                  return
              }
              print(objc.stringValue)
          }

5.設(shè)置掃描區(qū)域.

5.1 為什么要設(shè)置掃描區(qū)域?

掃描二維碼,發(fā)現(xiàn)只要二維碼進入攝像頭區(qū)域,就能直接掃描

要求是進入掃描框,才進行掃描

5.2 怎么設(shè)置掃描區(qū)域?

通過設(shè)置 output.rectOfInterest屬性來設(shè)置掃描區(qū)域

    // 設(shè)置掃描的區(qū)域
    let screenW = UIScreen.mainScreen().bounds.width
    let screenH = UIScreen.mainScreen().bounds.height
    let x : CGFloat = qrCodeView.frame.origin.x / screenW
    let y : CGFloat = qrCodeView.frame.origin.y / screenH
    let w : CGFloat = qrCodeView.frame.width / screenW
    let h : CGFloat = qrCodeView.frame.height / screenH
    output.rectOfInterest = CGRect(x: y, y: x, width: h, height: w)

注意:掃描區(qū)域的坐標系與屏幕的坐標系正好相反 ( 掃描區(qū)域x = 屏幕坐標系 y)

5.3 設(shè)置掃描區(qū)域代碼寫到哪里?

掃描區(qū)域?qū)儆?輸出的一個屬性,應(yīng)該寫到創(chuàng)建輸出代碼的后邊

想要源碼點這里:QR-code