Les formulaires
Introduction
Présenter des données et permettre à l’utilisateur d’en saisir est crucial pour tout développeur mobile. Dans ce chapitre, nous verrons les contrôles permettant d’afficher du texte, d’en saisir, comment créer les boutons, et enfin comment afficher des alertes à l’utilisateur.
Les libellés
Afficher un texte est une chose quasi obligatoire dans toute application mobile, nous verrons comment, sur les trois plateformes, afficher des libellés.
1. iOS
Présentation
Le contrôle UILabel est le contrôle le plus utilisé de UIKit. Derrière sa simplicité apparente, il cache une multitude de possibilités de personnalisation.
Utilisation basique
La propriété Text de type string permet de spécifier le contenu texte du label.
La propriété TextColor de type UIColor permet de spécifier la couleur du texte.
Création d’un libellé
var monLabel = new UILabel();
// On fixe une taille et une position à notre label
// x = 10, y = 10
// largeur = largeur de la vue principale - 20 pixels
// hauteur = 40 pixels
monLabel.Frame = new CGRect(10, 10, View.Bounds.Width - 20, 40);
monLabel.Text = "Affiche un texte simple";
monLabel.TextColor = UIColor.Blue;
// Ajout du contrôle à la vue principale View.AddSubview(monLabel);
La classe UIColor a une kyrielle de propriétés statiques, listant toutes les couleurs basiques (rouge, jaune, vert...). Vous pouvez aussi l’instancier en spécifiant vous-même les valeurs rouge/vert/bleu de votre couleur.
// les couleurs et l'alpha doivent être une valeur comprise entre
0.0 et 1.0
nfloat rouge = 0.92f;
nfloat vert = 0.32f;
nfloat bleu = 0.32f;
nfloat alpha = 1;
var maCouleur = new UIColor(rouge, vert, bleu, alpha);
Modifier la taille du texte et la police
Il est possible de modifier la police utilisée par le libellé ainsi que la taille du texte.
Pour ce faire, il faut créer un objet de type UIFont grâce à la méthode statique UIFont.FromName. Une fois la police créée, il faut l’associer au label en définissant la propriété Font.
Modification de la police et de la taille du texte du label
// Création de la variable font
UIFont police = UIFont.FromName("Helvetica-Bold", 20f);
//Utilisation de la police helvetica bold
monLabel.Font = police;
Contrairement à UWP, il n’y a pas de paramètre FontWeight ou FontStyle permettant de passer une police en italique ou gras, il faut utiliser la police dédiée...
Saisir un texte, un nombre
1. iOS
Présentation
Trois contrôles principaux permettent de saisir du texte ou un nombre. Le TextField permet de saisir un champ texte monoligne, le TextView permet de saisir du texte multiligne, le UIStepper quant à lui permet d’incrémenter/décrémenter une valeur numérique.
Champs de saisie texte
La classe UITextField permet d’afficher une zone de texte modifiable par l’utilisateur. À l’instar de la classe UITextField, derrière sa simplicité apparente, elle cache une multitude de possibilités de personnalisation.
Lire ou définir la valeur du texte
La propriété Text permet d’obtenir ou de définir le texte de la zone de texte modifiable.
Affectation d’une chaîne de caractères à une instance de UITextField
textField.Text ="Mon texte";
Changer la couleur du texte
La propriété Text de type UIColor permet d’obtenir ou de définir la couleur du texte.
Passage de la couleur du texte en rouge
textField.TextColor = UIColor.Red;
Surveiller le changement de valeur
On peut surveiller le changement de valeur de la zone de texte via l’évènement ValueChanged.
Écoute de l’évènement ValueChanged
textField.ValueChanged += textField_ValueChanged;
...
void textField_ValueChanged(object sender, EventArgs e)
{
Console.WriteLine($"Le texte du champ de saisie réglette a
changé {textField.Text}");
}
Choisir un style de bordure
La classe UITextField a quatre types de bordures possibles. On peut modifier le style de bordure via la propriété BorderStyle de type enum UITextBorderStyle.
Cette énumération a quatre valeurs :
-
UITextBorderStyle.None : désactive entièrement la bordure.
-
UITextBorderStyle.Line : affiche un rectangle autour du champ texte.
-
UITextBorderStyle.RoundedRect : affiche un rectangle aux bords arrondis autour du champ texte.
-
UITextBorderStyle.Bezel : affiche une bordure de type bezel autour de champs texte.
Change le style de la bordure
_textField.Layer.BorderStyle = UITextBorderStyle.RoundedRect;
Mise en majuscule automatique
La propriété AutocapitalizationType de type enum UITextAutocapitalizationType permet de mettre en majuscule un texte automatiquement....
Les boutons
Les boutons sont des contrôles permettant d’exécuter un code personnalisé en réponse à une interaction de l’utilisateur. Nous verrons que leurs implémentations suivent la même logique sur toutes les plateformes.
1. iOS
Présentation
Pour afficher un bouton sous iOS, il faut utiliser le contrôle UIButton.
Instancier le contrôle
L’instanciation d’un bouton est un peu différente des autres contrôles.
Il est conseillé d’utiliser la méthode statique FromType de classe UIButton pour construire une instance de UIButton. Cela permet de construire un bouton avec un style déjà configuré.
La méthode FromType prend en paramètre un type de bouton de type enum UIButtonType.
Les principales valeurs de cette enum sont :
-
UIButtonType.System : applique le style défaut d’un bouton système, comme les boutons de navigation par exemple.
-
UIButtonType.Custom : n’applique aucun style prédéfini au bouton.
-
UIButtonType.ContactAdd : ajoute une image représentant un plus à côté du texte du bouton. Généralement utilisé pour l’ajout de contact.
Crée un bouton avec le style par défaut
UIButton monBouton = UIButton.FromType(UIButtonType.System);
Définir le texte du bouton
Le bouton a plusieurs états différents. Pour chaque état, vous pouvez définir un texte de contenu différent.
Les principaux états sont :
-
UIControlState.Normal : l’état normal du bouton.
-
UIControlState.Disabled : l’état désactivé.
-
UIControlState.Highlighted : le bouton passe dans cet état lorsque l’utilisateur est en train de cliquer dessus et repasse à l’état normal quand celui-ci relâche la pression.
La méthode SetTitle prend deux arguments : le titre du bouton de type string et l’état pour lequel ce titre sera utilisé de type UIControlState.
Définition d’un contenu texte
monBouton.SetTitle("Le texte bouton état normal",
UIControlState.Normal);
monBouton.SetTitle("Le texte bouton état enfoncé,
UIControlState.Highlighted);
monBouton.SetTitle("Le texte bouton état désactivé,
UIControlState.Disabled);...
Les cases à cocher
La case à cocher permet d’afficher une valeur booléenne, elle a donc deux états : elle est soit cochée, soit décochée. Généralement, dans les applications elle sert à activer ou désactiver une fonctionnalité.
1. iOS
Présentation
Le contrôle UISwitch permet d’afficher un bouton à deux états : sélectionné/désélectionné.
Instancier le contrôle
Création d’un contrôle UISwitch
UISwitch switch = new UISwitch();
switch.Frame = new CGRect(10, 10, View.Bounds.Width - 20, 40);
// Ajout du contrôle à la vue principale
View.AddSubView(switch);
Changer son état
La propriété booléenne On permet de changer l’état du contrôle UISwitch.
Quand la valeur de cette propriété est à True, celui-ci est coché.
Quand la valeur de cette propriété est à False, celui-ci est décoché.
Passage à l’état sélectionné
Switch.On = true;
Passage à l’état désélectionné
Switch.On = false;
Lorsque l’on change l’état du contrôle via la propriété On, aucune animation n’est jouée lors du changement d’état. La méthode SetState nous permet de choisir si une animation est jouée durant le changement d’état.
Passage à l’état sélectionné en activant l’animation
bool isOn = true;
bool animated = true;
Switch.SetState(isOn, animated);
Surveiller le changement d’état
L’évènement ValueChanged...
Curseur
Le curseur (ou réglette) est un contrôle visuel permettant de faire saisir à un utilisateur une valeur comprise entre deux bornes.
1. iOS
Présentation
Le contrôle UISlider permet d’afficher une réglette sous iOS. La valeur des bornes est configurable ainsi que toute l’apparence de ce contrôle.
Instancier le contrôle
UISlider slider = new UISlider();
slider.Frame = new CGRect(10, 10, View.Bounds.Width - 20, 40);
// Ajout du contrôle à la vue principale
View.AddSubView(slider);
Surveiller le changement de valeur
On peut surveiller le changement de valeur de la réglette via l’évènement ValueChanged.
Écoute de l’évènement ValueChanged
slider.ValueChanged += _slider_ValueChanged;
...
void slider_ValueChanged(object sender, EventArgs e)
{
Console.WriteLine($"La valeur de réglette a changé
{slider.Value}");
}
Par défaut cet évènement est levé à chaque fois que le sélecteur est modifié par l’utilisateur. Si les traitements au changement de cette valeur sont lourds, il est possible d’être notifié du changement de valeur uniquement quand l’utilisateur relâche le sélecteur. Pour ce faire, il suffit de définir la propriété booléenne Continuous à false.
Active la notification de changement de valeur lorsque le sélecteur est relâché
Slider.Continuous = false;
Spécifier les bornes
Par défaut la borne minimum est 0 et la borne maximum est 1.0.
Il est possible de changer les valeurs des bornes, grâce aux propriétés MinValue et MaxValue.
Par exemple si on définit MinValue à 1 et MaxValue à 12, lorsque le curseur sera réglé à son maximum la valeur sera à 12, et lorsque le curseur sera à son minimum sa valeur sera à 1.
Changement des bornes de la réglette
slider.MinValue = 1.0f;
slider.MaxValue = 12f;
2. Android...
Afficher un chargement
Lorsque votre application fait un traitement, par exemple enregistrer une donnée, il faut indiquer à votre utilisateur que votre application travaille. Sans cela il peut penser que votre application ne fonctionne plus. Nous verrons comment indiquer ces temps de chargement sur chaque plateforme.
1. iOS
Présentation
Sous iOS deux vues permettent d’afficher le chargement d’une page. Le ProgressView qui affiche le chargement et son pourcentage d’avancement, et UIActivityIndicatorView qui permet d’afficher un chargement sans aucun indicateur d’avancement.
La barre de chargement
Instanciation de la vue
Var progressView = new UIProgressView();
progressView.Style = UIProgressViewStyle.Bar;
progressView.Frame = new CGRect(10, 10, View.Bounds.Width - 20, 40);
La méthode SetProgress permet de définir le pourcentage d’avancement du chargement. Il prend comme premier paramètre le pourcentage d’avancement de type float, et comme second argument si ce changement de pourcentage est animé.
Définit le pourcentage d’avancement de la barre de chargement
float pourcentage = 25f;
bool isAnimated = true;
_progressView.SetProgress(pourcentage, isAnimated);
La propriété TintColor de type UIColor permet de changer la couleur de la barre de chargement.
Définit la couleur rouge à la barre de chargement
progressView.TintColor...
Afficher des alertes
Les alertes permettent de transmettre des informations importantes à l’utilisateur. Elles se composent d’un titre, d’un message, et d’un ou plusieurs boutons permettant à l’utilisateur de faire un choix.
1. iOS
Présentation
La classe UIAlertController permet de gérer tous les types d’alertes.
Le contrôleur propose deux types d’alertes différents :
-
Les alertes simples : permettant d’afficher un titre et un message ainsi que des boutons optionnels.
-
Les ActionSheet qui sont des alertes plus complexes, conseillées lorsque l’utilisateur a plus de deux choix différents.
Alerte simple
Une alerte se crée via la méthode statique Create de la classe UIAlertController.
Le premier paramètre de l’alerte est le titre de type string de celle-ci, le second est le message de type string (ce message est optionnel) et enfin le dernier est le style de l’alerte.
Création de l’alerte
UIAlertController alert = UIAlertController.Create("Titre",
"Message", UIAlertControllerStyle.Alert);
Une fois le contrôleur créé, on peut lui ajouter des actions. Pour créer une action, il faut invoquer la méthode statique Create de la classe UIAlertAction.
Cette méthode prend trois paramètres en argument :
-
Le titre de l’action de type string.
-
Le style de l’action de type enum UIAlertActionStyle.
-
Le délégué exécuté lors du clic sur le bouton action.
L’enum UIAlertActionStyle a trois valeurs possibles :
-
UIAlertActionStyle.Default : applique le style par défaut des boutons.
-
UIAlertActionStyle.Cancel : idéal pour les boutons qui annulent une opération courante et laisse les choses inchangées.
-
UIAlertActionStyle.Destructive : idéal pour les actions entraînant une suppression de données ou un changement. Par exemple, une action ’Déconnexion’ sera de ce style-ci.
Ajout d’un bouton d’action
// Ajout d'une action OK
UIAlertAction action = UIAlertAction.Create("OK",
UIAlertActionStyle.Default, (currentAction) =>
Console.WriteLine("Option 'OK' sélectionnée"));
// Ajout de l'action au contrôleur
alert.AddAction(action);
Une fois le contrôleur...
Utiliser une police personnalisée
Il peut être intéressant d’utiliser une police personnalisée pour votre application. Cela permet de se démarquer de la concurrence et de créer un style visuel propre.
1. iOS
Présentation
Il est assez facile d’ajouter vos polices dans votre application iOS, cependant il faut respecter certaines étapes pour que cela fonctionne.
Inclure votre police dans le projet
iOS supporte uniquement deux types de polices les TTF et OTF. Pour les ajouter à votre projet, il faut ajouter le fichier dans le dossier Resources dans le projet iOS. Il est d’usage de rajouter les polices dans ce dossier, mais vous pouvez très bien utiliser un sous-dossier au dossier Resources.
Une fois le fichier ajouté au projet, faites un clic droit sur celui-ci, sélectionnez Properties et définissez la valeur Copy To Output Directory à AlwaysCopy.
Si vous oubliez de changer la propriété du fichier en AlwaysCopy vous aurez comme valeur null lorsque vous essayerez de charger la police.
Modifier le fichier info.plist
L’étape suivante est de préciser à iOS que vous utilisez une police personnalisée.
iOS charge automatiquement les polices personnalisées au lancement de l’application, cela peut faire ralentir votre application.
Pour définir ces polices, il faut modifier le fichier info.plist. Ouvrez...
Conclusion
Dans ce chapitre, nous avons vu les principaux contrôles pour créer des formulaires indispensables à toute application mobile.
Malgré certaines différences entre les plateformes, ceux-ci sont très proches et ont souvent la même logique de fonctionnement.