App-extensies zijn geïntroduceerd tijdens WWDC 14 als een manier om de functionaliteit van iOS-apps uit te breiden naar andere delen van het systeem en om betere communicatie tussen apps mogelijk te maken.
Om er een paar te noemen, kunt u een Vandaag-extensie gebruiken om een widget te maken die in het Berichtencentrum verschijnt, een Sharing-extensie waarmee de gebruiker kan delen met zijn sociale netwerk, of een Action-extensie waarmee de gebruiker kan reageren op de huidige inhoud bekijk het op een andere manier of verander het. In deze praktische zelfstudie bouwen we een Action-uitbreiding helemaal opnieuw.
Hoewel de zelfstudie geen aanvullende kennis vereist, raad ik u aan een paar bronnen te bekijken als u meer wilt weten over extensies na het lezen van deze zelfstudie.
We gaan een eenvoudige actie-extensie bouwen genaamd "Lees het". De extensie accepteert tekst als invoer en leest de tekst met behulp van de API voor spraaksynthese van het AVFoundation-framework. Ik denk dat dit goed werkt voor de tutorial, omdat we geen afhankelijkheid of andere problemen van derden introduceren.
Dit is hoe de extensie eruit zal zien als deze is voltooid. Je kunt het resultaat van deze tutorial downloaden van GitHub.
Begin met het starten van Xcode 6.1 of hoger en maak een nieuw project aan. kiezen Nieuw> Project ... van Xcode's het dossier menu en kies Toepassing enkele weergave uit de lijst met sjablonen.
Klik volgende en geef je project een naam SampleActionExtensionApp. Voer een in Organisatie-ID En instellen apparaten naar iPhone. De taal die we zullen gebruiken voor deze tutorial is Objective-C.
Nadat u het project hebt gemaakt, kunt u een doel voor de actie-extensie toevoegen. kiezen Nieuw> Doel ... van de het dossier menu. Selecteer in het linkerdeelvenster Application Extension van de iOS sectie, kies Actie-uitbreiding, en klik volgende.
Stel de productnaam naar ReadItAction. Let ook op de andere opties, met name de actie type. Ik zal daar zo meteen bij komen. Klik Af hebben om de actie-extensie te maken.
U wordt nu gevraagd of u de wilt activeren ReadItAction regeling. Klik annuleren, omdat we de actie-extensie installeren door de betreffende app uit te voeren.
Er zijn twee soorten actie-extensies, één met een gebruikersinterface en één met één. U vraagt zich misschien af wat het voordeel is van een Action-uitbreiding zonder gebruikersinterface, dus ik zal het u uitleggen.
Actie-extensies zonder een gebruikersinterface werken op het huidige item op een manier die het verandert. Een actie-extensie kan bijvoorbeeld rode ogen van foto's verwijderen en daarvoor heeft het geen gebruikersinterface nodig. De bevattende app heeft dan een kans om de gewijzigde inhoud te gebruiken, de verbeterde foto in dit geval.
Actie-uitbreidingen met een gebruikersinterface kunnen volledig scherm zijn of worden gepresenteerd als een formulierblad. Het actie-uitbreidingsdoel voor de sjabloon maakt gebruik van de presentatie op volledig scherm, dus dat is wat we gaan gebruiken.
Nu we de basis hebben ingesteld, kunnen we beginnen met het maken van de gebruikersinterface. We beginnen met de bevattende app.
Klik op de Main.storyboard in de SampleActionExtensionApp groep in de Project Navigator. Selecteer de. In het rechterdeelvenster Bestand Inspector en haal het vinkje weg Gebruik grootteklassen. Merk op dat als u een echte app aan het maken was en u de iPad zou moeten ondersteunen, het waarschijnlijk een goed idee zou zijn om grootteklassen te gebruiken.
Open de Objectbibliotheek en sleep een tekstweergave en een werkbalk naar de weergave. Stel het frame van de tekstweergave in x: 8, y: 20, width: 304, height: 288
in de Size Inspector aan de rechterkant. Wat de werkbalk betreft, stel het kader in op x: 0, y: 308, width: 320, height: 44
in de Size Inspector.
De werkbalk bevat één balknop. Selecteer het en, in de Kenmerken Inspector, stel zijn Stijl naar vlakte en zijn Identifier naar Actie.
Verwijder ten slotte de standaardtekst van de tekstweergave en vervang deze door "Tik op de actieknop om activiteitsweergavecontroller aan te roepen. Selecteer vervolgens de actie" Lees het "en deze tekst wordt gelezen door onze voorbeeldactiviteitsuitbreiding."
De gebruikersinterface van de view controller zou er nu ongeveer zo uit moeten zien:
Natuurlijk hadden we de bevattende app leeg kunnen laten. We bouwen tenslotte een voorbeeldappextensie zodat de app eigenlijk niets hoeft te doen. Maar ik wilde laten zien hoe eenvoudig het is om de activiteitscontroller aan te roepen vanuit uw app en een punt te bieden waar andere actie-extensies kunnen worden weergegeven.
Wanneer op de knop in de werkbalk wordt getikt, wordt een activiteitenoverzichtscontroller weergegeven en kunnen we onze Action-extensie van daar binnen aanroepen. Een andere goede reden is dat als je je extensie in de App Store wilt publiceren, deze onderdeel moet zijn van een echte app en dat de app duidelijk iets moet doen om te worden goedgekeurd.
Vervolgens moeten we wat code toevoegen ViewController.m. Begin met het maken van een uitlaat voor de tekstweergave in de klasse-uitbreiding van de view-controller, zoals hieronder wordt weergegeven.
@interface ViewController () @property (nonatomic, weak) IBOutlet UITextView * textView; @einde
Maak een actie met de naam actionButtonPressed
waarin we een initialiseren en presenteren UIActivityViewController
bijvoorbeeld en presenteer het aan de gebruiker.
- (IBAction) actionButtonPressed: (id) afzender UIActivityViewController * activityVC = [[UIActivityViewController alloc] initWithActivityItems: @ [self.textView.text] applicationActivities: nil]; [self presentViewController: activityVC geanimeerd: YES completion: nil];
Ga terug naar Main.storyboard en verbind de tekstuitgang met de tekstweergave door op te drukken Controle en slepen van de Bekijk Controller object in de Bekijk Controller Scene naar de tekstweergave, selecteren tekstweergave vanuit het popover-menu.
Om de actiemethode aan te sluiten, selecteert u de balknop in de werkbalk en opent u de Verbindingen Inspecteur. Sleep van keuzeschakelaar, onder Verzonden acties, naar de Bekijk Controller object, selecteren actionButtonPressed: vanuit het popover-menu.
Met de gebruikersinterface van de app klaar en aangesloten, kunnen we verder gaan met het bouwen van de actie-extensie.
In de Project Navigator, breid het uit ReadItAction groep en klik op MainInterface.storyboard. Je zult merken dat het storyboard niet leeg is en al een paar componenten van de gebruikersinterface bevat. We zullen er een paar gebruiken, maar we hebben de beeldweergave niet nodig. Selecteer de beeldweergave en verwijder deze door op te drukken Verwijder.
Open de Objectbibliotheek en voeg een tekstweergave toe onder de navigatiebalk. Verander zijn kader in x: 8, y: 72, width: 304, height: 300
. Dubbelklik ten slotte op de titelweergave van de navigatiebalk en stel de titel in op "Tekstlezer".
ActionViewController
Het is tijd om de actie-extensie te implementeren. In de Project Navigator, kiezen ActionViewController.m en breng de volgende wijzigingen aan.
Onder de importinstructies voegt u een importinstructie toe voor het AVFoundation-framework, zodat we de API voor spraaksynthese kunnen gebruiken in de actie-extensie.
@import AVFoundation;
In de klasse-extensie van de ActionViewController
klasse, verwijder de imageView
stopcontact en voeg er een toe voor de tekstweergave die we eerder hebben toegevoegd.
@interface ActionViewController () @property (nonatomic, strong) IBOutlet UITextView * textView; @einde
We moeten ook enkele wijzigingen aanbrengen in de viewDidLoad
methode van de ActionViewController
klasse.
- (void) viewDidLoad [super viewDidLoad]; // Haal het item [s] dat we verwerken af in de extensiecontext. // In onze Action-extensie hebben we slechts één invoeritem (tekst) nodig, dus gebruiken we het eerste item uit de array. NSExtensionItem * item = self.extensionContext.inputItems [0]; NSItemProvider * itemProvider = item.attachments [0]; if ([itemProvider hasItemConformingToTypeIdentifier: (NSString *) kUTTypePlainText]) // Het is een platte tekst! __weak UITextView * textView = self.textView; [itemProvider loadItemForTypeIdentifier: (NSString *) kUTTypePlainText options: nil completionHandler: ^ (NSString * item, NSError * error) if (item) [[NSOperationQueue mainQueue] addOperationWithBlock: ^ [textView setText: item]; // Spraaksynthesizer instellen en starten AVSpeechSynthesizer * synthesizer = [[AVSpeechSynthesizer alloc] init]; AVSpeechUtterance * utterance = [AVSpeechUtterance speechUtteranceWithString: textView.text]; [uiting setRate: 0,1]; [synthesizer speakUtterance: uitspreken]; ]; ];
De implementatie is vrij eenvoudig te begrijpen. In viewDidLoad
, we krijgen de invoertekst, wijzen deze toe aan de tekstweergave en maken een spraaksynthesizerobject dat het leest.
Ook al komen we in de buurt, er zijn een paar dingen waar we nog voor moeten zorgen. Eerst moeten we de tekstweergave in het storyboard verbinden met de uitgang die we zojuist hebben gemaakt.
Open MainInterface.storyboard en verbind de tekstweergave met de Beeld scène zoals we deden in Main.storyboard een minuut geleden.
We moeten ook opgeven welke gegevenstypen de Action-extensie ondersteunt. In ons geval is het alleen maar tekst. Vouw het Ondersteunende bestanden groeperen en selecteren Info.plist. In Info.plist, navigeren naar NSExtensie> NSExtensionAttributes> NSExtensionActivationRule. Verander de NSExtensionActivationRule's type van Draad naar Woordenboek.
Klik terwijl het woordenboek is uitgebreid op + knop ernaast. Hiermee wordt een onderliggende sleutel toegevoegd. Zet de naam op NSExtensionActivationSupportsText, zijn type aan Boolean, en de waarde voor JA. Dit zorgt ervoor dat de actie-extensie alleen zichtbaar is wanneer de invoeritems tekst bevatten.
Nog steeds in de Info.plist, verander de Bundel weergavenaam naar Lees het. Het ziet er beter uit. Dit is wat het gerelateerde deel van de Info.plist bestand moet er uitzien:
Als finishing touch kunt u een pictogram toevoegen voor de actie-extensie. In de Project Navigator, selecteer het project en selecteer onder doelen het ReadItAction doelwit. Van de Algemeen tab in de App-pictogrammen en start afbeeldingen sectie, tik op Gebruik Asset Catalog naast het App Icons Bron. Klik in de prompt op trekken. Navigeer naar de activacatalogus en sleep het onderstaande pictogram naar de iPhone-app iOS 7,8 60pt 2x plaats.
Bouw en voer de app uit om te zien of alles werkt zoals verwacht. Er is echter één ding. Als het geluidspictogram niet wordt weergegeven op de actie-extensie, moet u ervoor zorgen dat het hoofdpictogram Images.xcassets bestand wordt gekopieerd naar het extensiedoel.
Om dat te doen, selecteert u het project in Project Navigator en kies de ReadItAction doelwit uit de lijst van targets. Open de Bouw fases tab aan de bovenkant en uit te vouwen Kopieer bundelbronnen fase. Als het Images.xcassets bestand staat niet in de lijst met bronnen en klik vervolgens op het kleine plus-symbool om het aan de lijst toe te voegen.
Start de app om hem uit te proberen. Hieronder staan twee schermafbeeldingen die de extensie in actie weergeven. U kunt ook proberen deze activiteitsoverzicht-controller op te roepen via de Notes-app en onze extensie enkele van uw notities laten lezen. Probeer ook het activiteitenblad te openen in de Foto's-app. U ziet dat onze extensie niet wordt vermeld. Dit is precies wat we verwachten op basis van de activeringsregels die we instellen.
In deze zelfstudie leer je hoe je een eenvoudige actie-extensie kunt bouwen. We hebben ook de basis besproken van het gebruik van de API voor spraaksynthese van het AVFoundation-framework. Als u geïnteresseerd bent in het maken van andere extensies, bekijk dan enkele andere tutorials over Tuts +, zoals de tutorial van Cesar Tessarin over het maken van een Today-extensie.
Als u opmerkingen of vragen heeft, kunt u een reactie achterlaten in de comments hieronder of contact met mij opnemen op Twitter.