如何在二维码扫描仪屏幕中设置图像和按钮？

Question

我想制作一个条形码扫描仪应用程序。由于我是 Swift 和 Xcode 的新手，我设法从其他堆栈溢出文章中获得帮助，以创建一个可以扫描条形码的页面。我的问题是我不想要全屏，我想在顶部添加标签，在底部添加按钮，在中心 QRCode 屏幕中。我也上传了屏幕。

但是我正在全屏显示。我怎样才能实现这个功能。这是我的代码

@IBAction func scanButtonTapped(_ sender: UIButton) {
    scanQRCodeTapped()
}




func scanQRCodeTapped(){
    DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
        self.view.backgroundColor = UIColor.black
        self.captureSession = AVCaptureSession()

        guard let videoCaptureDevice = AVCaptureDevice.default(for: .video) else {
            
            print("No Device Found")
            return
        }
        let videoInput: AVCaptureDeviceInput

        do {
            videoInput = try AVCaptureDeviceInput(device: videoCaptureDevice)
        } catch {
            return
        }

        if (self.captureSession.canAddInput(videoInput)) {
            self.captureSession.addInput(videoInput)
        } else {
            self.failed()
            return
        }

        let metadataOutput = AVCaptureMetadataOutput()

        if (self.captureSession.canAddOutput(metadataOutput)) {
            self.captureSession.addOutput(metadataOutput)

            metadataOutput.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
            metadataOutput.metadataObjectTypes = [.qr]
        } else {
            self.failed()
            return
        }

        self.previewLayer = AVCaptureVideoPreviewLayer(session: self.captureSession)
        self.previewLayer.frame = self.view.layer.bounds
        self.previewLayer.videoGravity = .resizeAspectFill
        self.view.layer.addSublayer(self.previewLayer)

        self.captureSession.startRunning()
    }
    
}
func failed() {
    let ac = UIAlertController(title: "Scanning not supported", message: "Your device does not support scanning a code from an item. Please use a device with a camera.", preferredStyle: .alert)
    ac.addAction(UIAlertAction(title: "OK", style: .default))
    present(ac, animated: true)
    captureSession = nil
}

func metadataOutput(_ output: AVCaptureMetadataOutput, didOutput metadataObjects: [AVMetadataObject], from connection: AVCaptureConnection) {
    captureSession.stopRunning()
    if let metadataObject = metadataObjects.first {
        guard let readableObject = metadataObject as? AVMetadataMachineReadableCodeObject else { return }

        guard let stringValue = readableObject.stringValue else { return }
        AudioServicesPlaySystemSound(SystemSoundID(kSystemSoundID_Vibrate))
        found(code: stringValue)
        login(emailID: stringValue)

    }

    dismiss(animated: true)  
}


func found(code: String) {
    print(code)
}

override var prefersStatusBarHidden: Bool {
    return true
}

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
    return .portrait
}
override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    if (captureSession?.isRunning == true) {
        captureSession.stopRunning()
    }
}

Answer 1

您可以根据故事板中的设计来设计屏幕。

像这样：

灰色区域是 UIView，我们将为扫描仪添加 previewLayer。

ViewController 代码应如下所示：

import UIKit
import AVKit

class QRCodeViewController: UIViewController, AVCaptureMetadataOutputObjectsDelegate {
    
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var scannerView: UIView!
    @IBOutlet weak var scanButton: UIButton!
    
    var captureSession: AVCaptureSession!
    var previewLayer: AVCaptureVideoPreviewLayer!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override var prefersStatusBarHidden: Bool {
        return true
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return .portrait
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        if (captureSession?.isRunning == true) {
            captureSession.stopRunning()
        }
    }

    @IBAction func scanButtonAction(_ sender: UIButton) {
        scanQRCodeTapped()
    }
    
    func scanQRCodeTapped() {
        self.scannerView.backgroundColor = UIColor.black
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            self.captureSession = AVCaptureSession()
            guard let videoCaptureDevice = AVCaptureDevice.default(for: .video) else {
                print("No Device Found")
                return
            }
            let videoInput: AVCaptureDeviceInput
            do {
                videoInput = try AVCaptureDeviceInput(device: videoCaptureDevice)
            } catch {
                return
            }
            if (self.captureSession.canAddInput(videoInput)) {
                self.captureSession.addInput(videoInput)
            } else {
                
                self.failed()
                return
            }
            let metadataOutput = AVCaptureMetadataOutput()
            if (self.captureSession.canAddOutput(metadataOutput)) {
                self.captureSession.addOutput(metadataOutput)
                metadataOutput.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
                metadataOutput.metadataObjectTypes = [.qr]
            } else {
                self.failed()
                return
            }
            self.previewLayer = AVCaptureVideoPreviewLayer(session: self.captureSession)
            self.previewLayer.frame = self.scannerView.layer.bounds
            self.previewLayer.videoGravity = .resizeAspectFill
            self.scannerView.layer.addSublayer(self.previewLayer)
            self.captureSession.startRunning()
        }
        
    }
    
    func failed() {
        let ac = UIAlertController(title: "Scanning not supported", message: "Your device does not support scanning a code from an item. Please use a device with a camera.", preferredStyle: .alert)
        ac.addAction(UIAlertAction(title: "OK", style: .default))
        present(ac, animated: true)
        captureSession = nil
    }
    
    func metadataOutput(_ output: AVCaptureMetadataOutput, didOutput metadataObjects: [AVMetadataObject], from connection: AVCaptureConnection) {
        captureSession.stopRunning()
        if let metadataObject = metadataObjects.first {
            guard let readableObject = metadataObject as? AVMetadataMachineReadableCodeObject else { return }
            
            guard let stringValue = readableObject.stringValue else { return }
            AudioServicesPlaySystemSound(SystemSoundID(kSystemSoundID_Vibrate))
            found(code: stringValue)
            login(emailID: stringValue)
            
        }
        dismiss(animated: true)
    }
    
    
    func found(code: String) {
        print(code)
    }

}

当您点击扫描按钮时，输出将如下所示：

如何在二维码扫描仪屏幕中设置图像和按钮？

How to set Image and Button In qr Code scanner Screen?

xcode

qr-code

avfoundation

ios

swift