SwiftUI 框架

如何使用 SwiftUI 構建條碼生成器

這個教程中,我們將探索如何利用SwiftUI和這些強大的 API 來開發你自己的條碼生成器 App。
如何使用 SwiftUI 構建條碼生成器
如何使用 SwiftUI 構建條碼生成器
In: SwiftUI 框架

最近我從一位朋友那裡收到了一個關於使用Swift生成條碼(Barcode)的問題。CoreImage 框架提供了方便的內置 API,用於建立各種類型的條碼,包括QR碼。在這個教程中,我們將探索如何利用SwiftUI和這些強大的 API 來開發你自己的條碼生成器 App。

首先,讓我們先看一下最終的成品。這是一個非常基本的條碼生成應用程式,具有簡單的用戶界面。當你在文本字段中輸入任何文字時,此 App 立即使用Code 128格式生成相應的條碼,該格式一般用於包含字母數字字符或僅數字的條碼。

Creating the Barcode Generator

假設你已在Xcode中創建了一個新的 SwiftUI 項目,打開 ContentView.swift 文件。首先,導入使用濾鏡所需的套件:

import CoreImage.CIFilterBuiltins

之後, 我們會寫一個 BarcodeGenerator struct 用於建立條碼:

struct BarcodeGenerator {
    let context = CIContext()
    let generator = CIFilter.code128BarcodeGenerator()

    func generateBarcode(text: String) -> Image {
        let generator = CIFilter.code128BarcodeGenerator()
        generator.message = Data(text.utf8)
        
        if let outputImage = generator.outputImage,
           let cgImage = context.createCGImage(outputImage, from: outputImage.extent) {
            
            let uiImage = UIImage(cgImage: cgImage)
            
            return Image(uiImage: uiImage)
        }
        
        return Image(systemName: "barcode")
        
    }
}

要創建條碼,我們宣告了兩個變數:contextCode 128生成器。如果你了解 CIFilter 類,你會發現其他類型的條碼生成器,如QR碼生成器和Aztec碼生成器。然而,在本示範中,我們將專注於使用Code 128條碼生成器。

generateBarcode方法接受一個字符串輸入並返回生成的條碼圖像。在方法內部,我們首先初始化code128BarcodeGenerator並將輸入文本分配給其message屬性。由於message屬性需要的是Data類型,我們會先將輸入文本轉換為Data。隨後,我們從生成器的outputImage屬性中獲取生成的條碼圖像。

由於生成的圖像類型是CIImage,我們使用 context 的createCGImage方法將其轉換為CGImage。然後,我們進行進一步的步驟將其轉換為Image

建立條碼生成器的介面

現在我們已經完成了條碼生成器的struct,讓我們繼續開發用於顯示條碼圖像的用戶界面。

首先,在 ContentView 中聲明以下屬性,用於輸入文本和條碼生成器:

@State private var inputText = ""
var barcodeGenerator = BarcodeGenerator()

至於使用者界面,讓我們保持簡單,將所有視圖按照以下方式佈局在 VStack 中:

VStack(alignment: .leading) {
    
    Text("Barcode Generator")
        .font(.system(size: 60, weight: .black, design: .rounded))
    
    Text("Please key in your barcode data in the text field")
        .font(.headline)
        .padding(.bottom, 20)
    
    TextField("", text: $inputText)
        .padding()
        .font(.title)
        .background(Color(.systemGray6))
    
    Spacer()
    
    VStack(spacing: 0) {
        barcodeGenerator.generateBarcode(text: inputText)
            .resizable()
            .scaledToFit()
        
        Text(inputText.isEmpty ? "Unknown data" : inputText)
    }
    
}
.padding()

在螢幕上,我們有一個文字欄來讓使用者輸入條碼資料。另外,生成的條碼就顯示在螢幕底部。如果使用者沒有輸入任何資料,我們會顯示一張帶有「Unknown data」標題的預設圖像。

就是這樣!你現在應該能夠在預覽窗格中測試App了。只需在文本欄中輸入任何文字,App 就會即時生成條碼。

總結

透過這篇文章,你已學會使用 CoreImage 框架和 SwiftUI 構建條碼生成器。雖然我們的重點是集中在建立 Code 128 條碼,但其實你可以輕鬆修改程式碼以支援其他種類型的條碼,包括QR碼。

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 16 App 程式設計實戰心法》、《iOS 16 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
如何在 SwiftUI 使用 Preview Macro
SwiftUI 框架

如何在 SwiftUI 使用 Preview Macro

SwiftUI 中的預覽(Preview)功能允許開發人員在不運行應用程序於設備或模擬器上的情況下,實時查看App的外觀。這個功能對於那些希望快速迭代設計並確保一切看起來和運作如預期的開發人員來說非常有用。隨著 iOS 17 中引入了巨集(Macro)的功能,預覽功能變得更加強大和靈活,提供了更多的自定義和靈活性。在本教學中,我們將探索如何在 SwiftUI 中使用新的預覽巨集(Preview Macro)
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。