|
|
|
|
|
|
|
|
|
|
- Leçon 3 - Adaptation de l'UI grâce aux ancrages
- Adaptation des interfaces
- Choix des appareils
- Orientation de la fenêtre
- Exemple pratique
- Test de l'orientation en mode simulateur
- Mise en place des ancrages
- En résumé
Tuto - Ma première application Android/iOS
Leçon 3 - Adaptation de l'UI grâce aux ancrages Ce que vous allez apprendre : - Adaptation des interfaces :
- Choix de la résolution en fonction du matériel.
- Orientation de la fenêtre.
- Gestion des ancrages.
 30 mn Adaptation des interfaces WINDEV Mobile permet de créer simplement des interfaces s'adaptant au matériel utilisé : - Pour le système Android, les applications peuvent être utilisées aussi bien sur des téléphones que sur des tablettes.
- Pour le système iOS, les applications peuvent être utilisées sur des téléphones (iPhone) et sur des tablettes (iPad).
Ces interfaces peuvent également s'adapter à l'orientation du matériel utilisé (portrait ou paysage). Choix des appareils Lors de la création d'un projet, nous avons vu qu'il était possible d'indiquer le type de matériel sur lequel l'application pourra s'exécuter : téléphone et / ou tablette. Plusieurs cas se présentent : - Vous avez un seul matériel cible : dans ce cas, il suffit de créer un projet spécifique iOS ou Android pour le matériel cible (téléphone uniquement ou tablette uniquement). L'assistant de création de projet vous permet alors de sélectionner le matériel cible voulu. L'assistant de création de fenêtres proposera uniquement la création de fenêtres pour ce matériel cible.
- Vous ne connaissez pas le matériel cible : dans ce cas, dans l'assistant de création de projet, vous sélectionnez "Générer une application pour téléphones et tablettes". Lors de la création des fenêtres, vous pouvez :
- développer vos fenêtres pour le téléphone. L'ancrage des champs dans la fenêtre permettra d'adapter le contenu aux tablettes (solution conseillée).
- utiliser les agencements pour créer des interfaces différentes selon la plateforme d'exécution et sa résolution.
Orientation de la fenêtre Sous Android ou iOS, une fenêtre peut avoir une des orientations suivantes : - Libre : la fenêtre suit l'orientation du matériel,
- Bloquée en mode portrait,
- Bloquée en mode paysage.
Dans le cas d'une fenêtre bloquée en mode portrait ou paysage (cas rare !), aucune manipulation spécifique n'est nécessaire. Dans le cas d'une fenêtre libre, la disposition des champs et leur taille doivent s'adapter à l'orientation. Le mécanisme de l'ancrage permet d'obtenir un résultat satisfaisant. Reprenons notre exemple présenté dans les leçons précédentes. Dans cet exemple, le projet a été créé pour un téléphone et nous l'avons testé en mode portrait sous le simulateur. Nous allons maintenant le tester en mode paysage sous le simulateur. Test de l'orientation en mode simulateur Lancez le test du projet en mode simulateur : - Sélectionnez la configuration Android ou iOS (dans cette leçon, les images ont été réalisées en configuration Android).
- Dans la zone des boutons d'accès rapide, déroulez si nécessaire "GO" et sélectionnez l'option "
 Déboguer sur simulateur XXX".
 Par défaut, le test du projet sur votre appareil mobile est proposé dans les boutons d'accès rapide. Dès que l'option " Déboguer sur simulateur" sera sélectionnée, l'icône correspondante ( ) sera automatiquement proposée dans les boutons d'accès rapide. - Validez si nécessaire la fenêtre qui s'affiche.
- La fenêtre apparaît en mode portrait.
- Le simulateur propose un menu sous forme d'icônes :
 . - Modifiez l'orientation de la fenêtre grâce à l'option "Rotation" (
 ). - La fenêtre change d'orientation à l'écran.
Dans notre exemple, le bouton ne change pas de place : il ne s'adapte pas à l'orientation de l'écran. Arrêtez le test et revenez sous l'éditeur. Mise en place des ancrages Nous allons maintenant modifier notre fenêtre pour que le champ Bouton "Afficher" soit centré dans la fenêtre et reste centré quelle que soit l'orientation du mobile. Pour centrer le champ Bouton dans la fenêtre : - Sélectionnez le champ (clic sur le champ Bouton).
- Sous le volet "Alignement", dans le groupe "Centrage et répartition", cliquez sur "Centrer dans le parent (Horz.)".
Pour que le champ Bouton reste centré dans la fenêtre, nous allons utiliser l'ancrage du champ : - Sélectionnez le champ si nécessaire.
- Affichez le menu contextuel (clic droit).
- Sélectionnez l'option "Ancrage" : la fenêtre de définition des ancrages apparaît :
- Sélectionnez "Centré horizontal" et validez (bouton "OK").
Dans la fenêtre affichée sous l'éditeur, vous pouvez remarquer les petites flèches rouges dans le champ. Ces flèches indiquent que le champ est ancré.
Lancez le test du projet sur simulateur ( parmi les boutons d'accès rapide) : - Le bouton est centré en mode portrait.
- Changez l'orientation du simulateur.
- Le bouton reste centré en mode paysage.
Fermez le simulateur. Ce tuto nous a permis de : - créer un projet, une fenêtre et un champ.
- saisir du code WLangage.
- tester une fenêtre.
- adapter l'interface aux changements d'orientation grâce aux ancrages.
Projet corrigé :
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient la fenêtre créée dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Ma première application Android/iOS", double-cliquez sur "Mon projet Android/iOS - Corrigé". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|