DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Image
  • 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/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
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.
Les différences de DPI
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.
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/iPadWidget IOSMac Catalyst 3 DPI sont gérés : 160, 320, 480.
  2. Le nom de ces images doit être formaté de la façon suivante :
    NomImage@dpi99x.Extension

    Où 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.
  • 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

Dernière modification : 20/03/2023

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