iOS 8 Comment créer une extension d'action simple

Les extensions d'application ont été introduites au cours de la WWDC 14 afin d'étendre la fonctionnalité des applications iOS à d'autres parties du système et de permettre une meilleure communication entre les applications..

Pour en nommer quelques-uns, vous pouvez utiliser une extension Today pour créer un widget qui apparaîtra dans le Centre de notifications, une extension de partage qui permettra à l'utilisateur de partager son réseau social ou une extension Action qui permet à l'utilisateur d'agir sur le contenu actuel: visualisez-le différemment ou changez-le. Dans ce didacticiel, nous allons construire une extension Action à partir de zéro..

Même si le didacticiel ne nécessite aucune connaissance supplémentaire, je vous recommande de consulter quelques ressources si vous souhaitez en savoir plus sur les extensions après avoir lu ce didacticiel..

  • Sessions WWDC Création d'extensions pour iOS et OS X, parties 1 et 2
  • Guide de programmation des extensions d'application

1. Que allons-nous construire??

Nous allons construire une simple extension Action appelée "Lisez-le". L'extension acceptera du texte en tant qu'entrée et lira le texte à l'aide de l'API de synthèse vocale du cadre AVFoundation. Je pense que cela fonctionne bien pour le tutoriel, car nous n'introduisons aucune dépendance vis-à-vis de tiers ni d'autres difficultés.

Voici à quoi ressemblera l'extension quand elle sera finie. Vous pouvez télécharger le résultat de ce tutoriel sur GitHub.

2. Créer une extension d'action

Étape 1: Configuration du projet

Commencez par lancer Xcode 6.1 ou une version ultérieure, puis créez un nouveau projet. Sélectionner Nouveau> Projet… de Xcode Fichier menu et choisir Application à vue unique de la liste des modèles.

Cliquez sur Suivant et donnez à votre projet le nom de SampleActionExtensionApp. Entrez un Identifiant d'organisation Et mettre Dispositifs à iPhone. Le langage que nous allons utiliser pour ce tutoriel est Objective-C.

Étape 2: Ajouter une cible

Une fois que vous avez créé le projet, vous pouvez ajouter une cible pour l'extension Action. Sélectionner Nouveau> Cible… du Fichier menu. Dans le volet de gauche, sélectionnez Extension de l'application du iOS section, choisissez Extension d'action, et cliquez Suivant.

Met le Nom du produit à ReadItAction. Notez également les autres options, en particulier la type d'action. Je vais y arriver dans une minute. Cliquez sur terminer pour créer l'extension Action.

On vous demandera maintenant si vous souhaitez activer le ReadItAction schème. Cliquez sur Annuler, parce que nous allons installer l'extension Action en exécutant l'application qui la contient.

Types d'action

Il existe deux types d'extensions Action, une avec une interface utilisateur et une sans une. Vous vous demandez peut-être quel est l'avantage d'avoir une extension Action sans interface utilisateur, alors laissez-moi vous expliquer..

Les extensions d'action sans interface utilisateur agissent sur l'élément en cours de manière à le modifier. Par exemple, une extension Action peut supprimer les yeux rouges des photos et ne nécessite pas d'interface utilisateur. L'application contenant a ensuite la possibilité d'utiliser le contenu modifié, la photo améliorée dans ce cas.

Les extensions d'action avec une interface utilisateur peuvent être en plein écran ou présentées sous forme de feuille de formulaire. Le modèle d’extension Action cible utilise la présentation en plein écran, c’est ce que nous allons utiliser..

Étape 3: implémenter l'interface utilisateur

Maintenant que les bases ont été configurées, nous pouvons commencer à créer l'interface utilisateur. Nous allons commencer avec l'application contenant.

Clique le Tableau principal dans le SampleActionExtensionApp groupe dans le Navigateur de projetDans le volet de droite, sélectionnez le Inspecteur de fichier et décocher Utiliser des classes de taille. Notez que si vous créez une application réelle et que vous devez prendre en charge l'iPad, il serait probablement judicieux d'utiliser des classes de taille..

Ouvrez le Bibliothèque d'objets et faites glisser une vue de texte et une barre d'outils sur la vue. Définissez le cadre de la vue de texte sur x: 8, y: 20, largeur: 304, hauteur: 288 dans le Inspecteur de taille sur la droite. En ce qui concerne la barre d’outils, définissez son cadre sur x: 0, y: 308, largeur: 320, hauteur: 44 dans le Inspecteur de taille.

La barre d'outils contient un bouton de barre. Sélectionnez-le et, dans le Inspecteur d'attributs, mettre sa Style à Plaine et son Identifiant à action.

Pour terminer, supprimez le texte par défaut de la vue texte et remplacez-le par "Appuyez sur le bouton d'action pour appeler le contrôleur de vue d'activité. Sélectionnez ensuite l'action" Lisez-le "et ce texte sera lu par notre exemple d'extension Action."

L’interface utilisateur du contrôleur de vue devrait maintenant ressembler à ceci:

Bien sûr, nous aurions pu laisser l’application contenant vide. Après tout, nous construisons un exemple d'extension d'application pour que l'application n'ait rien à faire. Mais je voulais montrer à quel point il est facile d'appeler le contrôleur d'activité depuis l'intérieur de votre application et de fournir un point où d'autres extensions Action peuvent entrer..

Lorsque le bouton de la barre d’outils est exploité, un contrôleur de vue d’activité est présenté et nous pourrons appeler notre extension Action à partir de là. Une autre bonne raison est que si vous souhaitez publier votre extension sur l'App Store, elle doit faire partie d'une application réelle et, évidemment, l'application doit faire quelque chose pour que celle-ci soit approuvée..

Étape 4: Contrôleur de vue d'activité actuelle

Ensuite, nous devons ajouter du code à ViewController.m. Commencez par créer une sortie pour la vue texte dans l'extension de classe du contrôleur de vue, comme indiqué ci-dessous..

@interface ViewController () @property (nonatomic, faible) IBOutlet UITextView * textView; @fin

Créer une action nommée actionButtonPressed dans lequel nous initialisons et présentons un UIActivityViewController par exemple et le présenter à l'utilisateur.

- (IBAction) actionButtonPressed: (id) expéditeur UIActivityViewController * activityVC = [[UIActivityViewController alloc] initWithActivityItems: @ [self.textView.text] applicationActivities: nil]; [self presentViewController: activityVC animée: YES complétion: nil]; 

Retournez à Tableau principal et connectez la sortie d'affichage du texte à l'affichage du texte en appuyant sur Contrôle et en traînant du Contrôleur de vue objet dans le Voir la scène du contrôleur à la vue texte, en sélectionnant affichage du menu popover.

Pour connecter la méthode d'action, sélectionnez le bouton de barre dans la barre d'outils et ouvrez le Inspecteur de connexions. Glisser de sélecteur, sous Actions envoyées, au Contrôleur de vue objet, sélection actionButtonPressed: du menu popover.

Avec l'interface utilisateur de l'application prête et connectée, nous pouvons passer à la construction de l'extension Action..

Étape 5: implémenter l'interface utilisateur

dans le Navigateur de projet, étendre le ReadItAction groupe et cliquez sur MainInterface.storyboard. Vous remarquerez que le storyboard n'est pas vide et contient déjà quelques composants d'interface utilisateur. Nous en utiliserons certaines, mais nous n’avons pas besoin de la vue image. Sélectionnez la vue d'image et supprimez-la en appuyant sur Effacer.

Ouvrez le Bibliothèque d'objets et ajoutez une vue texte sous la barre de navigation. Changer son cadre en x: 8, y: 72, largeur: 304, hauteur: 300. Enfin, double-cliquez sur la vue du titre de la barre de navigation et définissez le titre sur "Lecteur de texte"..

Étape 6: Mettre en œuvre ActionViewController

Il est temps de mettre en œuvre l'extension Action. dans le Navigateur de projet, sélectionner ActionViewController.m et apportez les modifications suivantes.

Sous les instructions d'importation, ajoutez une instruction d'importation pour la structure AVFoundation afin que nous puissions utiliser l'API de synthèse vocale dans l'extension Action..

@import AVFoundation;

Dans l'extension de classe du ActionViewController classe, retirez le imageView sortie et ajouter un pour la vue de texte, nous avons ajouté plus tôt.

@interface ActionViewController () @property (nonatomic, strong) IBOutlet UITextView * textView; @fin

Nous devons également apporter quelques modifications à la viewDidLoad méthode du ActionViewController classe.

- (void) viewDidLoad [super viewDidLoad]; // Récupère l'élément [s] que nous traitons à partir du contexte de l'extension. // Dans notre extension Action, nous n'avons besoin que d'un élément d'entrée (texte), nous utilisons donc le premier élément du tableau. NSExtensionItem * item = self.extensionContext.inputItems [0]; NSItemProvider * itemProvider = item.attachments [0]; if ([itemProvider hasItemConformingToTypeIdentifier: (NSString *) kUTTypePlainText]) // C'est un texte brut! __weak UITextView * textView = self.textView; [itemProvider loadItemForTypeIdentifier: (NSString *) Options de kUTTypePlainText: nil completionHandler: ^ (NSString * item, erreur NSError * error) if (item) [[[NSOperationQueue mainQueue] addOperationWithBlock:: // Configurez le synthétiseur vocal et démarrez-le AVSpeechSynthesizer * synthétiseur = [[AVSpeechSynthesizer alloc] init]; AVSpeechUtterance * utterance = [AVSpeechUtterance speechUtteranceWithString: textView.text]; [énoncé setRate: 0.1]; [synthétiseur speakUtterance: énonciation]; ]; ]; 

La mise en œuvre est assez facile à comprendre. Dans viewDidLoad, nous obtenons le texte saisi, l'attribuons à la vue texte et créons un objet synthétiseur de parole qui le lira.

Étape 7: Configurer l'extension d'action

Même si nous nous rapprochons, il reste quelques problèmes à régler. Premièrement, nous devons connecter la vue texte du storyboard à la sortie créée il y a un instant..

Ouvrir MainInterface.storyboard et connectez la vue texte à la Image scène comme nous l'avons fait dans Tableau principal Il y'a une minute.

Nous devons également spécifier les types de données pris en charge par l'extension Action. Dans notre cas, ce n'est que du texte. Étendre le Fichiers de support groupe et sélectionnez Info.plist. Dans Info.plist, aller vers NSExtension> NSExtensionAttributes> NSExtensionActivationRule. Changer la NSExtensionActivationRulele type de Chaîne à dictionnaire.

Avec le dictionnaire développé, cliquez sur le bouton + bouton à côté. Cela va ajouter une clé enfant. Définissez son nom sur NSExtensionActivationSupportsText, son type à Booléen, et la valeur à OUI. Cela garantit que l'extension d'action n'est visible que lorsque les éléments d'entrée contiennent du texte..

Toujours dans le Info.plist, changer la Nom d'affichage du paquet à Lis le. Ca a l'air mieux. C’est ce que la partie liée de la Info.plist le fichier doit ressembler:


Étape 8

Pour finir, vous pouvez ajouter une icône pour l'extension Action. dans le Navigateur de projet, sélectionnez le projet et, sous objectifs, sélectionnez le ReadItAction cible. Du Général onglet dans le Icônes d'application et images de lancement section, appuyez sur Utiliser le catalogue d'actifs à côté de la App Icons Source. Dans l'invite, cliquez sur Émigrer. Accédez au catalogue d’actifs et faites glisser l’icône ci-dessous vers le Application iPhone iOS 7,8 60 pt 2x endroit.

Générez et exécutez l'application pour voir si tout fonctionne comme prévu. Il y a une chose cependant. Si l’icône du son n’est pas affichée sur l’extension Action, vous devez vous assurer que le Images.xcassets le fichier est copié dans la cible d'extension.

Pour ce faire, sélectionnez le projet dans Navigateur de projet et choisissez le ReadItAction cible de la liste des Les cibles. Ouvrez le Phases de construction onglet en haut et développez Copier les ressources du lot phase. Si la Images.xcassets le fichier ne figure pas dans la liste des ressources, cliquez ensuite sur le petit symbole plus pour l'ajouter à la liste.

3. Exécuter et tester

Exécutez l'application pour l'essayer. Vous trouverez ci-dessous deux captures d'écran montrant l'extension en action. Vous pouvez également essayer d'appeler ce contrôleur de vue d'activité à partir de l'application Notes et laisser notre extension lire certaines de vos notes. Essayez également d'ouvrir la feuille d'activité dans l'application Photos. Vous constaterez que notre extension n'est pas répertoriée. C'est exactement ce à quoi nous nous attendions en fonction des règles d'activation que nous avons définies..

Conclusion

Dans ce tutoriel, vous avez appris à créer une extension Action simple. Nous avons également abordé les bases de l’utilisation de l’API de synthèse vocale du cadre AVFoundation. Si vous souhaitez créer d'autres extensions, consultez d'autres tutoriels sur Tuts +, tels que le tutoriel de Cesar Tessarin sur la création d'une extension Today..

Si vous avez des commentaires ou des questions, vous pouvez laisser un commentaire dans les commentaires ci-dessous ou contactez-moi sur Twitter.