Formatter — มันคืออะไร ตัวจัดรูปแบบป้อนเข้าและ NSFormatter

Formatter ใน iOS คืออะไร?

Formatter ใน iOS เป็นคอมโพเนนต์ที่แปลงข้อมูลป้อนเข้าดิบของผู้ใช้เป็นรูปแบบที่มีโครงสร้างตามรูปแบบที่กำหนด ต่างจากการตรวจสอบอย่างง่ายหลังจากการส่งแบบฟอร์ม ตัวจัดรูปแบบทำงานแบบเรียลไทม์ แก้ไขการแสดงข้อมูลขณะที่ถูกป้อนเข้า นี่คือความแตกต่างหลัก: ผู้ใช้เห็นผลลัพธ์ที่จัดรูปแบบแล้วทันที โดยไม่ต้องป้อนตัวคั่นด้วยตนเอง

iOS มี ระดับการจัดรูปแบบ หลายระดับ: ตัวจัดรูปแบบ Foundation ของระบบ (NumberFormatter, DateFormatter, ByteCountFormatter) สำหรับการแสดงข้อมูล, เฟรมเวิร์ค PhoneNumberKit สำหรับหมายเลขโทรศัพท์ และไลบรารีบุคคลที่สาม InputMask สำหรับหน้ากากป้อนเข้าที่กำหนดเอง การเลือกระดับขึ้นอยู่กับชนิดของข้อมูลและความยืดหยุ่นในการจัดรูปแบบที่ต้องการ

ตาม Apple Human Interface Guidelines ตัวจัดรูปแบบป้อนเข้าแก้ปัญหาสามอย่าง: ลดภาระการคิดของผู้ใช้ (ไม่ต้องคิดเกี่ยวกับตัวคั่น), ลดจำนวนข้อผิดพลาด (ข้อมูลถูกป้อนในรูปแบบที่ถูกต้อง) และเร่งการกรอกแบบฟอร์ม (การเปลี่ยนระหว่างกลุ่มตัวเลขโดยอัตโนมัติ)

ตัวจัดรูปแบบมีความสำคัญโดยเฉพาะสำหรับ อุปกรณ์มือถือ ซึ่งการป้อนข้อมูลด้วยแป้นพิมพ์บนหน้าจอต้องใช้ความพยายามมากกว่าแป้นพิมพ์จริง ทุกตัวอักษรที่ต้องป้อนด้วยตนเองเพิ่มเวลาในการกรอกแบบฟอร์มและความเสี่ยงต่อข้อผิดพลาด การใส่ตัวคั่นโดยอัตโนมัติช่วยลดจำนวนการแตะลง 20–40% สำหรับรูปแบบทั่วไป

ชนิดของตัวจัดรูปแบบป้อนเข้า

ตัวจัดรูปแบบป้อนเข้า ใน iOS แบ่งออกเป็นสามประเภท: ตัวจัดรูปแบบ Foundation ของระบบ, ตัวจัดรูปแบบเฉพาะของ Apple (PhoneNumberKit) และไลบรารีบุคคลที่สาม (InputMask, MaskedTextField) แต่ละประเภทแก้ปัญหาของตนเองและมีลักษณะการนำไปใช้เฉพาะ

ตัวจัดรูปแบบ Foundation ของระบบ

NumberFormatter จัดรูปแบบค่าตัวเลข: จำนวนเงิน เปอร์เซ็นต์ สัญกรณ์วิทยาศาสตร์ รองรับการแปลภาษาของตัวคั่นกลุ่มและทศนิยม DateFormatter แปลงวันที่และเวลาเป็นสตริงที่แปลภาษาแล้ว ตัวจัดรูปแบบเหล่านี้ออกแบบมาสำหรับการแสดงผล ไม่ใช่สำหรับการสร้างหน้ากากป้อนเข้า ดังนั้นจึงยากที่จะนำไปใช้กับ UITextField โดยตรงขณะพิมพ์

PhoneNumberKit

PhoneNumberKit เป็นไลบรารีของ Apple สำหรับจัดรูปแบบหมายเลขโทรศัพท์ตามมาตรฐานแห่งชาติ โดยจะตรวจจับประเทศจากรหัสโดยอัตโนมัติและใช้รูปแบบที่สอดคล้องกัน ตัวอย่างเช่น หมายเลขรัสเซีย +7 912 345-67-89 จะถูกจัดรูปแบบแตกต่างจากหมายเลขอเมริกัน +1 212-555-0198 PhoneNumberKit ยังตรวจสอบความถูกต้องของหมายเลขด้วย

ไลบรารี Input Mask

ไลบรารีบุคคลที่สาม InputMask ให้กลไกการสร้างหน้ากากป้อนเข้าสากลสำหรับทุกรูปแบบ: หมายเลขบัตร (0000 0000 0000 0000), วันที่ (วว.ดด.ปปปป), SNILS (000-000-000 00), INN (000000000000) ไลบรารีทำงานผ่าน UITextFieldDelegate โดยดักจับการป้อนเข้าและใช้หน้ากากแบบเรียลไทม์

คลาสนามธรรม NSFormatter

NSFormatter เป็นคลาสนามธรรมของ Foundation ที่ตัวจัดรูปแบบระบบ iOS ทั้งหมดสืบทอดมา กำหนดสองเมธอดหลัก: string(for:) สำหรับแปลงออบเจกต์เป็นสตริงและ getObjectValue(_:for:errorDescription:) สำหรับแปลงกลับจากสตริงเป็นออบเจกต์ กลไกสองทางนี้ช่วยให้สามารถทั้งแสดงข้อมูลและอ่านข้อมูลจากฟิลด์ข้อความ

การสร้าง ตัวจัดรูปแบบที่กำหนดเอง โดยอ้างอิง NSFormatter เป็นไปได้สำหรับรูปแบบเฉพาะที่คลาสระบบไม่ได้ครอบคลุม โดยต้องเขียนเมธอด string(for:) และ getObjectValue(_:for:errorDescription:) ใหม่ ตัวจัดรูปแบบที่กำหนดเองสามารถใช้กับ UILabel, UITextField และวิวอื่นๆ ผ่านคุณสมบัติ formatter

Apple แนะนำให้ใช้ ตัวจัดรูปแบบ Foundation ที่มีอยู่แล้ว แทนที่จะสร้างขึ้นเอง NumberFormatter จัดการ 32 ภาษาและมาตรฐานภูมิภาคได้อย่างถูกต้อง DateFormatter คำนึงถึงปฏิทินของวัฒนธรรมต่างๆ และ ByteCountFormatter เปลี่ยนระหว่างไบต์ กิโลไบต์ และเมกะไบต์โดยอัตโนมัติขึ้นอยู่กับขนาดของค่า

NSFormatter ยังรองรับ การแปลภาษาของข้อความข้อผิดพลาด สำหรับการป้อนเข้าที่ไม่ถูกต้อง เมธอด getObjectValue จะส่งคืนคำอธิบายข้อผิดพลาดที่สามารถแสดงให้ผู้ใช้เห็นในรูปแบบที่แปลภาษาแล้ว ซึ่งสำคัญโดยเฉพาะสำหรับแบบฟอร์มที่ผู้ใช้ป้อนข้อมูลในรูปแบบที่ไม่ถูกต้อง — ข้อความข้อผิดพลาดควรเข้าใจง่ายและเป็นภาษาของอินเทอร์เฟซ

Input Mask และการสร้างหน้ากากป้อนเข้า

Input Mask (หน้ากากป้อนเข้า) เป็นแม่แบบที่กำหนดรูปแบบของข้อมูลป้อนเข้าและใส่ตัวคั่นโดยอัตโนมัติขณะพิมพ์ หน้ากากประกอบด้วยอักขระตัวแทน (โดยทั่วไป 0 หรือ 9 สำหรับตัวเลข, A สำหรับตัวอักษร) และอักขระคงที่ (วงเล็บ, ยัติภังค์, ช่องว่าง) ที่ถูกใส่โดยอัตโนมัติ ผู้ใช้ป้อนเฉพาะอักขระที่มีความสำคัญ และตัวคั่นจะถูกใส่โดยระบบ

ไลบรารียอดนิยมที่สุดสำหรับ iOS คือ InputMask โดย RedMadRobot รองรับหน้ากากที่ซับซ้อนด้วยเงื่อนไข บล็อกที่เลือกได้ และอาร์ฟิกซ์ (คำนำหน้าและคำต่อท้าย) ไลบรารีถูกนำไปใช้ผ่านตัวแทน ซึ่งช่วยให้ใช้กับ UITextField ใดๆ โดยไม่ต้องสร้างคลาสย่อย รองรับหน้ากากสำหรับหมายเลขโทรศัพท์ บัตรธนาคาร วันที่ รหัสยืนยัน และข้อมูลที่มีโครงสร้างอื่นๆ

รูปแบบของหน้ากาก InputMask ใช้ ไวยากรณ์ของตัวเอง: วงเล็บเหลี่ยมสำหรับอักขระบังคับ, วงเล็บปีกกาสำหรับอักขระที่เลือกได้, อักขระคงที่อยู่นอกวงเล็บ ตัวอย่างเช่น หน้ากากหมายเลขบัตรเป็น [0000] [0000] [0000] [0000] และหน้ากากวันที่เป็น [00]{.}[00]{.}[0000] บล็อกที่เลือกได้ในวงเล็บปีกกาจะหายไปหากผู้ใช้ไม่ป้อนข้อมูลสำหรับบล็อกเหล่านั้น

สำหรับ หมายเลขโทรศัพท์ หน้ากากมักจะมีรหัสประเทศในอาร์ฟิกซ์: +7 ([000]) [000]-[00]-[00] ผู้ใช้ป้อนเพียง 10 หลักของหมายเลข ในขณะที่อักขระ +7, (, ), - ถูกใส่โดยอัตโนมัติ เมื่อลบอักขระ หน้ากากจะจัดการกับ backspace อย่างถูกต้อง โดยลบอักขระสำคัญตัวสุดท้ายและกลับไปยังตำแหน่งก่อนหน้า

การจัดรูปแบบหมายเลขโทรศัพท์

การจัดรูปแบบหมายเลขโทรศัพท์ เป็นกรณีการใช้งานที่พบบ่อยที่สุดของตัวจัดรูปแบบในแอปพลิเคชั่นมือถือ iOS มีเฟรมเวิร์ค PhoneNumberKit สำหรับวัตถุประสงค์นี้ ซึ่งระบุประเทศจากรหัสโดยอัตโนมัติและใช้รูปแบบประจำชาติที่สอดคล้องกัน ไลบรารีรองรับมากกว่า 200 ประเทศและได้รับการอัปเดตเป็นประจำ

PhoneNumberKit ทำงานสองขั้นตอน: การตรวจจับรูปแบบและการนำไปใช้ ในขั้นตอนแรก ไลบรารีวิเคราะห์รหัสประเทศที่ป้อน (เช่น +7 ระบุรัสเซีย) และโหลดกฎการจัดรูปแบบ ในขั้นตอนที่สอง จะใช้หน้ากากที่สอดคล้องกับมาตรฐานแห่งชาติ: สำหรับรัสเซียคือ +7 XXX XXX-XX-XX, สำหรับสหรัฐอเมริกา — +1 XXX-XXX-XXXX, สำหรับสหราชอาณาจักร — +44 XXXX XXX XXX

ตาม Apple Developer Documentation ตั้งแต่ iOS 16 มีกลไกการจัดรูปแบบหมายเลขโทรศัพท์ในตัวผ่าน UIContentUnavailableConfiguration อย่างไรก็ตาม สำหรับการจัดรูปแบบแบบเรียลไทม์อย่างสมบูรณ์ แนะนำให้ใช้ PhoneNumberKit ผ่าน UITextFieldDelegate ไลบรารียังตรวจสอบความถูกต้องของหมายเลข: ตรวจสอบจำนวนหลัก ความถูกต้องของรหัสประเทศ และความสอดคล้องกับรูปแบบประจำชาติ

สำหรับ แอปพลิเคชั่นระหว่างประเทศ สิ่งสำคัญคือต้องพิจารณาว่าผู้ใช้อาจป้อนหมายเลขในรูปแบบใดก็ได้: ด้วย +7, 8 (สำหรับรัสเซีย) หรือไม่มีรหัสประเทศ ตัวจัดรูปแบบที่ดีควรจดจำรูปแบบเริ่มต้นใดๆ และทำให้เป็นมาตรฐานสากลเดียวด้วยคำนำหน้า + และรหัสประเทศ

การนำตัวจัดรูปแบบไปใช้ใน Swift

การนำตัวจัดรูปแบบไปใช้ ใน Swift ขึ้นอยู่กับแนวทางที่เลือก สำหรับตัวจัดรูปแบบ Foundation ของระบบ ใช้คุณสมบัติ formatter ซึ่งใช้ได้ตั้งแต่ iOS 15 สำหรับ UITextField สำหรับ Input Mask ใช้ UITextFieldDelegate กับไลบรารี InputMask สำหรับหมายเลขโทรศัพท์ — PhoneNumberKit ผ่านตัวแทน

import PhoneNumberKit

class PhoneViewController: UIViewController {

    let phoneNumberKit = PhoneNumberKit()
    @IBOutlet var phoneField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        phoneField.delegate = self
    }
}

extension PhoneViewController: UITextFieldDelegate {
    func textField(
        _ textField: UITextField,
        shouldChangeCharactersIn range: NSRange,
        replacementString string: String
    ) -> Bool {
        guard let text = textField.text else { return true }
        let partial = (text as NSString).replacingCharacters(in: range, with: string)
        textField.text = partial.applyPhoneMask()
        return false
    }
}

สำหรับ NumberFormatter ใน iOS 15+ มีคุณสมบัติ formatter บน UITextField ที่จัดรูปแบบหมายเลขที่ป้อนโดยอัตโนมัติขณะพิมพ์ แนวทางนี้ไม่ต้องการการใช้งานตัวแทนและทำงานได้ทันทีสำหรับรูปแบบสกุลเงิน เปอร์เซ็นต์ และข้อมูลตัวเลขอื่นๆ โดยคำนึงถึงตำแหน่งที่ตั้งของผู้ใช้

let amountField = UITextField()
let formatter = NumberFormatter()
formatter.numberStyle = .currency
formatter.locale = Locale(identifier: "ru_RU")
amountField.formatter = formatter

สำหรับ ไลบรารี InputMask ของ RedMadRobot การตั้งค่าทำได้โดยการเริ่มต้นหน้ากากและการใช้งานผ่านตัวแทน ไลบรารีรองรับการจัดการการวาง การลบด้วย backspace และทำงานได้อย่างถูกต้องกับการเลือกข้อความ

import InputMask

class CardViewController: UIViewController {
    @IBOutlet var cardField: UITextField!
    var listener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        listener = MaskedTextFieldDelegate(
            primaryMaskFormat: "[0000] [0000] [0000] [0000]"
        )
        cardField.delegate = listener
    }
}