Ajout d'une vue personnalisée au sélecteur de vue

De RAD Studio
Aller à : navigation, rechercher

Remonter à Utilisation des vues FireMonkey


Vous pouvez créer et ajouter de nouvelles vues au sélecteur de vue dans le Concepteur de fiches si les vues disponibles ne couvrent pas les spécifications de votre périphérique cible.

Spécifications d'affichage pour les vues disponibles

Vue Fichier MinPhysicalSize   MaxPhysicalSize   MinLogicalSize   MaxLogicalSize   PPI

Bureau Windows

System.Win.Devices 

     Surface Pro

System.Win.Devices 

     Téléphone Android 3,5 pouces

System.Android.Devices

(800,500)

(1000,600)

(400,250)

(500,300)

320

Téléphone Android 4 pouces

System.Android.Devices

(1280,800)

(1360,850)

(640,400)

(680,425)

320

Téléphone Android 5 pouces

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Tablette Android 7 pouces

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Tablette Android 10 pouces

System.Android.Devices

(2400,1500)

(2560,1600)

(1200,750)

(1280,800)

320

Google Glass

System.Android.Devices

(640,360)

(640,360)

(427,240)

(427,240)

30 

Sony SmartWatch 3

System.Android.Devices

(320,320)

(240,240)

283

Motorola Moto 360

System.Android.Devices

(320,290)

(240,218)

205

iPhone 3,5 pouces

System.iOS.Devices

(480,320)

(480,320)

163

iPhone 4 pouces

System.iOS.Devices

(1136,640)

(568,320)

326

iPhone 4,7 pouces

System.iOS.Devices

(1334, 750)

(667, 375)

326

iPhone 5,5 pouces

System.iOS.Devices

(2208, 1242)

(736, 414)

489

iPad

System.iOS.Devices

(2048,1536)

(1024,768)

264

Bureau macOS

System.Mac.Devices

Remarque : Les périphériques ayant seulement les paramètres MaxPhysicalSize et MaxLogicalSize sont définis avec les dimensions exactes réelles.

Ajout d'une vue Android pour un périphérique spécifique

Pour créer une nouvelle vue, vous devez :

L'exemple suivant montre comment créer une vue pour un périphérique Android avec les spécifications d'affichage suivantes :

  • Model = MyPhone
  • Diagonal (in) = 4.5
  • Resolution = 720 x 1280 pixels
  • Pixel density = 326 ppi
  • Css pixel ratio = xhdpi (2.0x)

Vous trouverez les spécifications d'un périphérique spécifique sur le site web du fabricant, sur la fiche de spécifications.

Ajout du périphérique prédéfini pour la nouvelle vue

Pour activer la vue dans le sélecteur de vue et personnaliser sa fiche, vous devez ajouter le périphérique prédéfini à partir du Gestionnaire de périphériques ou à partir du fichier DevicePresets.xml :

Remarque : Si vous ajoutez un périphérique prédéfini à partir du Gestionnaire de périphériques, vous devez aller dans C:\Users\<nomutilisateur>\AppData\Roaming\Embarcadero\BDS\21.0, ouvrir DevicePresets.xml et copier le nom généré automatiquement écrit entre les balises <Name></Name>. Ce nom doit correspondre au nom de la vue utilisé dans le package de cette vue.
  • Pour ajouter le nouveau périphérique prédéfini à partir du fichier DevicePresets.xml, suivez les étapes ci-dessous :
Avertissement : Vérifiez soigneusement les modifications apportées au fichier DevicePresets.xml. Contrôlez les balises xml afin de vous assurer que leur casse est correcte. Sinon, le concepteur risque de ne pas les comprendre et de se comporter de manière inattendue.
  1. Allez sur C:\Users\<nom_utilisateur>\AppData\Roaming\Embarcadero\BDS\21.0
    Remarque : C'est un dossier masqué. Si vous ne le voyez pas, activez l'option Afficher les fichiers, dossiers et lecteurs cachés dans la boîte de dialogue Options des dossiers du Panneau de configuration Windows.
  2. Ouvrez le fichier avec un éditeur de texte.
  3. Dans la balise <MobileDevices RepositoryVersion="3">, ajoutez un nouvel élément MobileDevice comme suit : 
      <MobileDevice>
    <Name>TestView</Name> <!-- Same unique ID used in the creation package if you are registering a new View -->
    <Displayname>My Android Phone</Displayname> <!-- Name to show in the Device Manager, View Selector and Multi-Device Preview -->
    <DevicePlatform>3</DevicePlatform>
    <FormFactor>2</FormFactor>
    <UserData>True</UserData>
    <Portrait Enabled="True" Width="360" Height="640" Top="61" Left="44" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
    <UpsideDown Enabled="True" Width="360" Height="640" Top="68" Left="47" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
    <LandscapeLeft Enabled="True" Width="640" Height="360" Top="44" Left="68" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
    <LandscapeRight Enabled="True" Width="640" Height="360" Top="47" Left="61" StatusbarHeight="25" StatusBarPos="0" Artwork="ARTWORK_PATH"/>
  </MobileDevice>
    Remarques :
    • Vous devez remplacer ARTWORK_PATH par le chemin d'accès correct à votre illustration graphique.
    • Si vous voulez définir des préréglages de périphériques avec une forme non rectangulaire, utilisez le champ Mask.

    Pour de plus amples informations, voir les éléments de DevicePresets.xml.

  4. Redémarrez l'EDI pour que les modifications prennent effet.

Après avoir redémarré l'EDI, le nouveau périphérique prédéfini apparaît dans le Gestionnaire de périphériques et dans l'aperçu multi-périphérique.

Créer un nouveau package

  1. Sélectionnez Fichier > Nouveau > Package - Delphi ou C++Builder.
  2. Dans le Gestionnaire de projets, cliquez avec le bouton droit sur <nom_projet.bpl>.
  3. Sélectionnez Ajouter nouveau > Unité.
  4. Ajoutez le code suivant à l'unité :
  • Delphi :
unit Unit1;

interface

implementation

uses

  system.Devices, system.Types, system.SysUtils;

const
  ViewName = 'TestView'; // The unique name of the view, it has to be the same name as the one written between <Name></Name> tags of the DevicePreset.xml file.

initialization

  TDeviceinfo.AddDevice(TDeviceinfo.TDeviceClass.Phone, ViewName,
    TSize.Create(1216, 684), TSize.Create(1216 div 2, 684 div 2), // MinPhysicalSize(max, min), MinLogicalSize(max, min)
    TSize.Create(1280, 720), TSize.Create(1280 div 2, 720 div 2), // MaxPhysicalSize(max,min), MaxLogicalSize(max,min)
    TOSVersion.TPlatform.pfAndroid, 326); //Select the platform and the pixel density.

finalization

  TDeviceinfo.RemoveDevice(ViewName); // To unregister the view after unistalling the package.

end.
  • C++ :

Ajoutez ce code au fichier .cpp : 

#include "Unit1.h"
#include <System.Devices.hpp>
// ---------------------------------------------------------------------------
#pragma package(smart_init)

void initdevice() {

    TDeviceInfo::AddDevice(TDeviceInfo::TDeviceClass::Phone, "TestView", // The unique name of the view, it has to be the same name as the one written between <Name></Name> tags of the DevicePreset.xml file.
        TSize(1216, 684), TSize(1216 / 2, 684 / 2), TSize(1280, 720),
        TSize(1280 / 2, 720 / 2), TOSVersion::TPlatform::pfAndroid, 326);
}

Ajoutez ce code au fichier .h : 

void initdevice();
#pragma startup initdevice 42
  1. Avant d'installer le package, fermez tous les projets ouverts sur le Concepteur.
  2. Dans le Gestionnaire de projets, cliquez avec le bouton droit sur <nom_projet.bpl>.
  3. Cliquez sur Installer.
  4. Un message d'information vous indique que le package a été installé.
  5. Redémarrez l'EDI pour que les modifications prennent effet.

Après avoir redémarré l'EDI, le nouveau périphérique prédéfini apparaît dans le Gestionnaire de périphériques, l'aperçu multi-périphérique et le sélecteur de vue.

Utilisation de la nouvelle vue

Après avoir ajouté le périphérique prédéfini, installé le package et redémarré l'EDI, la vue est disponible dans le sélecteur de vue. Elle apparaît avec le nom d'affichage défini dans le fichier xml.

CustomizedView.png

Afin d'utiliser la vue personnalisée lorsque vous exécutez le projet multi-périphérique dans le périphérique correspondant, procédez comme suit :

  • Référencez l'unité de la vue depuis votre projet, en ajoutant par exemple l'unité .pas à votre projet.
Avertissement : Référencer l'unité de la vue dans votre projet enregistre la vue même si cela n'est pas nécessaire.

Lorsque vous exécutez le projet, un algorithme sélectionne la vue la plus appropriée pour le périphérique sélectionné. Si la vue personnalisée est la vue la plus appropriée pour le périphérique cible, celle-ci est lancée. Le système ignore les vues qui ne sont pas compatibles avec la plate-forme cible.

Retrait des vues personnalisées

Pour dérecenser une vue personnalisée du sélecteur de vue (ajoutée au package à l'étape Créer un nouveau package), vous devez utiliser le code suivant. 

const
    ViewName = 'TestView';

finalization
    TDeviceinfo.RemoveDevice(TestView);

Pour retirer une vue personnalisée du sélecteur de vue :

  1. Fermez toutes les fiches avant de désinstaller un package contenant des vues personnalisées.
  2. Choisissez Composant > Installer des packages....
  3. Sélectionnez le package que vous voulez retirer.
  4. Cliquez sur Retirer.

Après avoir retiré le package, si vous n'avez plus besoin de ce périphérique prédéfini, vous pouvez le supprimer. Pour cela, supprimez le périphérique prédéfini à partir du Gestionnaire de périphériques ou supprimez les informations associées qui sont dans le fichier DevicePresets.xmlde la même manière que vous les avez ajoutées dans les étapes précédentes.

Remarque : Il arrive que vous deviez redémarrer l'EDI pour que les changements prennent effet.

Voir aussi

Récupérée de « https://docwiki.embarcadero.com/RADStudio/Sydney/f/index.php?title=Ajout_d%27une_vue_personnalisée_au_sélecteur_de_vue&oldid=214616 »