Get Started With SwiftUI

In this guide you will learn step-by-step how to add MatrixScan Find to your application using SwiftUI.

The general steps are:

1. Create a UIViewController: Implement the MatrixScan Find logic following the main Get Started guide
2. Create a SwiftUI wrapper: Use UIViewControllerRepresentable to integrate the UIViewController
3. Use in your SwiftUI app: Add the SwiftUI view to your app's view hierarchy

The core MatrixScan Find implementation (data capture context, settings, camera setup, etc.) remains the same as described in the main guide.

Create a UIViewController for MatrixScan Find

To integrate the Scandit Data Capture SDK with SwiftUI, you'll need to create a UIViewController that handles the MatrixScan Find functionality. This follows the same implementation as described in the main Get Started guide.

Create a MatrixScanFindViewController class that implements all the steps from the UIKit guide:

import ScanditBarcodeCapture
import UIKit

class MatrixScanFindViewController: UIViewController {
    private var context: DataCaptureContext!
    private var barcodeFind: BarcodeFind!
    private var barcodeFindView: BarcodeFindView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupRecognition()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        barcodeFindView.prepareSearching()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        barcodeFindView.startSearching()
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        barcodeFindView.stopSearching()
    }

    func setupRecognition() {
        // Follow the implementation from the Get Started guide:
        // 1. Create data capture context
        // 2. Configure the Barcode Find Mode
        // 3. Setup the Barcode Find View
        // 4. Register the UI delegate to handle finish button
    }
}

extension MatrixScanFindViewController: BarcodeFindViewUIDelegate {
    func barcodeFindView(_ view: BarcodeFindView,
                        didTapFinishButton foundItems: Set<BarcodeFindItem>) {
        // Handle finish button tap
    }
}

Create a SwiftUI View using UIViewControllerRepresentable

Now create a SwiftUI wrapper that integrates the UIViewController into your SwiftUI app:

import SwiftUI
import UIKit

struct MatrixScanFindRepresentable: UIViewControllerRepresentable {
    typealias UIViewControllerType = MatrixScanFindViewController

    func makeUIViewController(context: Context) -> MatrixScanFindViewController {
        return MatrixScanFindViewController()
    }

    func updateUIViewController(_ uiViewController: MatrixScanFindViewController, context: Context) {
        // Update the view controller if needed
    }
}

Use the SwiftUI View in Your App

Finally, use the MatrixScanFindRepresentable in your SwiftUI app:

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            MatrixScanFindRepresentable()
        }
    }
}

Or within another SwiftUI view:

struct ContentView: View {
    var body: some View {
        NavigationView {
            MatrixScanFindRepresentable()
                .navigationTitle("MatrixScan Find")
        }
    }
}

Alternative: Using UIViewRepresentable

As an alternative to wrapping a UIViewController, you can implement the MatrixScan Find functionality directly using UIViewRepresentable. This approach creates the find view directly without an intermediate view controller:

import ScanditBarcodeCapture
import SwiftUI

struct MatrixScanFindView: UIViewRepresentable {
    private let dataCaptureContext: DataCaptureContext
    private let barcodeFind: BarcodeFind
    private let uiDelegate: UIDelegate

    init(itemsToFind: Set<BarcodeFindItem>, onFinishButtonTapped: @escaping (Set<BarcodeFindItem>) -> Void) {
        // Create the data capture context
        DataCaptureContext.initialize(licenseKey: "-- ENTER YOUR SCANDIT LICENSE KEY HERE --")
        dataCaptureContext = DataCaptureContext.sharedInstance

        // Configure Barcode Find settings
        let settings = BarcodeFindSettings()
        // ...

        // Create Barcode Find mode with items to find
        barcodeFind = BarcodeFind(settings: settings)
        barcodeFind.setItemList(itemsToFind)

        // Create the UI delegate
        uiDelegate = UIDelegate(onFinishButtonTapped: onFinishButtonTapped)
    }

    func makeUIView(context: Context) -> UIView {
        let view = UIView()

        // Configure Barcode Find view settings
        let viewSettings = BarcodeFindViewSettings()
        // ...

        // Create the Barcode Find view
        let barcodeFindView = BarcodeFindView(parentView: view,
                                              context: dataCaptureContext,
                                              barcodeFind: barcodeFind,
                                              settings: viewSettings)
        barcodeFindView.uiDelegate = uiDelegate
        
        // Prepare and start searching
        barcodeFindView.prepareSearching()
        barcodeFindView.startSearching()

        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {
        // Update the view if needed
    }
}

private class UIDelegate: NSObject, BarcodeFindViewUIDelegate {
    private let onFinishButtonTapped: (Set<BarcodeFindItem>) -> Void

    init(onFinishButtonTapped: @escaping (Set<BarcodeFindItem>) -> Void) {
        self.onFinishButtonTapped = onFinishButtonTapped
    }

    func barcodeFindView(_ view: BarcodeFindView,
                        didTapFinishButton foundItems: Set<BarcodeFindItem>) {
        DispatchQueue.main.async {
            self.onFinishButtonTapped(foundItems)
        }
    }
}

You can then use this view directly in your SwiftUI app:

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                MatrixScanFindView(
                    itemsToFind: itemsToFind,
                    onFinishButtonTapped: { foundItems in
                        // Handle found items
                    }
                )
                .edgesIgnoringSafeArea(.all)
            }
        }
    }
}