Mobile-Tutorial: Verwenden von MultiView-Komponenten zur Anzeige von alternativen Ansichten von Informationen (iOS und Android)
Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)
Inhaltsverzeichnis
Allgemeine Informationen zur Komponente "TMultiView"
Die Komponente FMX.MultiView.TMultiView repräsentiert einen Container (Hauptbereich) für andere Steuerelemente und ermöglicht die einfache Präsentation alternativer Ansichten für Informationen. Mit der Komponente TMultiView implementieren Sie eine Haupt/Detail-Oberfläche, die Sie für jede unterstützte Zielplattform verwenden können.
- Im Hauptbereich kann eine Sammlung beliebiger visueller Steuerelemente, wie Eingabefelder, Beschriftungen, Listen usw., angezeigt werden.
- Im Detailbereich werden üblicherweise Informationen auf Basis der Eigenschaften der Steuerelemente im Hauptbereich angezeigt.
Der folgende Screenshot zeigt ein Beispiel einer Haupt/Detail-Oberfläche. Im Hauptbereich (der linke angedockte Bereich) geben Sie eine geografische Position ein und klicken dann auf Search, um im Detailbereich (der rechte Bereich) die entsprechende Google-Karte anzuzeigen.
Darstellungsmodi des Hauptbereichs
Die Klasse TMultiView definiert eine Reihe von Eigenschaften, mit denen Sie das Verhalten der Oberfläche steuern können. Die Eigenschaft TMultiView.Mode legt beispielsweise den Darstellungsmodus des Hauptbereichs, wie in der folgenden Tabelle beschrieben, fest:
TMultiView.Mode | Darstellung des Hauptbereichs |
---|---|
Drawer | Im Schubladenmodus kann der Hauptbereich entweder verborgen sein oder über den Detailbereich verschoben werden. |
Panel | Haupt- und Detailbereiche werden immer angezeigt, unabhängig von Typ und Ausrichtung des Geräts. Der Hauptbreich ist an der linken oder rechten Seite der MultiView-Komponente angedockt. |
PlatformBehaviour | Der Darstellungsmodus des Hauptbereichs wird von einer Anwendung automatisch ausgewählt. Siehe den Unterabschnitt Plattformabhängiger Verhaltensmodus. |
Popover | Popup-Menü. |
NavigationPane | Navigationsbereich. |
Custom | Der Benutzer kann die Darstellung des Hauptbereichs anpassen. Die benutzerdefinierte Darstellungsklasse sollte in der Eigenschaft CustomPresentationClass festgelegt werden. Siehe den Unterabschnitt Benutzerdefinierter Modus. |
Hinweis: Wenn Sie zur Entwurfszeit im Objektinspektor den Wert der Eigenschaft TMultiView.Mode ändern, wird möglicherweise der Hauptbereich nicht mehr angezeigt. Wählen Sie im Formular-Designer die Komponente TMultiView aus, und setzen Sie dann im Objektinspektor die Eigenschaft Visible auf
True
, um dieses Problem zu beheben.Hinweis: Zur Entwurfszeit können Sie TMultiView mit den folgenden beiden Möglichkeiten anzeigen/verbergen:
- Klicken Sie in der Strukturansicht mit der rechten Maustaste auf einen TMultiView-Knoten, und wählen Sie den Befehl Einblenden oder Ausblenden aus.
- Doppelklicken Sie in der Strukturansicht auf einen TMultiView-Knoten.
Schubladenmodus
Wenn Sie die Eigenschaft TMultiView.Mode auf Drawer
(mit TDrawerAppearance.Mode=OverlapDetailView
) setzen, ist der Hauptbereich anfänglich verborgen. Um den Hauptbereich anzuzeigen, wischt der Benutzer vom linken Bildschirmrand nach rechts, wie in dem folgenden animierten Bild dargestellt:
Popover-Modus
Sie können die Eigenschaft TMultiView.Mode auch auf Popover
setzen, damit der Hauptbereich als Popup-Menü neben der in der Eigenschaft TMultiView.MasterButton festgelegten "Master"-Schaltfläche angezeigt wird.
Wichtig: Im Popover-Modus müssen Sie die Eigenschaft TMultiView.MasterButton festlegen. Diese Eigenschaft verweist auf ein UI-Element, das den Hauptbereich ein- oder ausblendet. Im obigen Screenshot ist die "Master"-Schaltfläche die Schaltfläche Show/Hide.
Wenn Sie die Eigenschaft TMultiView.Mode auf NavigationPane
setzen, wird der Hauptbereich anfänglich als minimierter angedockter Bereich angezeigt. Sie können die Anfangsbreite dieses Bereichs mit der Eigenschaft CollapsedWidth (per Vorgabe CollapsedWidth=50) steuern.
Anfänglich minimierter Navigationsbereich
Tipp: Um Teile von untergeordneten Elementen abzuschneiden, die sich außerhalb des minimierten Navigationsbereichs befinden, setzen Sie die Eigenschaft TMultiview.ClipChildren auf
True
.
Um den Navigationsbereich zu erweitern, um alle untergeordneten Steuerelemente anzuzeigen, tippen Sie auf die in der Eigenschaft TMultiView.MasterButton angegebene Master-Schaltfläche.
Erweiterter Navigationsbereich
Wichtig: Im Navigationsbereichsmodus müssen Sie die Eigenschaft TMultiView.MasterButton festlegen. Diese Eigenschaft verweist auf ein UI-Element, das den Hauptbereich ein- oder ausblendet. Im obigen Screenshot ist die Master-Schaltfläche.
Plattformabhängiger Verhaltensmodus
Wenn die Eigenschaft TMultiView.Mode auf PlatformBehaviour
gesetzt ist, können Sie den Darstellungsmodus für den Hauptbereich automatisch von der Anwendung auswählen lassen. Für diese Einstellung hängt das Verhalten der Anwendung vom Typ und der Ausrichtung des Geräts, wie in der folgenden Tabelle beschrieben, ab:
Gerätetyp | Geräteausrichtung
|
Darstellung des Hauptbereichs |
---|---|---|
Telefon | Querformat, Hochformat | Schublade (Push/Überlappen) |
Tablet | Querformat | Angedockter Bereich |
Tablet | Hochformat | Schublade (Push/Überlappen) |
Benutzerdefinierter Modus
Im Modus "Custom" können Sie die Darstellung des Hauptbereichs entsprechend der jeweiligen Aufgabe anpassen. Führen Sie die folgenden grundlegenden Schritte aus, um die Darstellung des Hauptbereichs anzupassen:
-
Deklarieren Sie eine eigene Klasse, wie z. B.
MyPresentationClass
, die von TMultiViewPresentation oder von anderen Klassen, die in der Unit FMX.MultiView.Presentations deklariert sind, abgeleitet ist. -
Überschreiben Sie optional in
MyPresentationClass
die folgenden virtuellen Methoden, die in der Basisklasse definiert sind: Diese Methoden legen das Verhalten des Hauptbereichs fest. -
Wählen Sie im Formular-Designer die Komponente TMultiView aus, und setzen Sie dann im Objektinspektor deren Eigenschaft Mode auf
Custom
. -
Implementieren Sie die onFormCreate-Ereignisbehandlungsroutine wie folgt:
- Für Delphi:
procedure TForm1.FormCreate(Sender: TObject); begin MultiView1.CustomPresentationClass := MyPresentationClass; end;
- Für C++:
void __fastcall TForm1::FormCreate(TObject *Sender) { MultiView1->CustomPresentationClass = __classid(MyPresentationClass); }
In diesem Thema wird die Entwicklung einer einfachen Anwendung gezeigt, die die Verwendung der Komponente TMultiView demonstriert.
Entwerfen der Benutzeroberfläche
- Erstellen Sie eine neue geräteübergreifende Anwendung, indem Sie Folgendes auswählen:
- Für Delphi: Datei > Neu > Geräteübergreifende Anwendung - Delphi > Leere Anwendung
- Für C++: Datei > Neu > Geräteübergreifende Anwendung - C++Builder > Leere Anwendung
- Wählen Sie in der Tool-Palette die Komponente TMultiView aus, und ziehen Sie sie in den Formular-Designer.
- Platzieren Sie weitere Steuerelemente, wie Schaltflächen, Eingabefelder oder andere Steuerelemente, die Sie benötigen, auf dem MultiView-Container.
- Wählen Sie in der Tool-Palette eine Komponente aus, die Sie als Detailbereich verwenden möchten (wie z. B. TPanel), und ziehen Sie Steuerelemente auf diesen Bereich.
- Legen Sie im Objektinspektor die entsprechenden Eigenschaften der TMultiView-Komponente fest.
Zur Verdeutlichung dieses Vorgehens wird in den folgenden Abschnitten ein Beispiel gezeigt: eine Anwendung, die die Kamera des mobilen Geräts steuert.
Entwerfen des Hauptbereichs
- Wählen Sie in der Tool-Palette die Komponente TMultiView aus, und ziehen Sie sie in den Formular-Designer.
- Ziehen Sie zwei TButton-Komponenten in den TMultiView-Container, und legen Sie dann im Objektinspektor die folgenden Eigenschaften dieser Schaltflächen fest:
- Setzen Sie die Eigenschaft
Name
auf bStartCamera bzw. auf bStopCamera. - Setzen Sie die Eigenschaft
Text
auf Start Camera bzw. Stop Camera.
- Setzen Sie die Eigenschaft
- Ziehen Sie eine TLabel-Komponente in den TMultiView-Container, und setzen Sie dann im Objektinspektor deren Eigenschaft
Text
auf Camera type:. - Ziehen Sie zwei TButton-Komponenten in den TMultiView-Container, und legen Sie dann im Objektinspektor die folgenden Eigenschaften dieser Schaltflächen fest:
- Setzen Sie die Eigenschaft
Name
auf bFrontCamera bzw. auf bBackCamera. - Setzen Sie die Eigenschaft
Text
auf Front bzw. auf Back.
- Setzen Sie die Eigenschaft
Entwerfen des Detailbereichs
- Wählen Sie in der Tool-Palette die Komponente TPanel aus, und ziehen Sie sie in den Formular-Designer.
- Setzen Sie im Objektinspektor die Eigenschaft TPanel.Align auf
Client
. - Ziehen Sie die Komponente TCameraComponent in den TPanel-Container.
- Ziehen Sie die Komponente TImage in den TPanel-Container, und legen Sie die folgenden Eigenschaften fest:
- Name =
imgCameraView
- Align =
Client
- Name =
Tipp: Setzen Sie alle Elemente des Detailbereichs in einen einzelnen Container (in diesem Beispiel in eine TPanel-Komponente). Dieser Container muss in der Eigenschaft TMultiView.TargetControl angegeben werden.
Implementieren der Funktionen der Kamera-Schaltflächen
Zum Abschluss der Entwicklung der Anwendung müssen Sie Ereignisbehandlungsroutinen für die Schaltflächen der Anwendung und die private Methode GetImage
, die ein Bild von der Gerätekamera abruft, implementieren.
So implementieren Sie die OnClick-Ereignisbehandlungsroutinen:
-
Doppelklicken Sie im Formular-Designer auf die Schaltfläche Start Camera, und fügen Sie den folgenden Code ein:
- Für Delphi:
procedure TForm1.bStartCameraClick(Sender: TObject); begin CameraComponent1.Active := true; end;
- Für C++:
void __fastcall TForm1::bStartCameraClick(TObject *Sender) { CameraComponent1->Active = true; }
- Für Delphi:
-
Doppelklicken Sie auf die Schaltfläche Stop Camera, und fügen Sie den folgenden Code ein:
- Für Delphi:
procedure TForm1.bStopCameraClick(Sender: TObject); begin CameraComponent1.Active := false; end;
- Für C++:
void __fastcall TForm1::bStopCameraClick(TObject *Sender) { CameraComponent1->Active = false; }
- Für Delphi:
-
Doppelklicken Sie auf die Schaltfläche Front, und fügen Sie den folgenden Code ein:
- Für Delphi:
procedure TForm1.bFrontCameraClick(Sender: TObject); begin CameraComponent1.Active := False; CameraComponent1.Kind := FMX.Media.TCameraKind.FrontCamera; CameraComponent1.Active := True; end;
- Für C++:
void __fastcall TForm1::bFrontCameraClick(TObject *Sender) { // select Front Camera CameraComponent1->Active = false; CameraComponent1->Kind = TCameraKind::FrontCamera; CameraComponent1->Active = true; }
- Für Delphi:
-
Doppelklicken Sie auf die Schaltfläche Back, und fügen Sie den folgenden Code ein:
- Für Delphi:
procedure TForm1.bBackCameraClick(Sender: TObject); begin CameraComponent1.Active := False; CameraComponent1.Kind := FMX.Media.TCameraKind.BackCamera; CameraComponent1.Active := True; end;
- Für C++:
void __fastcall TForm1::bBackCameraClick(TObject *Sender) { // select Back Camera CameraComponent1->Active = false; CameraComponent1->Kind = TCameraKind::BackCamera; CameraComponent1->Active = true; }
- Für Delphi:
So implementieren Sie die OnSampleBufferReady-Ereignisbehandlungsroutine:
-
Doppelklicken Sie im Formular-Designer auf CameraComponent1, und fügen Sie den folgenden Code ein:
- Für Delphi:
procedure TForm1.CameraComponent1SampleBufferReady(Sender: TObject; const ATime: Int64); begin TThread.Synchronize(TThread.CurrentThread, GetImage); end;
- Für C++:
void __fastcall TForm1::CameraComponent1SampleBufferReady(TObject *Sender, const __int64 ATime) { GetImage(); }
- Für Delphi:
Für die Klasse TForm1 müssen Sie die private Methode GetImage implementieren. Die OnSampleBufferReady-Ereignisbehandlungsroutine ruft diese Methode auf, um das Bild von der Gerätekamera abzurufen.
Führen Sie Folgendes aus:
-
Deklarieren Sie im private-Abschnitt der Klasse TForm1 die Methode GetImage:
- Für Delphi:
private { Private declarations } procedure GetImage;
- Für C++:
- Fügen Sie in der Header-Datei (.h-Datei) den folgenden Code hinzu:
private: // User declarations void __fastcall GetImage();
- Für Delphi:
- Implementieren Sie die Methode GetImage wie folgt:
- Für Delphi:
procedure TForm1.GetImage; begin CameraComponent1.SampleBufferToBitmap(imgCameraView.Bitmap, True); end;
- Für C++:
void __fastcall TForm1::GetImage() { CameraComponent1->SampleBufferToBitmap(imgCameraView->Bitmap, true); }
- Für Delphi:
Festlegen der Eigenschaften der TMultiView-Komponente
Wählen Sie im Formular-Designer die Komponente TMultiView aus, und legen Sie dann im Objektinspektor die folgenden Eigenschaften fest:
- TargetControl =
Panel1
- Mode =
Drawer
- Visible =
True
- Erweitern Sie den Knoten DrawerOptions, und setzen Sie die Eigenschaft Mode auf
OverlapDetailView
. - Erweitern Sie den Knoten ShadowOptions, und setzen Sie die Eigenschaft Color auf
Beige
. (Diese Eigenschaft legt die Farbe des Schattens des Hauptbereichs fest. Sie können dafür jede verfügbare Farbe verwenden.)
Ausführen der Beispielanwendung
Gehen Sie folgendermaßen vor, um diese Anwendung auszuführen:
- Wählen Sie in der Projektverwaltung die Zielplattform aus (Android und iOS werden unterstützt).
- Drücken Sie
Umschalt+Strg+F9
, um die Anwendung ohne Debugger auszuführen. - Wischen Sie vom linken Geräterand nach rechts, um den Hauptbereich zu öffnen.
- Klicken Sie im Hauptbereich auf Start Camera, um die Gerätekamera zu aktivieren.
- Optional können Sie die Kamera auf der Vorder- oder der Rückseite (falls verfügbar) mithilfe der Schaltflächen Front bzw. Back auswählen.
Wischen Sie nach links, um den Hauptbereich zu schließen.
Produktbeispiele für mobile Anwendungen, die TMultiView verwenden
Öffnen Sie den Ordner "Mobile Samples" in C:\Users\Public\Documents\Embarcadero\Studio\20.0\Samples
.
- MultiView Demo (Beispiel)
- Location Demo (Beispiel)
- Music Player (Beispiel)
- REST Surf Spot Finder (Beispiel) (Delphi)
- REST Surf Spot Finder (Beispiel) (C++)