Hinzufügen einer angepassten Ansicht zur Ansichtsauswahl

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

Nach oben zu Verwenden von FireMonkey-Ansichten


Wenn die verfügbaren Ansichten die Spezifikationen Ihres Zielgeräts nicht abdecken, können Sie neue Ansichten erstellen und sie der Ansichtsauswahl im Formular-Designer hinzufügen.

Display-Spezifikationen für verfügbare Ansichten

Ansicht Datei Min. physikalische Größe   Max. physikalische Größe   Min. logische Größe   Max. logische Größe   PPI

Windows-Desktop

System.Win.Devices

Surface Pro

System.Win.Devices

Android 3,5 Zoll Phone

System.Android.Devices

(800,500)

(1000,600)

(400,250)

(500,300)

320

Android 4 Zoll Phone

System.Android.Devices

(1280,800)

(1360,850)

(640,400)

(680,425)

320

Android 5 Zoll Phone

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Android 7 Zoll Tablet

System.Android.Devices

(1708,960)

(1920,1200)

(854,480)

(960,600)

320

Android 10 Zoll Tablet

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

iPhone 3,5 Zoll

System.iOS.Devices

(480,320)

(480,320)

163

iPhone 4 Zoll

System.iOS.Devices

(1136,640)

(568,320)

326

iPhone 4,7 Zoll

System.iOS.Devices

(1334, 750)

(667, 375)

326

iPhone 5,5 Zoll

System.iOS.Devices

(2208, 1242)

(736, 414)

489

iPad

System.iOS.Devices

(2048,1536)

(1024,768)

264

OS X Desktop

System.Mac.Devices

Hinweis: Für Geräte mit Werten nur für MaxPhysicalSize und MaxLogicalSize sind die tatsächlichen, exakten Dimensionen angegeben.

Hinzufügen einer Android-Ansicht für ein bestimmtes Gerät

Im folgenden Beispiel wird gezeigt, wie eine Ansicht für ein Android-Gerät mit den folgenden Display-Spezifikationen erstellt wird:

  • Modell = MyPhone
  • Diagonale (Zoll) = 4,5
  • Auflösung = 720 x 1280 Pixel
  • Punktdichte = 326 ppi (Pixel pro Zoll)
  • CSS-Pixelverhältnis = xhdpi (2,0x)

Die Spezifikationen für ein bestimmtes Gerät finden Sie im Datenblatt auf der Hersteller-Website.

Erstellen eines neuen Package

  1. Wählen Sie Datei > Neu > Package - Object Pascal oder Appmethod C++.
  2. Klicken Sie in der Projektverwaltung mit der rechten Maustaste auf den Knoten <Projektname.bpl>.
  3. Wählen Sie Neue hinzufügen > Unit.
  4. Fügen Sie der Unit den folgenden Code hinzu:
  • Object Pascal:
unit Unit1;

interface

implementation

uses

  system.Devices, system.Types, system.SysUtils;
  
const
  ViewName = 'TestView'; // The name of the view.

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++:

Fügen Sie diesen Code der .cpp-Datei hinzu:

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

void initdevice() {

	TDeviceInfo::AddDevice(TDeviceInfo::TDeviceClass::Phone, "TestView",
		TSize(1216, 684), TSize(1216 / 2, 684 / 2), TSize(1280, 720),
		TSize(1280 / 2, 720 / 2), TOSVersion::TPlatform::pfAndroid, 326);
}

Fügen Sie diesen Code der .h-Datei hinzu:

 
void initdevice();
#pragma startup initdevice 42
  1. Schließen Sie vor dem Installieren des Package alle geöffneten Projekte im Designer.
  2. Klicken Sie in der Projektverwaltung mit der rechten Maustaste auf den Knoten <Projektname.bpl>.
  3. Klicken Sie auf Installieren.
  4. Es wird eine Informationsmeldung angezeigt, die Sie darüber informiert, dass das Package installiert wurde.

Die angepasste Ansicht verwendet das gleiche Formular wie die Master-Ansicht. Um ein angepasstes Formular zu erstellen, müssen Sie eine XML-Datei bearbeiten. Siehe Anpassen des Formulars für eine neue Ansicht.

Verwenden der neuen Ansicht

Nach der Installation des Package ist die Ansicht in der Ansichtsauswahl verfügbar. Sie wird mit dem im Package festgelegten Namen angezeigt.

Hinweis: Wenn die Ansicht nicht in der Ansichtsauswahl angezeigt wird, müssen Sie der Datei MobileDevices.xml die neue Ansicht, wie unter Anpassen des Formulars für eine neue Ansicht beschrieben, hinzufügen.

CustomizedView.png

Um die angepasste Ansicht des geräteübergreifenden Projekts auf dem entsprechenden Gerät auszuführen, müssen Sie Ihrem Projekt die Package-Unit hinzufügen:

  1. Fügen Sie dem uses-Abschnitt des geräteübergreifenden Projekts die Package-Unit hinzu.
  2. Beim Ausführen des Projekts wird anhand eines Algorithmus die passendste Ansicht für das betreffende Gerät ausgewählt. Wenn die angepasste Ansicht die am besten passendste für das Zielgerät ist, dann wird diese Ansicht aufgerufen.

Der Compiler und der Linker fügen der Endanwendung nur die für die Anwendung benötigten Ansichten hinzu. Beispielweise werden keine Windows-Ansichten in eine Android-Anwendung aufgenommen.

Entfernen von angepassten Ansichten

Mit dem folgenden Code können Sie die Registrierung einer angepassten Ansicht in der Ansichtsauswahl aufheben.

const
    ViewName = 'TestView';

finalization
    TDeviceinfo.RemoveDevice(TestView);

So entfernen Sie eine angepasste Ansicht aus der Ansichtsauswahl:

  1. Schließen Sie alle Formulare, bevor Sie ein Package mit angepassten Ansichten deinstallieren.
  2. Wählen Sie Komponente > Packages installieren....
  3. Wählen Sie das Package aus, das Sie entfernen möchten.
  4. Klicken Sie auf Entfernen.
Hinweis:
Sie müssen die IDE eventuell neu starten, damit die Änderungen wirksam werden.

Anpassen des Formulars für eine neue Ansicht

Wenn Sie eine neue Ansicht erstellen, werden nicht die tatsächlichen Abmessungen (Höhe und Breite) des Formulars angezeigt. Um das Formular anzupassen, müssen Sie die Datei MobileDevices.xml bearbeiten.

Warnung: Überprüfen Sie die Änderungen in der Datei MobileDevices.xml äußerst sorgfältig. Sehen Sie sich die XML-Tags genau an, um sicherzustellen, dass sie richtig geschrieben sind (Groß-/Kleinschreibung), ansonsten könnte der Designer ein unerwartetes Verhalten zeigen.

In der Datei MobileDevices.xml werden die Geräteinformationen zur Entwurfszeit definiert. In dieser Datei können Sie u. a. Folgendes bearbeiten:

  • Den Anzeigenamen für Ihre Ansicht.
  • Verfügbare Ausrichtungen.
  • Anzeigegröße für jede Ausrichtung.
  • Position und Größe der Statuszeile.
  • Rahmen für Ihr Formular.

So fügen Sie der Datei MobileDevices.xml eine neue Ansicht hinzu:

  1. Wechseln Sie zum Ordner C:\Benutzer\<Benutzername>\AppData\Roaming\Embarcadero\BDS\15.0.
    Hinweis: Dies ist ein verborgener Ordner. Wenn er nicht angezeigt wird, aktivieren Sie in der Windows-Systemsteuerung unter Ordneroptionen die Option Versteckte Dateien, Ordner und Treiben anzeigen.
  2. Öffnen Sie die Datei in einem Texteditor.
  3. Fügen Sie im Tag <MobileDevices RepositoryVersion="3"> ein neues <MobileDevice>-Element folgendermaßen hinzu:
      <MobileDevice>
        <Displayname>MyPhone</Displayname> //Name to show on the '''View Selector'''.
        <Name>TestView</Name> //ID used in the creation package.
        <DevicePlatform>3</DevicePlatform>
        <FormFactor>2</FormFactor> Form of the device.
        <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>
  1. Starten Sie die IDE neu, damit die Änderungen wirksam werden.

Elemente in der Datei MobileDevices.xml

  • <Displayname></Displayname>-Tags:
Der Name, der in der Ansichtsauswahl angezeigt werden soll.
Hinweis:
Wird in Appmethod 1.15 nicht unterstützt.
  • <Name></Name>-Tags:
Die ID, mit der das Package erstellt wurde, um eine neue Ansicht hinzuzufügen.
  • <DevicePlatform></DevicePlatform>-Tags:
Die Plattform des Geräts.
Nummer Definition

0

Windows

1

OS X

2

iOS

3

Android

  • <FormFactor></FormFactor>-Tags:
Der Standard des Geräts.
Nummer Definition

0

Desktop

1

Nicht verwendet

2

Telefon

3

Tablet

  • Ausrichtungsdefinition: <Portrait />-, <UpsideDown />-, <LandscapeLeft />-, <LandscapeRight />-Tags:
Eigenschaft Definition

Enabled

Setzen Sie diese Eigenschaft auf True, wenn diese Ausrichtung verwendet werden soll.

Width / Height

Abmessungen (in Pixel) des Formulars. Repräsentiert den verfügbaren Bereich.

Top / Left

Repräsentiert die linke obere Ecke des verfügbaren Bereichs. Dies ist der Offset vom Ursprung des Bildschirms.

StatusbarHeight

Die Höhe der Statusleiste.

StatusBarPos

Die Position der Statusleiste, 0 bedeutet oben.

Artwork

Der voll qualifizierte Pfad zu der Datei. Wenn das Feld leer ist, wird standardmäßig ein schmaler schwarzer Rahmen angezeigt.

Siehe auch