PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Mise en place
  • Comment le faire ?
  • Remarques
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation
Sur mobile, pour l'affichage des images, chaque matériel a une taille physique et une résolution graphique spécifiques.
Arrêtons-nous un instant sur les termes liés à la gestion des écrans et des images :
  • la taille d’un écran est exprimée en pixels. La taille d’un écran correspond à la largeur et la hauteur d’un écran en nombre de pixels.
  • la finesse d’un écran (ou résolution d’affichage) est exprimée en "dpi" (dots per inch) ou "ppi" (pixels per inch). En français, c’est le nombre de points à afficher par pouce ou le nombre de pixels par pouce (un pouce équivaut à 2.54 cm). Plus cette valeur est élevée, plus l’affichage est net, fin et précis.
Un même fichier image, sur 2 écrans de même taille physique mais de résolution différente, peut se retrouver affiché en petit ou en grand.
Pour éviter cela, et afficher l'image dans une taille identique, les images sont affichées dans un mode "étiré".
  • Dans le cas des écrans haute définition, il se peut que l'image affichée soit pixelisée.
  • Dans le cas des écrans basse définition, c'est l'inverse : si l'image est en trop haute définition, il se peut que sa réduction provoque un flou.
center alt=
Pour résoudre ce problème, WINDEV Mobile propose pour chaque image utilisée dans l'application de fournir plusieurs fichiers image différents, adaptés à différents DPI.
A l'exécution, l'image la plus adaptée à la résolution sera automatiquement choisie.
Versions 21 et supérieures
Universal Windows 10 App Cette fonctionnalité est désormais disponible en mode Universal Windows 10 App.
Nouveauté 21
Universal Windows 10 App Cette fonctionnalité est désormais disponible en mode Universal Windows 10 App.
Universal Windows 10 App Cette fonctionnalité est désormais disponible en mode Universal Windows 10 App.
Mise en place

Comment le faire ?

Pour gérer automatiquement le DPI d'une image utilisée dans l'application :
  1. Créez un jeu d'images correspondant aux différents DPI.
    • Android 5 DPI sont gérés : 160, 240, 320, 480, 640.
    • iPhone/iPad 3 DPI sont gérés : 160, 320, 480.
  2. Le nom de ces images doit être formaté de la façon suivante :
    NomImage@dpi999.Extension

    Par exemple, pour une image "Logo.png", le jeu d'images sera :
    • "Logo@dpi160.png",
    • "Logo@dpi320.png",
    • "Logo@dpi480.png".
    Le nom de ces images doit être formaté de la façon suivante :
    NomImage@dpi99x.Extension

    99x correspond au coefficient multiplicateur par rapport au DPI de l'éditeur.
    L'éditeur travaille en 160 DPI. Par exemple, pour une image "Logo.png", le jeu d'images sera :
    • "Logo@dpi1x.png" pour le DPI de 160. Sous Android, correspond à mdpi.
    • "Logo@dpi1_5x.png" pour le DPI de 240. Sous Android, correspond à hdpi.
    • "Logo@dpi2x.png" pour le DPI de 320. Sous Android, correspond à xhdpi.
    • "Logo@dpi3x.png" pour le DPI de 480. Sous Android, correspond à xxhdpi.
    • "Logo@dpi4x.png" pour le DPI de 640. Sous Android, correspond à xxxhdpi.
  3. Sous l'éditeur, dans le champ correspondant au fichier image, sélectionnez un des fichiers du jeu d'images.
Lors de la création de l'archive Android ou iOS, WINDEV Mobile intégrera automatiquement l'ensemble des images fournies dans l'archive.

Remarques

  • Il n'est pas obligatoire de fournir une image pour les 5 DPI gérés. En exécution, l'image la plus proche du DPI de l'écran de l'appareil sera affichée automatiquement.
  • Veillez à respecter les formats d'images supportés par la plateforme utilisée.
  • Pour certaines images (splash screen, icone de l'application, ...), l'interface de l'éditeur propose également de sélectionner un fichier par résolution. Dans ce cas, les deux méthodes peuvent être utilisées (sélection d'un fichier par résolution ou sélection d'un seul fichier au format multi-dpi).
  • Le catalogue d'images génère automatiquement les différentes images nécessaires. Pour plus de détails, consultez Catalogue d'images.
  • Versions 23 et supérieures
    Les fichiers de type ".WDPIC" avec l'option "multi-dpi", générés par l'éditeur d'images, sont automatiquement gérés : il n'est pas nécessaire de générer les différentes images correspondant aux différents DPI.
    Android Attention : Si un fichier de type ".WDPIC" doit être affecté par programmation à un champ, il est nécessaire que ce fichier ait préalablement été ajouté dans la liste des éléments du projet.
    Nouveauté 23
    Les fichiers de type ".WDPIC" avec l'option "multi-dpi", générés par l'éditeur d'images, sont automatiquement gérés : il n'est pas nécessaire de générer les différentes images correspondant aux différents DPI.
    Android Attention : Si un fichier de type ".WDPIC" doit être affecté par programmation à un champ, il est nécessaire que ce fichier ait préalablement été ajouté dans la liste des éléments du projet.
    Les fichiers de type ".WDPIC" avec l'option "multi-dpi", générés par l'éditeur d'images, sont automatiquement gérés : il n'est pas nécessaire de générer les différentes images correspondant aux différents DPI.
    Android Attention : Si un fichier de type ".WDPIC" doit être affecté par programmation à un champ, il est nécessaire que ce fichier ait préalablement été ajouté dans la liste des éléments du projet.
Version minimum requise
  • Version 20
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire