Aufnehmen und Teilen von Bildern und Text mit Aktionslisten

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu Mobile-Tutorial: Aufnehmen und Teilen von Bildern und Teilen von Texten (iOS und Android)


In diesem Tutorial wird beschrieben, wie Bilder und Text auf Ihren mobilen Geräten mit FireMonkey-Aktionen verwaltet werden.

Eine Aktion ist einem oder mehreren Elementen der Benutzeroberfläche zugeordnet, z. B. Menübefehlen, Schaltflächen und Symbolleisten.

Aktionen dienen zwei Zwecken:

  • Sie stellen allgemeine Eigenschaften für Benutzeroberflächenelemente dar, z. B. ob ein Steuerelement oder ein Kontrollkästchen aktiviert ist.
  • Sie können auf das Auslösen eines Steuerelements reagieren, beispielsweise wenn der Benutzer auf eine Schaltfläche klickt oder einen Menüeintrag auswählt.

In diesem Tutorial wird gezeigt, wie Sie Benutzeroberflächenelementen (z. B. einer Schaltfläche) Aktionen für jede Funktion, die Sie unterstützen möchten, zuweisen.

Erstellen der Benutzeroberfläche für die Anwendung

Ziehen Sie die folgenden Komponenten in den Formular-Designer:

  • TToolBar-Komponente
    • Ziehen Sie drei TButton-Komponenten auf die Symbolleiste. Jede Schaltfläche verwendet andere Symbole.
    • Setzen Sie die Eigenschaft StyleLookup der drei Schaltflächen entsprechend auf:
      • cameratoolbuttonbordered
      • searchtoolbuttonbordered
      • actiontoolbuttonbordered
  • TImage-Komponente
    • Setzen Sie die Eigenschaft Align auf Client.
  • TActionList-Komponente

Bevor Sie den Stil oder die Ansicht im Formular-Designer festlegen, sollte das Formular wie der folgende Screenshot aussehen:

CameraAppUIElements.png

Hinweis: Weitere Informationen zur Auswahl des Stils und der Ansichten finden Sie unter Stilauswahl und Verwenden von FireMonkey-Ansichten.

Aufnehmen eines Fotos mit der Kamera des mobilen Geräts

Sie können eine Aktion definieren, um ein Foto mit der Kamera Ihres mobilen Geräts aufzunehmen. Gehen Sie dazu folgendermaßen vor:

  1. Wählen Sie im Formular-Designer die Schaltfläche (zum Aufnehmen eines Fotos) aus.
  2. Öffnen Sie im Objektinspektor die Dropdown-Liste der Eigenschaft Action.
  3. Wählen Sie Neue Standardaktion | Medienbibliothek | TTakePhotoFromCameraAction aus:

    CreateTakePhotoFromCameraAction.png

  4. Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnDidFinishTaking.
    TakePhotoFromCameraAction1DidFinishTaking.png

  5. Fügen Sie der OnDidFinishTaking-Ereignisbehandlungsroutine den folgenden Code hinzu:
Delphi:
procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;
C++:
void __fastcall TForm1::TakePhotoFromCameraAction1DidFinishTaking(TBitmap *Image)
{
    Image1->Bitmap->Assign(Image);
}

Mit diesem Code wird ein mit der Kamera des mobilen Geräts aufgenommenes Foto der Eigenschaft Bitmap der TImage-Komponente zugewiesen.

Speichern eines Fotos in der Fotobibliothek des Geräts

Wenn Sie möchten, dass Ihre Anwendung die von einer Gerätekamera aufgenommenen Bilder automatisch in der Fotobibliothek des Geräts speichert, setzen Sie die Eigenschaft TCustomTakePhotoAction.NeedSaveToAlbum auf True.

Hinweis: Der Vorgabewert der Eigenschaft NeedSaveToAlbum ist False.

So speichern Sie Fotos automatisch in der Fotobibliothek:

  1. Erweitern Sie in der Strukturansicht den Knoten ActionList1, und wählen Sie dann TakePhotoFromCameraAction1 aus.
  2. Setzen Sie im Objektinspektor die Eigenschaft NeedSaveToAlbum auf True.

NeedToSavetoPhotoLibrary.png

Die Bilder werden von Ihrer Anwendung in ein Album in der Fotobibliothek des Geräts gespeichert. Der Name des Albums ist folgendermaßen vom Betriebssystem des Geräts abhängig:

BS-Version   Name des Albums  
iOS Aufnahmen
Android Kamera
Hinweis: Um ein Bild anstelle eines Fotos in der Fotobibliothek zu speichern, verwenden Sie IFMXPhotoLibrary.AddImageToSavedPhotosAlbum.

Verwenden eines Fotos aus der Fotobibliothek des mobilen Geräts

Gehen Sie folgendermaßen vor, um eine Aktion für die Verwendung eines Fotos aus der Fotobibliothek festzulegen:

  1. Wählen Sie im Formular-Designer die Schaltfläche aus, die für das Auswählen eines Fotos verwendet werden soll.
  2. Klicken Sie im Objektinspektor auf die Dropdown-Liste für die Eigenschaft Action, und wählen Sie Neue Standardaktion | Medienbibliothek | TTakePhotoFromLibraryAction.
  3. Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnDidFinishTaking.
  4. Fügen Sie der OnDidFinishTaking-Ereignisbehandlungsroutine den folgenden Code hinzu:
Delphi:
procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;
C++:
void __fastcall TForm1::TakePhotoFromLibraryAction1DidFinishTaking(TBitmap *Image)
{
   Image1->Bitmap->Assign(Image);
}

Mit diesem Code wird ein aus der Fotobibliothek übernommenes Foto der Eigenschaft Bitmap der TImage-Komponente zugewiesen.

Aktivieren der Bildbearbeitung

Sie können die Eigenschaft Editable der Aktionen TTakePhotoFromCameraAction und TTakePhotoFromLibraryAction aktivieren, um das Zuschneiden des Bilds nach der Aufnahme oder dem Laden zu ermöglichen.

Mit den folgenden Schritten aktivieren Sie die Eigenschaft Editable:

  1. Zeigen Sie in der Strukturansicht die folgenden Aktionen an:
    1. ActionList1 | TakePhotoFromCameraAction1
    2. ActionList1 | TakePhotoFromLibraryAction1
  2. Setzen Sie im Objektinspektor die Eigenschaft Editable auf True.

EditablePropertyTActionList.png


Wenn die Eigenschaft Editable aktiviert ist, können Sie die Fotos unter iOS und Android zuschneiden.

Auf iOS-Geräten:

Laden des Bilds

Zoomen des Bilds

Zuschneiden des Bilds

LoadingPictureiOS.PNG

ResizePictureiOS.PNG

CropPictureiOS.PNG

Auf Android-Geräten:

Laden des Bilds

Android-Menü für die Aktion

Zuschneiden des Bilds

LoadingPictureAndroid.png

ResizePictureAndroid.png

CropPictureAndroid.png

Teilen oder Drucken eines Fotos

Von der Anwendung aus können Sie Fotos auf sozialen Netzwerksites (wie Facebook und Twitter) teilen, Fotos an einen Drucker senden, Fotos als Anlage für E-Mails verwenden, Fotos Kontakten zuordnen usw.

ShowShareSheetAction.PNG

Dieser Dienst für das mehrfache Teilen wird als "Teilfelder"-Funktionalität bezeichnet, und Sie können diese Funktionalität mit den folgenden Schritten implementieren:

  1. Wählen Sie im Formular-Designer die Schaltfläche zum Teilen eines Fotos aus.
  2. Klicken Sie im Objektinspektor auf die Dropdown-Liste für die Eigenschaft Action, und wählen Sie Neue Standardaktion | Medienbibliothek | TShowShareSheetAction aus.
  3. Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnBeforeExecute.
  4. Fügen Sie der OnBeforeExecute-Ereignisbehandlungsroutine den folgenden Code hinzu:
Delphi:
procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
  ShowShareSheetAction1.Bitmap.Assign(Image1.Bitmap);
end;
C++:
void __fastcall TForm1::ShowShareSheetAction1BeforeExecute(TObject *Sender)
{
    ShowShareSheetAction1->Bitmap->Assign(Image1->Bitmap);
}

Mit dem obigen Code wird ein Foto auf der TImage-Komponente der "Teilfelder-Funktionalität" zugewiesen.

Nach Auswahl von Facebook aus der Liste der Dienste können Sie das Foto auf Facebook mit Ihrem Kommentar posten:

IOSCamera.PNG

Hinweis: In diesem Unterabschnitt werden Screenshots von iOS-Geräten als Beispiele verwendet.

Eine Beispielanwendung, die die "Teilfelder"-Funktionalität verwendet, finden Sie unter FMX.PhotoEditorDemo (Beispiel).

Teilen von Text

Sie können Text aus Ihrer Anwendung mithilfe des Teilfelds des mobilen Geräts teilen. Welche Anwendungen im Teilfeld angezeigt werden, hängt von dem Gerät ab:

  • Auf iOS-Geräten wird abhängig von dem Inhalt, der aus Ihrer App geteilt werden soll, eine Liste mit passenden Freigabeoptionen angezeigt, es gibt aber keinen vollständigen Mechanismus zum Teilen von Apps.
  • Auf Android-Geräten hängen die Auswahlmöglichkeiten von den Freigabeoptionen und den installierten Apps ab.

Aus der Anwendung können Sie Text auf sozialen Netzwerksites (wie Facebook und Twitter) teilen, Text per E-Mail, SMS (Short Message Service) und anderen verfügbaren Methoden senden.

Sie können diese Funktionalität mit dem Dienst für das mehrfache Teilen, der sogenannten Teilfelder-Funktionalität, implementieren. TShowShareSheetAction ist die Standardaktion zum Teilen von Bildern und Text. TShowShareSheetAction zeigt die verfügbaren Freigabeoptionen je nach Typ des Inhalts, den Sie teilen, an. Das heißt, dass für Text und Bitmaps unterschiedliche Optionen angezeigt werden.

Bei dem gezeigten Beispiel handelt es sich um eine einfache Implementierung dieser Funktionalität. Hier wird der Text, den ein Benutzer in ein Memo-Feld eingegeben hat, geteilt.

  1. Erstellen Sie eine geräteübergreifende Anwendung. In diesem Beispiel erhält das Formular den Namen Demonstration.
  2. Ziehen Sie die folgenden Komponenten in den Formular-Designer:
    • TToolBar-Komponente
      • Fügen Sie der Symbolleiste eine TButton-Komponente hinzu.
      • Legen Sie die Ereignisbehandlungsroutine StyleLookup für die Schaltfläche wie folgt fest:
        • actiontoolbuttonbordered oder actiontoolbutton für iOS
        • actiontoolbutton für Android
    Hinweis: Die Eigenschaft actiontoolbuttonbordered zeigt die Schaltfläche mit einem Rand und actiontoolbutton ohne Rand an.

Gehen Sie nach dem Hinzufügen der Komponenten zu der Beispielanwendung wie folgt vor:

  1. Wählen Sie im Formular-Designer die Schaltfläche zum Teilen des Textes aus.
  2. Klicken Sie im Objektinspektor auf die Dropdown-Liste für die Eigenschaft Action, und wählen Sie Neue Standardaktion | Medienbibliothek | TShowShareSheetAction aus.
    TShowShareSheetOption.png
  3. Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnBeforeExecute.
  4. Fügen Sie der OnBeforeExecute-Ereignisbehandlungsroutine den folgenden Code hinzu:
Delphi:
procedure TDemonstration.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
    ShowShareSheetAction1.TextMessage:= Memo1.Lines.Text;
end;
C++:
void __fastcall TDemonstration::ShowShareSheetAction1BeforeExecute(TObject *Sender)
{
        ShowShareSheetAction1->TextMessage = Memo1->Lines->Text;
}

ShowShareSheetActioncode.png

Im obigen Code wird mit der Eigenschaft TextMessage der zu teilende Text zugewiesen, so wie er zuvor in ein TMemo eingegeben wurde.

Siehe auch

Beispiele