Répondre à: Adapter l'écran de l'application selon le support d'ouverture

  • R3dKap

    Membre
    15 mai 2022 à 20h03

    @Hugotr35 attention faire une application responsive dans Power Apps c’est possible mais c’est chronophage et plutôt complexe.

    Pour y parvenir il te faut effectivement commencer par désactiver la mise à l’échelle de ton app comme indiqué par @DavidZed :

    Ensuite, il te faudra utiliser le conteneur horizontal et le conteneur vertical pour que tes contrôles s’agencent automatiquement les uns par rapport aux autres et faire en sorte qu’ils passent d’un affichage en ligne à un affichage en colonne si la largeur de l’écran est réduite (comme sur un téléphone). Pour cela, utilise bien la propriété Retour automatique à la ligne (LayoutWrap) :

    Il te faudra imbriquer de nombreux conteneurs pour obtenir ce que tu veux :

    Ensuite, il te restera le problème de la taille de la police : tu remarqueras que lorsque tu crées une application PC la taille de la police d’un bouton est à 13 et il est à 24 lorsque tu crées une app mobile. Cela est dû au fait que la densité de pixels par pouce est beaucoup plus élevée sur un mobile que sur un écran de PC et donc tout paraîtrait minuscule sur un mobile si on gardait les même tailles que celle sur PC.

    Il te faudra donc définir des tailles de polices conditionnelles selon que ton application s’exécute sur un PC ou sur un mobile. Pour détecter si ton device est un mobile, tu peux mettre ce code dans le OnStart de ton app :

    Set(n    gloPhoneMode;n    Acceleration.X > 0 && App.ActiveScreen.Width < 600n);;

    Ensuite pour gérer l’histoire des tailles de polices, à la suite du code ci-dessus je fais ceci :

    Set(n    gloSizes;n    If(n        gloPhoneMode;n        gloFontSizes.Phone;n        gloFontSizes.Desktopn    )n);;

    gloFontSizes est définit précédemment comme ceci :

    Set(n    gloFontSizes;n    {n        Phone: {n            S: 11;n            M: 14;n            L: 16;n            XL: 20n        };n        Desktop: {n            S: 13;n            M: 16;n            L: 18;n            XL: 24n        }n    }n);

    Puis sur chaque libellé, bouton, etc. je définis la taille en utilisant ma variable gloSizes comme ceci :

    Bon courage ! 😋

    PS : autre technique plus simple = chaque écran est créé en double (un pour PC un pour mobile) -> tu utilises le code ci-dessus pour détecter si t’es sur un mobile (tu le mets dans App.StartScreen) et tu te branches sur le bon écran en fonction… GROS INCONVENIENT : bin tu dois tout faire en double et le risque de désynchro de version entre des écrans jumeaux est plutôt élevé…

    CommentID=7ku9AwK5i817Flq, PostID=ftZwKSf20oqbtPc