Aufnehmen und Teilen von Bildern und Text mit Aktionslisten
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.
Inhaltsverzeichnis
- 1 Erstellen der Benutzeroberfläche für die Anwendung
- 2 Aufnehmen eines Fotos mit der Kamera des mobilen Geräts
- 3 Speichern eines Fotos in der Fotobibliothek des Geräts
- 4 Verwenden eines Fotos aus der Fotobibliothek des mobilen Geräts
- 5 Aktivieren der Bildbearbeitung
- 6 Teilen oder Drucken eines Fotos
- 7 Teilen von Text
- 8 Siehe auch
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:
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:
- Wählen Sie im Formular-Designer die Schaltfläche (zum Aufnehmen eines Fotos) aus.
- Öffnen Sie im Objektinspektor die Dropdown-Liste der Eigenschaft Action.
- Wählen Sie Neue Standardaktion | Medienbibliothek | TTakePhotoFromCameraAction aus:
- Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnDidFinishTaking.
- Fügen Sie der OnDidFinishTaking-Ereignisbehandlungsroutine den folgenden Code hinzu:
procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image);
end;
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:
- Erweitern Sie in der Strukturansicht den Knoten ActionList1, und wählen Sie dann TakePhotoFromCameraAction1 aus.
- Setzen Sie im Objektinspektor die Eigenschaft NeedSaveToAlbum auf
True
.
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:
- Wählen Sie im Formular-Designer die Schaltfläche aus, die für das Auswählen eines Fotos verwendet werden soll.
- Klicken Sie im Objektinspektor auf die Dropdown-Liste für die Eigenschaft Action, und wählen Sie Neue Standardaktion | Medienbibliothek | TTakePhotoFromLibraryAction.
- Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnDidFinishTaking.
- Fügen Sie der OnDidFinishTaking-Ereignisbehandlungsroutine den folgenden Code hinzu:
procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
Image1.Bitmap.Assign(Image);
end;
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:
- Zeigen Sie in der Strukturansicht die folgenden Aktionen an:
- ActionList1 | TakePhotoFromCameraAction1
- ActionList1 | TakePhotoFromLibraryAction1
- Setzen Sie im Objektinspektor die Eigenschaft Editable auf True.
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 |
Auf Android-Geräten:
Laden des Bilds |
Android-Menü für die Aktion |
Zuschneiden des Bilds |
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.
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:
- Wählen Sie im Formular-Designer die Schaltfläche zum Teilen eines Fotos aus.
- Klicken Sie im Objektinspektor auf die Dropdown-Liste für die Eigenschaft Action, und wählen Sie Neue Standardaktion | Medienbibliothek | TShowShareSheetAction aus.
- Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnBeforeExecute.
- Fügen Sie der OnBeforeExecute-Ereignisbehandlungsroutine den folgenden Code hinzu:
procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
ShowShareSheetAction1.Bitmap.Assign(Image1.Bitmap);
end;
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:
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.
- Erstellen Sie eine geräteübergreifende Anwendung. In diesem Beispiel erhält das Formular den Namen Demonstration.
- 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.
- TMemo-Komponente
- TActionList-Komponente
- TToolBar-Komponente
Gehen Sie nach dem Hinzufügen der Komponenten zu der Beispielanwendung wie folgt vor:
- Wählen Sie im Formular-Designer die Schaltfläche zum Teilen des Textes aus.
- Klicken Sie im Objektinspektor auf die Dropdown-Liste für die Eigenschaft Action, und wählen Sie Neue Standardaktion | Medienbibliothek | TShowShareSheetAction aus.
- Erweitern Sie auf der Registerkarte Ereignisse den Knoten Action, und doppelklicken Sie auf das Ereignis OnBeforeExecute.
- Fügen Sie der OnBeforeExecute-Ereignisbehandlungsroutine den folgenden Code hinzu:
procedure TDemonstration.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
ShowShareSheetAction1.TextMessage:= Memo1.Lines.Text;
end;
void __fastcall TDemonstration::ShowShareSheetAction1BeforeExecute(TObject *Sender)
{
ShowShareSheetAction1->TextMessage = Memo1->Lines->Text;
}
Im obigen Code wird mit der Eigenschaft TextMessage der zu teilende Text zugewiesen, so wie er zuvor in ein TMemo eingegeben wurde.
Siehe auch
- Aufnehmen von Bildern mit FireMonkey-Interfaces
- FireMonkey-Aktionen
- FMX.StdCtrls.TButton
- FMX.Objects.TImage
- FMX.MediaLibrary
- http://appleinsider.com/articles/12/02/16/share_sheets (EN)
Beispiele
- FireMonkey Photo Editor (Beispiel)
- FireMonkey Camera Component) (Beispiel)
- FireMonkey Camera Roll (Beispiel)
- FireMonkey Share Sheet (Beispiel)