#62 Apple Store 的 AirTag 刻字

模仿 App Store 的刻字功能，為 AirTag 客製化刻字。

設計畫面長這樣

用可愛的胖胖手拿著 AirTag

為第二頁ViewController新增 File

第二頁要拉 IBOutlet 必須要新增一個新的 Class

新增 File 選 Cocoa Touch Class ，命名 carveController 點 Controller 然後 Class 檔名改為剛剛建立的 Class

建立 IBOutlet

建立文字輸入框、顯示文字的 Label、以及出現警告訊息的 Label

@IBOutlet weak var carveTextField: UITextField!
    @IBOutlet weak var maketLabel: UILabel!
    @IBOutlet weak var warningLabel: UILabel!

Label 設定文字自動縮放

Autoshirink 選擇 Minimum Font Size
最大80級，最小64級

文字輸入拉 IBOutlet 與 IBAction

IBAction Event選擇 EditingChanged

輸入文字會即時改變狀態，顯示在 AirTag 的 Label 上

點空白收起鍵盤

新增 TapGesture觸控元件

// 點空白收起鍵盤
    @IBAction func topGesture(_ sender: UITapGestureRecognizer) {
        view.endEditing(true)
    }

顯示文字到Label

因為AirTag 的空間有限，因此字數有限制。

用 carveTextField.text!.count 取得 TextField 上的字數，如果超過4個字，下方會出現警告文字

//顯示文字到Label
    @IBAction func inputText(_ sender: UITextField) {
        maketLabel.text = sender.text
        //取得字數
        warningLabel.text = String(carveTextField.text!.count)
        let count = Int(warningLabel.text!)
        print(count!)
        if count! > 4 {
            warningLabel.isHidden = false
            warningLabel.text = "你的訊息長度超出可用空間"
        }
    }

第二頁完整程式碼

import UIKit
class carveController: UIViewController {
@IBOutlet weak var carveTextField: UITextField!
    @IBOutlet weak var maketLabel: UILabel!
    @IBOutlet weak var warningLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
// Do any additional setup after loading the view.
    }
    
    //顯示文字到Label
    @IBAction func inputText(_ sender: UITextField) {
        maketLabel.text = sender.text
        //取得字數
        warningLabel.text = String(carveTextField.text!.count)
        let count = Int(warningLabel.text!)
        print(count!)
        if count! > 4{
            warningLabel.isHidden = false
            warningLabel.text = "你的訊息長度超出可用空間"
            //print("你的訊息長度超出可用空間")
        }
    }
    // 收起鍵盤
    @IBAction func closekeyboard(_ sender: Any) {
        //carveTextField.resignFirstResponder()
    }
    //點空白收起鍵盤
    @IBAction func tapGesture(_ sender: UITapGestureRecognizer) {
        view.endEditing(true)
    }
}

操作動畫展示

參考文章：

#106 Apple Store 的 AirTag 或 AirPods Pro 刻字

Apple Store 的 AirPods Pro 刻字

Github

dearbunny/AirTagCarve