Interface customization

[veyhong]

Interface customization need to be setup in code app, cannot use from Storyboard ? Can u give example how to customized too ? I have no Idea how to customized this QRCodeReaderDisplayable at all.

[shanmarkus]

• 1

[reshadf]

Any help or a more in depth example would be nice of this

[ledikari]

waiting for this as well.

[hanguyen221]

Hi guys,

I've just tried this way below to customize the interface. Hope it works for you guys too.

• Step 1: make sure you can use (inherit) QRCodeReader classes (I used to "pod" this but it didn't work so I copied all classes to my project. You know how to deal if you got the same prob).

• Step 2: Go to QRCodeReaderViewController, add any customization you want in viewWillAppear function. (Unlock the file if asked).

• Step 3: (Might be skipped) I got UI prob with presenting readerVC so I changed to pushing it by:

• Replace present present(readerVC, animated: true, completion: nil) by self.navigationController?.pushViewController(readerVC, animated: true)
• Replace dismiss(animated: true, completion: nil) by readerVC.navigationController?.popViewController(animated: true).

• Step 4: (Optional) Go to QRCodeReaderViewControllerBuilder to disable/enable any default UI components by changing true -> false and vice versa. (If you disable a component, you should comment its action function).

[karlisl]

Here's how you can customize interface programmatically without modifying the library:

Setup your VC:

lazy var reader: QRCodeReaderViewController = {
    let builder = QRCodeReaderViewControllerBuilder {
        let readerView = QRCodeReaderContainer(displayable: CustomQRCodeReaderView())
        $0.readerView = readerView
        $0.reader = QRCodeReader(metadataObjectTypes: [.qr], captureDevicePosition: .back)
    }
    
    return QRCodeReaderViewController(builder: builder)
}()

Create CustomQRCodeReaderView.swift:

import UIKit
import AVFoundation
import QRCodeReader

class CustomQRCodeReaderView: UIView, QRCodeReaderDisplayable {
    let cameraView: UIView = UIView()
    let cancelButton: UIButton? = UIButton()
    let switchCameraButton: UIButton? = SwitchCameraButton()
    let toggleTorchButton: UIButton? = ToggleTorchButton()
    var overlayView: UIView? = UIView()
    private weak var reader: QRCodeReader?

    func setupComponents(showCancelButton: Bool, showSwitchCameraButton: Bool, showTorchButton: Bool, showOverlayView: Bool, reader: QRCodeReader?) {
        self.reader = reader

        // Listen for orientation change notifications
        NotificationCenter.default.addObserver(self, selector: #selector(orientationDidChange), name: .UIDeviceOrientationDidChange, object: nil)

        // Subviews
        addSubview(cameraView)

        // This is important
        if let reader = reader {
            cameraView.layer.insertSublayer(reader.previewLayer, at: 0)
            orientationDidChange()
        }

        // Constraints
        for attribute in Array<NSLayoutAttribute>([.left, .top, .right, .bottom]) {
            addConstraint(NSLayoutConstraint(item: cameraView, attribute: attribute, relatedBy: .equal, toItem: self, attribute: attribute, multiplier: 1, constant: 0))
        }
    }

    @objc func orientationDidChange() {
        setNeedsDisplay()

        // Set view orientation
        if let connection = reader?.previewLayer.connection, connection.isVideoOrientationSupported {
            connection.videoOrientation = QRCodeReader.videoOrientation(deviceOrientation: UIDevice.current.orientation,
                                                                        withSupportedOrientations: UIApplication.shared.supportedInterfaceOrientations(for: UIApplication.shared.keyWindow),
                                                                        fallbackOrientation: connection.videoOrientation)
        }
    }
}