DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Tuto WINDEV Mobile / Tuto - Ma première application Android/iOS
  • 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.
Durée de la leçon 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.
Exemple pratique
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 :
  1. Sélectionnez la configuration Android ou iOS (dans cette leçon, les images ont été réalisées en configuration Android).
  2. Dans la zone des boutons d'accès rapide, déroulez si nécessaire "GO" et sélectionnez l'option "Test en mode simulateur Déboguer sur simulateur XXX".
    Test en mode simulateur

    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 Déboguer sur simulateur" sera sélectionnée, l'icône correspondante (Déboguer sur simulateur) sera automatiquement proposée dans les boutons d'accès rapide.
  3. Validez si nécessaire la fenêtre qui s'affiche.
  4. La fenêtre apparaît en mode portrait.
  5. Le simulateur propose un menu sous forme d'icônes : Menu du simulateur.
  6. Modifiez l'orientation de la fenêtre grâce à l'option "Rotation" (Modification de l'orientation de la fenêtre).
  7. La fenêtre change d'orientation à l'écran.
    Fenêtre en mode portrait
    Fenêtre en mode paysage
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 :
  1. Sélectionnez le champ (clic sur le champ Bouton).
  2. 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 :
  1. Sélectionnez le champ si nécessaire.
  2. Affichez le menu contextuel (clic droit).
  3. Sélectionnez l'option "Ancrage" : la fenêtre de définition des ancrages apparaît :
    Gestion des ancrages
  4. 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 (Tester le projet 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.
En résumé
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.
Pour découvrir comment créer et développer une application avec gestion d'une base de données, suivez le tuto Développer une application de gestion pour Mobile.
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é".
Leçon précédenteSommaire
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 16/11/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale