Formation PUB900 : Développer une application pour iPhone avec SwiftUI, H-2024 Les formulaires SwiftUI

67.4 Configurer le clavier du téléphone


Par défaut, dès que l'usager clique dans un TextField, un clavier apparaît au bas de l'écran.

Sur le simulateur, pour obtenir ce comportement, vous devez aller dans le menu I/O / Keyboard et décocher l'option Connect Hardware Keyboard.

Clavier

Le modifieur .keyboardType() permet de spécifier le type de clavier à utiliser. Ceci permettra d'offrir à l'usager un clavier adapté au genre d'information qu'il doit entrer.

Par exemple, lorsqu'on saisit un nombre, il serait judicieux d'afficher le clavier numérique.

SwiftUI

TextField("", text: $ageString)
  .keyboardType(.numberPad)

numberPad

Il existe des claviers spécialisés pour différents besoins.

Je vous présente un peu plus bas un aperçu des touches offertes par chacun.

Icône pour changer la langue du clavier

Au bas du clavier numérique, vous retrouverez souvent une icône de globe.

Un clic sur cette icône permet de basculer entre deux langues configurées sur le téléphone ou dans le simulateur. S'il y a plus de deux langues, un clic prolongé permettra de sélectionner parmi ces langues.

Les caractères présentés sur le clavier numérique seront différents selon la langue choisie.

C'est l'usager qui détermine les langues disponibles et non le développeur.

Pour ajouter une langue sur le téléphone ou dans le simulateur :

  • Cliquez sur l'icône Réglages.
  • Sélectionnez l'option Général / Langue et région.
  • Cliquez sur Ajouter une langue puis sélectionnez la langue désirée.

Choix localisation

Aperçu des configurations de clavier disponibles

.default

C'est le clavier qui apparaît si vous ne spécifiez pas de type de clavier ou encore si vous spécifiez le style .default.

Il est illustré ici avec les lettres majuscules, avec les lettres minuscules, avec les chiffres puis avec les caractères spéciaux.

.default .default

.default .default

.numberPad

Ce clavier a été pensé pour faciliter l'entrée de nombres.

Fait à noter : les touches offrent des chiffres seulement, pas de point décimal ni de possibilité pour nombres négatifs.

Si le téléphone est configuré pour travailler dans une langue dans laquelle les caractères numériques sont différents, le clavier affichera les caractères dans la langue configurée.

Dans cet exemple, on voit que le clavier peut afficher des caractères arabes.

.numberPad .numberPad

.decimalPad

Même chose que .numberPad sauf qu'il y a une touche pour ajouter un point décimal.

.decimalPad

.numbersAndPonctuation

Des touches ont été ajoutées à celles des chiffres afin faciliter l'entrée de certains caractères.

C'est le clavier à utiliser si vous avez besoin de permettre les nombres négatifs.

.numbersAndPonctuation

.phonePad

Ce clavier est optimisé pour entrer des numéros de téléphone. Il est comme .numberPad sauf qu'une touche permet de basculer vers un clavier qui facilite l'entrée des caractères +, * et #.

Dans le cas où votre application permettrait par exemple d'entrer un numéro qui serait composé par l'application, il y a même les touches wait et pause qui peuvent être utilisées.

.phonePad .phonePad

.namePhonePad

Ce clavier a été pensé pour les fois où l'usager doit entrer soit du texte, soit un numéro.

Quand il présente des lettres, le clavier est identique au clavier .default. C'est quand on clique sur la touche 123 pour passer en mode numérique qu'il est différent puisqu'il ne présente que des chiffres.

.namePhonePad .namePhonePad

.alphabet

Comme .default sauf qu'il n'y a pas de touche pour les émoticones.

.asciiCapable

.asciiCapable

Comme .alphabet sauf que si on clique sur l'icône de globe pour modifier la localisation, seules les langues dont les lettres sont représentés par des caractères de la charte ASCII de base seront disponibles.

.asciiCapable

.asciiCapableNumberPad

Même chose que .numberPad sauf que les chiffres sont toujours représentés par des caractères de la charte ASCII de base.

Même si plusieurs langues sont configurées sur le téléphone, il n'y a pas d'icône de globe qui permet de changer de langue, par exemple pour afficher des chiffres arabes.

.asciiCapableNumberPad

.twitter

Comme .default sauf qu'on a ajouté des touches pour faciliter l'entrée du @ et du #.

.twitter

.URL

Comme .default sauf qu'on a ajouté des touches pour faciliter l'entrée de la barre oblique et des caractères « .com ».

.twitter

.emailAddress

Comme .default sauf qu'il y a une touche pour faciliter l'entrée du @ et du point.

.emailAddress

.webSearch

Comme .default sauf qu'il y a une touche pour faciliter l'entrée du point.

.webSearch

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !
Soumettre