Formatter — wat is het, invoerformatters en NSFormatter

Wat is Formatter in iOS?

Formatter in iOS — dit is een component die onbewerkte gebruikersinvoer omzet in een gestructureerd formaat volgens een opgegeven sjabloon. In tegenstelling tot eenvoudige validatie na het verzenden van het formulier, werkt de formatter in realtime en corrigeert hij de weergave van gegevens tijdens het invoeren. Dit is het belangrijkste verschil: de gebruiker ziet het opgemaakte resultaat onmiddellijk, zonder dat hij scheidingstekens handmatig hoeft in te voeren.

iOS biedt meerdere niveaus van opmaak: systeemformatters van Foundation (NumberFormatter, DateFormatter, ByteCountFormatter) voor het weergeven van gegevens, het framework PhoneNumberKit voor telefoonnummers en de externe bibliotheken InputMask voor willekeurige invoermaskers. De keuze van het niveau hangt af van het gegevenstype en de vereiste flexibiliteit van de opmaak.

Volgens de Apple Human Interface Guidelines lossen invoerformatters drie taken op: ze verminderen de cognitieve belasting van de gebruiker (niet nadenken over scheidingstekens), ze verminderen het aantal fouten (gegevens worden in het juiste formaat ingevoerd) en ze versnellen het invullen van formulieren (automatische overgang tussen cijfergroepen).

Formatters zijn vooral belangrijk voor mobiele apparaten, waar invoer via het schermtoetsenbord meer inspanning vereist dan via een fysiek toetsenbord. Elk overbodig teken dat handmatig moet worden ingevoerd, verlengt de invultijd van het formulier en vergroot het risico op fouten. Het automatisch invullen van scheidingstekens vermindert het aantal tikken met 20–40% voor gangbare formaten.

Soorten invoerformatters

Invoerformatters in iOS zijn onderverdeeld in drie categorieën: systeemformatters van Foundation, gespecialiseerde Apple-formatters (PhoneNumberKit) en externe bibliotheken (InputMask, MaskedTextField). Elke categorie lost eigen taken op en heeft eigen implementatiekenmerken.

Systeemformatters van Foundation

NumberFormatter formatteert numerieke waarden: geldbedragen, percentages, wetenschappelijke notaties. Het ondersteunt lokalisatie van scheidingstekens voor groepen en decimalen. DateFormatter zet datums en tijden om in gelokaliseerde reeksen. Deze formatters zijn bedoeld voor weergave, niet voor invoermaskering, dus ze zijn moeilijk rechtstreeks toe te passen op UITextField tijdens het typen.

PhoneNumberKit

PhoneNumberKit — dit is een bibliotheek van Apple voor het formatteren van telefoonnummers volgens nationale standaarden. Het bepaalt automatisch het land op basis van de code en past het bijbehorende formaat toe. Zo wordt het Russische nummer +7 912 345-67-89 anders opgemaakt dan het Amerikaanse +1 212-555-0198. PhoneNumberKit valideert ook of het nummer correct is.

Input Mask-bibliotheken

Externe bibliotheken InputMask bieden een universeel mechanisme voor invoermaskering voor elk formaat: kaartnummers (0000 0000 0000 0000), datums (DD.MM.JJJJ), SNILS (000-000-000 00), INN (000000000000). De bibliotheken werken via de delegatie UITextFieldDelegate, onderscheppen de invoer en passen het masker in realtime toe.

De abstracte klasse NSFormatter

NSFormatter — dit is een abstracte klasse van Foundation waarvan alle systeemformatters van iOS overerven. Het definieert twee hoofdmethoden: string(for:) voor het omzetten van een object in een reeks en getObjectValue(_:for:errorDescription:) voor de omgekeerde omzetting van een reeks in een object. Dit tweerichtingsmechanisme maakt het mogelijk om gegevens zowel weer te geven als in te lezen uit tekstvelden.

Het maken van een eigen formatter op basis van NSFormatter is mogelijk voor specifieke formaten die niet door de systeemklassen worden gedekt. Hiervoor moeten de methoden string(for:) en getObjectValue(_:for:errorDescription:) worden overschreven. Een zelfgemaakte formatter kan worden gebruikt met UILabel, UITextField en andere views via de eigenschap formatter.

Apple raadt aan om bestaande formatters van Foundation te gebruiken in plaats van eigen formatters te maken. NumberFormatter verwerkt correct 32 talen en regionale standaarden, DateFormatter houdt rekening met de kalenders van verschillende culturen, en ByteCountFormatter schakelt automatisch tussen bytes, kilobytes en megabytes afhankelijk van de grootte van de waarde.

NSFormatter ondersteunt ook lokalisatie van foutmeldingen bij onjuiste invoer. De methode getObjectValue retourneert een foutbeschrijving die in gelokaliseerde vorm aan de gebruiker kan worden getoond. Dit is vooral belangrijk voor formulieren waarin de gebruiker gegevens in een onjuist formaat invoert — de foutmelding moet begrijpelijk zijn en in de taal van de interface.

Input Mask en invoermaskering

Input Mask (invoermasker) — dit is een sjabloon dat het formaat van de ingevoerde gegevens bepaalt en automatisch scheidingstekens invult tijdens het typen. Het masker bestaat uit placeholder-tekens (meestal 0 of 9 voor cijfers, A voor letters) en constante tekens (haakjes, koppeltekens, spaties) die automatisch worden ingevoegd. De gebruiker voert alleen de betekenisvolle tekens in, de scheidingstekens worden door het systeem toegevoegd.

De populairste bibliotheek voor iOS — InputMask van RedMadRobot. Het ondersteunt complexe maskers met voorwaarden, optionele blokken en een affix (prefix en postfix). De bibliotheek is geïmplementeerd via een delegatie, waardoor deze met elke UITextField kan worden gebruikt zonder subclassing. Ondersteund worden maskers voor telefoonnummers, bankkaarten, datums, verificatiecodes en andere gestructureerde gegevens.

Het maskerformaat van InputMask gebruikt een eigen syntaxis: vierkante haakjes voor verplichte tekens, accolades voor optionele, constante tekens buiten de haakjes. Zo ziet het masker voor een kaartnummer eruit als [0000] [0000] [0000] [0000], en voor een datum als [00]{.}[00]{.}[0000]. Optionele blokken tussen accolades verdwijnen als de gebruiker er geen gegevens voor invoert.

Voor telefoonnummers bevat het masker meestal de landcode in de affix: +7 ([000]) [000]-[00]-[00]. De gebruiker voert alleen de 10 cijfers van het nummer in, terwijl de tekens +7, (, ), - automatisch worden ingevuld. Bij het verwijderen van een teken verwerkt het masker backspace correct, verwijdert het laatste betekenisvolle teken en keert het terug naar de vorige positie.

Telefoonnummers formatteren

Telefoonnummers formatteren — dit is het meest voorkomende gebruiksscenario van formatters in mobiele applicaties. iOS biedt hiervoor het framework PhoneNumberKit, dat automatisch het land op basis van de code bepaalt en het bijbehorende nationale formaat toepast. De bibliotheek ondersteunt meer dan 200 landen en wordt regelmatig bijgewerkt.

PhoneNumberKit werkt in twee fasen: bepalen van het formaat en het toepassen ervan. In de eerste fase analyseert de bibliotheek de ingevoerde landcode (bijv. +7 bepaalt Rusland) en laadt de opmaakregels. In de tweede fase past het het masker toe dat overeenkomt met de nationale standaard: voor Rusland is dat +7 XXX XXX-XX-XX, voor de VS +1 XXX-XXX-XXXX, voor Groot-Brittannië +44 XXXX XXX XXX.

Volgens de Apple Developer Documentation is er sinds iOS 16 een ingebouwd mechanisme voor het formatteren van telefoonnummers via UIContentUnavailableConfiguration. Voor volledige opmaak in realtime wordt echter aanbevolen om PhoneNumberKit te gebruiken via de delegatie UITextFieldDelegate. De bibliotheek valideert ook het nummer: controleert het aantal cijfers, de geldigheid van de landcode en de overeenkomst met het nationale formaat.

Voor internationale applicaties is het belangrijk om rekening te houden met het feit dat de gebruiker het nummer in elk formaat kan invoeren: met +7, met 8 (voor Rusland) of zonder landcode. Een goede formatter moet elk aanvangsformaat herkennen en het normaliseren naar één internationale standaard met het +-prefix en de landcode.

Formatter implementeren in Swift

De implementatie van de formatter in Swift hangt af van de gekozen aanpak. Voor systeemformatters van Foundation wordt de eigenschap formatter gebruikt, die sinds iOS 15 beschikbaar is voor UITextField. Voor Input Mask wordt de delegatie UITextFieldDelegate met de bibliotheek InputMask gebruikt. Voor telefoonnummers — PhoneNumberKit via de delegatie.

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
    }
}

Voor NumberFormatter is er sinds iOS 15+ een formatter-eigenschap op UITextField die het ingevoerde getal tijdens het typen automatisch formatteert. Deze aanpak vereist geen implementatie van de delegatie en werkt 'out of the box' voor geldformaten, percentages en andere numerieke gegevens, rekening houdend met de locale van de gebruiker.

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

Voor de InputMask-bibliotheek van RedMadRobot wordt de configuratie uitgevoerd door het masker te initialiseren en het via de delegatie toe te passen. De bibliotheek ondersteunt het verwerken van plakken (paste) en verwijderen (backspace) en werkt correct met tekstselecties.

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
    }
}