Mobile-Tutorial: Verwenden von MultiView-Komponenten zur Anzeige von alternativen Ansichten von Informationen (iOS und Android)

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)


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.

TMultiViewSample.png

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:

  1. Klicken Sie in der Strukturansicht mit der rechten Maustaste auf einen TMultiView-Knoten, und wählen Sie den Befehl Einblenden oder Ausblenden aus.
  2. 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:

TMultiView Drawer.gif

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.

TMultiView Popover.png

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.

Navigationsbereichsmodus

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

NavigationPane collapsed.png

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

NavigationPane enlarged.png

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 Master button.png 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:

  1. 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.
  2. Überschreiben Sie optional in MyPresentationClass die folgenden virtuellen Methoden, die in der Basisklasse definiert sind: Diese Methoden legen das Verhalten des Hauptbereichs fest.
  3. Wählen Sie im Formular-Designer die Komponente TMultiView aus, und setzen Sie dann im Objektinspektor deren Eigenschaft Mode auf Custom.
  4. 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

  1. 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
  2. Wählen Sie in der Tool-Palette die Komponente TMultiView aus, und ziehen Sie sie in den Formular-Designer.
  3. Platzieren Sie weitere Steuerelemente, wie Schaltflächen, Eingabefelder oder andere Steuerelemente, die Sie benötigen, auf dem MultiView-Container.
  4. 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.
  5. 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

  1. Wählen Sie in der Tool-Palette die Komponente TMultiView aus, und ziehen Sie sie in den Formular-Designer.
  2. 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.
  3. Ziehen Sie eine TLabel-Komponente in den TMultiView-Container, und setzen Sie dann im Objektinspektor deren Eigenschaft Text auf Camera type:.
  4. 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.

Entwerfen des Detailbereichs

  1. Wählen Sie in der Tool-Palette die Komponente TPanel aus, und ziehen Sie sie in den Formular-Designer.
  2. Setzen Sie im Objektinspektor die Eigenschaft TPanel.Align auf Client.
  3. Ziehen Sie die Komponente TCameraComponent in den TPanel-Container.
  4. Ziehen Sie die Komponente TImage in den TPanel-Container, und legen Sie die folgenden Eigenschaften fest:
    • Name = imgCameraView
    • Align = Client

TMultiView Design.png

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:

  1. 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;
    }
    
  2. 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;
    }
    
  3. 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;
    }
    
  4. 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;
    }
    

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

  1. 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();
    
  2. 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);
    }
    

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:

  1. Wählen Sie in der Projektverwaltung die Zielplattform aus (Android und iOS werden unterstützt).
  2. Drücken Sie Umschalt+Strg+F9, um die Anwendung ohne Debugger auszuführen.
  3. Wischen Sie vom linken Geräterand nach rechts, um den Hauptbereich zu öffnen.
  4. Klicken Sie im Hauptbereich auf Start Camera, um die Gerätekamera zu aktivieren.
  5. 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.

Camera Apps.png

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.

Siehe auch