Prendre et partager des photos et du texte en utilisant les listes d'actions

Remonter à Tutoriel mobile : Prendre une photo et la partager, et partager du texte (iOS et Android)

Ce tutoriel explique comment gérer des photos et du texte sur vos périphériques mobiles en utilisant des actions FireMonkey.

Une action correspond à un ou plusieurs éléments de l'interface utilisateur, comme les commandes de menu, les boutons de barre d'outils et les contrôles.

Les actions ont deux fonctions :

• Elles représentent les propriétés communes aux éléments de l'interface utilisateur, par exemple si un contrôle est activé ou si une case à cocher est sélectionnée.
• Elles répondent quand un contrôle est déclenché, par exemple quand l'utilisateur clique sur un bouton ou choisit un élément de menu.

Dans ce tutoriel, vous apprendrez comment assigner des actions aux éléments de l'interface utilisateur (tels qu'un bouton) pour chaque fonctionnalité que vous voulez prendre en charge.

Construction de l'interface utilisateur pour l'application

Placez les composants suivants sur le Concepteur de fiches :

• Composant TToolBar
  • Sur la barre d'outils, placez trois composants TButton. Chaque bouton utilise différentes icônes.
  • Définissez la propriété StyleLookup pour les trois boutons, respectivement sur :
    • cameratoolbuttonbordered
    • searchtoolbuttonbordered
    • actiontoolbuttonbordered
• Composant TImage
  • Définissez la propriété Align sur Client.
• Composant TActionList

Avant que vous définissiez le style ou la vue dans le Concepteur de fiches, la fiche doit maintenant ressembler à l'écran suivant :

Remarque : Pour plus d'informations sur la sélection du style et des vues, voir Sélecteur de style et Utilisation des vues FireMonkey.

Prise d'une photo avec la caméra du périphérique mobile

Vous pouvez définir une action pour prendre une photo à l'aide de la caméra de votre périphérique mobile. Procédez comme suit :

1. Sur le Concepteur de fiches, sélectionnez le bouton (pour prendre une photo).
2. Dans l'inspecteur d'objets, sélectionnez la liste déroulante de la propriété Action.
3. Sélectionnez Nouvelle action standard | Bibliothèque multimédia | TTakePhotoFromCameraAction :
   
   

   
   
   

4. Sur l'onglet Evénements, développez le noeud Action puis double-cliquez sur l'événement OnDidFinishTaking.

   
   
   

5. Ajoutez le code suivant au gestionnaire d'événement OnDidFinishTaking :

Delphi :

procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;

C++ :

void __fastcall TForm1::TakePhotoFromCameraAction1DidFinishTaking(TBitmap *Image)
{
    Image1->Bitmap->Assign(Image);
}

Ce code assigne une photo prise à partir de la caméra du périphérique mobile à la propriété Bitmap du composant TImage.

Enregistrement d'une photo dans la bibliothèque de photos du périphérique

Pour que votre application enregistre automatiquement les photos prises par la caméra d'un périphérique dans la bibliothèque de photos de ce périphérique, définissez la propriété TCustomTakePhotoAction.NeedSaveToAlbum sur True.

Remarque : La valeur par défaut de la propriété NeedSaveToAlbum est False.

Pour enregistrer automatiquement les photos dans la bibliothèque de photos

1. Dans la vue Structure, développez le noeud ActionList1, puis sélectionnez TakePhotoFromCameraAction1.
2. Dans l'inspecteur d'objets, définissez la propriété NeedSaveToAlbum sur True.

Votre application enregistre les photos dans un album au sein de la bibliothèque de photos du périphérique. Le nom de l'album dépend du système d'exploitation du périphérique, comme indiqué ci-dessous :

Version du système d'exploitation	Nom de l'album
iOS	Pellicule
Android	Caméra

Remarque : Pour enregistrer une image plutôt qu'une photo dans la bibliothèque de photos, vous pouvez utiliser IFMXPhotoLibrary.AddImageToSavedPhotosAlbum.

Utilisation d'une photo de la bibliothèque de photos du périphérique mobile

Vous pouvez définir une action pour utiliser une photo de la bibliothèque de photos avec les étapes suivantes :

1. Sur le Concepteur de fiches, choisissez le bouton que vous voulez utiliser (pour choisir une photo).
2. Dans l'inspecteur d'objets, cliquez sur la liste déroulante de la propriété Action et sélectionnez Nouvelle action standard | Bibliothèque multimédia | TTakePhotoFromLibraryAction.
3. Dans l'onglet Evénements, développez le noeud Action puis double-cliquez sur l'événement OnDidFinishTaking.
4. Ajoutez le code suivant au gestionnaire d'événement OnDidFinishTaking :

Delphi :

procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;

C++ :

void __fastcall TForm1::TakePhotoFromLibraryAction1DidFinishTaking(TBitmap *Image)
{
   Image1->Bitmap->Assign(Image);
}

Le code ci-dessus assigne une photo prise dans la bibliothèque de photos à la propriété Bitmap du composant TImage.

Activation de la modification d'images

Vous pouvez activer la propriété Editable des actions TTakePhotoFromCameraAction et TTakePhotoFromLibraryAction pour autoriser le rognage de l'image après qu'elle a été prise ou chargée.

Pour activer la propriété Editable, procédez comme suit :

1. Sur le volet Structure, choisissez l'action :
   1. ActionList1 | TakePhotoFromCameraAction1
   2. ActionList1 | TakePhotoFromLibraryAction1
2. Dans l'inspecteur d'objets, définissez la propriété Editable sur True.

Une fois que vous avez activé la propriété Editable, vous pouvez rogner les photos sur iOS et Android.

Sur les périphériques iOS :

Chargement de la photo	Agrandissement de la photo	Rognage de la photo

Sur les périphériques Android :

Chargement de la photo	Menu Android pour l'action	Rognage de la photo

Partage ou impression d'une photo

A partir de votre application, vous pouvez partager une photo sur les sites des réseaux sociaux (tels que Facebook et Twitter), envoyer la photo sur une imprimante, l'utiliser comme pièce jointe à un e-mail, l'assigner aux contacts, et ainsi de suite.



Ce service de partage multiple est appelé Fonctionnalité Feuille de partage, et vous pouvez implémenter cette fonctionnalité en suivant les étapes ci-après :

1. Sur le Concepteur de fiches, sélectionnez le bouton (pour partager une photo).
2. Dans l'inspecteur d'objets, cliquez sur la liste déroulante de la propriété Action et sélectionnez Nouvelle action standard | Bibliothèque multimédia | TShowShareSheetAction.
3. Sur l'onglet Evénements, développez le noeud Action puis double-cliquez sur l'événement OnBeforeExecute.
4. Ajoutez le code suivant au gestionnaire d'événement OnBeforeExecute :

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);
}

Le code ci-dessus assigne une photo sur le composant TImage pour la "fonctionnalité feuille de partage".

Après la sélection de Facebook dans la liste des services, vous pouvez publier la photo sur Facebook avec votre commentaire :

Remarque : Dans cette sous-section, les écrans des périphériques iOS sont utilisés à titre d'exemple.

Voir l'exemple FMX.PhotoEditorDemo pour illustrer une application utilisant la fonctionnalité Feuille de partage.

Partage de texte

Depuis votre application, vous pouvez partager du texte en utilisant la feuille de partage du périphérique mobile. Les applications qui apparaissent dans la feuille de partage dépendent du périphérique :

• Sur un périphérique iOS, une liste des options de partage adaptées est affichée en fonction du contenu que votre app souhaite partager, mais il n'existe pas de dispositif de partage d'app complet.
• Sur un périphérique Android, les choix dépendent des options de partage et des apps installées.

Depuis votre application, vous pouvez partager du texte sur des sites de réseaux sociaux (comme Facebook et Twitter), vous pouvez l'envoyer par e-mail, SMS (Short Message Service), et d'autres méthodes disponibles.

Vous pouvez implémenter cette fonctionnalité avec le service de partage multiple appelé Fonctionnalité Feuille de partage. L'action standard TShowShareSheetAction permet de partager des images et du texte. TShowShareSheetAction affiche les options de partage disponibles en fonction du type de contenu que vous partagez. Les options affichées pour Texte sont différentes de celles affichées pour Bitmap.

Cet exemple montre une implémentation simple de cette fonctionnalité. Nous partageons le texte que l'utilisateur a saisi dans un Mémo.

1. Créez une nouvelle application multi-périphérique. Dans notre exemple, la fiche se nomme Demonstration.
2. Placez les composants suivants sur le Concepteur de fiches :
   • Composant TToolBar
     • Sur la barre d'outils, ajoutez un composant TButton.
     • Définissez la propriété StyleLookup pour le bouton de la manière suivante :
       • actiontoolbuttonbordered ou actiontoolbutton pour iOS
       • actiontoolbutton pour Android

   Remarque : La propriété actiontoolbuttonbordered inclut le bouton avec une bordure, tandis que actiontoolbutton affiche le bouton sans bordure.

   • Composant TMemo
   • Composant TActionList

Après avoir ajouté les composants à l'exemple d'application :

1. Sur le Concepteur de fiches, sélectionnez le bouton (pour le partage de texte).
2. Dans l'inspecteur d'objets, cliquez sur la liste déroulante de la propriété Action et sélectionnez Nouvelle action standard | Bibliothèque multimédia | TShowShareSheetAction.

   

3. Sur l'onglet Evénements, développez le noeud Action puis double-cliquez sur l'événement OnBeforeExecute.
4. Ajoutez le code suivant au gestionnaire d'événement OnBeforeExecute :

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;
}

Le code ci-dessus utilise la propriété TextMessage pour assigner le texte à partager, tel qu'il a été précédemment saisi dans un TMemo.

Voir aussi

• Prendre des photos en utilisant des interfaces FireMonkey
• Actions FireMonkey
• FMX.StdCtrls.TButton
• FMX.Objects.TImage
• FMX.MediaLibrary
• http://appleinsider.com/articles/12/02/16/share_sheets (EN)

Exemples

• Exemple FireMonkey Photo Editor
• Exemple FireMonkey Camera Component
• Exemple FireMonkey Camera Roll
• Exemple FireMonkey Share Sheet