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

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)


Avant de commencer ce tutoriel, il est recommandé de lire et suivre le tutoriel suivant :

Ce tutoriel couvre les tâches typiques suivantes pour l'utilisation des photos et le partage de texte dans vos applications mobiles.

Sur les périphériques iOS :

Prendre une photo avec la caméra du périphérique

Utiliser une photo de la bibliothèque de photos du périphérique

TakePhotoFromCameraAction.PNG

TakePhotoFromLibraryAction.PNG


Partage ou impression d'une photo

Partage de texte

ShowShareSheetAction.PNG

ShowShareSheetActioniOS7.PNG


Sur les périphériques Android

Prendre une photo avec la caméra du périphérique

Utiliser une photo de la bibliothèque de photos du périphérique

Android TakeCameraPicture.png

Android SelectfromLibrary.png


Partage ou impression d'une photo

Partage de texte

Android SendImage.png

ShowShareSheetActionAndroid.png


Cette fonctionnalité est fournie sous la forme d'actions et vous devez écrire une seule ligne de code pour chaque tâche.

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 :

  • Une action représente 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.
  • Une action peut répondre 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 supporter.

Construction de l'interface utilisateur pour l'application

L'interface utilisateur de cette application exemple est plutôt simple, comme illustré dans l'image suivante :

CameraAppUIElements.png

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 et actiontoolbuttonbordered.
  • Composant TImage
    • Définissez la propriété Align sur Client.
  • Composant TActionList

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

    CreateTakePhotoFromCameraAction.png

  4. Dans l'onglet Evénements, développez le nœud Action, puis double-cliquez sur l'événement OnDidFinishTaking.
    TakePhotoFromCameraAction1DidFinishTaking.png

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

Object Pascal :

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

Appmethod C++ :

 
 void __fastcall TForm2::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.

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 nœud Action puis double-cliquez sur l'événement OnDidFinishTaking.
  4. Ajoutez le code suivant au gestionnaire d'événement OnDidFinishTaking :

Object Pascal :

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

Appmethod C++ :

 
 void __fastcall TForm2::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.

Partage ou impression d'une photo

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

ShowShareSheetAction.PNG

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 nœud Action puis double-cliquez sur l'événement OnBeforeExecute.
  4. Ajoutez le code suivant au gestionnaire d'événement OnBeforeExecute :

Object Pascal :

 
 procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
 begin
   ShowShareSheetAction1.Bitmap.Assign(Image1.Bitmap);
 end;

Appmethod C++ :

 
 void __fastcall TForm2::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 :

IOSCamera.PNG

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

Voir l'exemple FMX.Mobile.PhotoEditorDemo (Object Pascal) pour illustrer une application utilisant la fonctionnalité Feuille de partage.

Partage de texte

Depuis votre application mobile, 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 mobile, vous pouvez partager du texte sur des site 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 Memo.

  1. Créez une application mobile FireMonkey.
  2. Placez les composants suivants sur le Concepteur de fiches :
    • Composant TToolBar
      • Dans 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.

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.
    TShowShareSheetOption.png
  3. Dans l'onglet Evénements, développez le nœud Action, puis double-cliquez sur l'événement OnBeforeExecute.
  4. Ajoutez le code suivant au gestionnaire d'événement OnBeforeExecute :

Object Pascal :

 
 procedure TDemonstration.ShowShareSheetAction1BeforeExecute(Sender: TObject);
 begin
     ShowShareSheetAction1.TextMessage:= Memo1.Lines.Text;
 end;

Appmethod C++ :

 
 void __fastcall TDemonstration::ShowShareSheetAction1BeforeExecute(TObject *Sender)
 {
 	ShowShareSheetAction1->TextMessage = Memo1->Lines->Text;
 }

ShowShareSheetActioncode.png

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

Voir aussi