Share
Le estensioni delle app sono state introdotte durante WWDC 14 come un modo per estendere la funzionalità delle app iOS ad altre parti del sistema e per consentire una migliore comunicazione tra le app.
Per citarne alcuni, puoi usare un'estensione di oggi per creare un widget che apparirà nel Centro di notifica, un'estensione di Condivisione che consentirà all'utente di condividere il proprio social network o un'estensione di Azione che consenta all'utente di agire sul contenuto corrente, sia visualizzalo in un modo diverso o cambialo. In questo tutorial pratico, costruiremo un'estensione Action da zero.
Anche se il tutorial non richiede alcuna conoscenza aggiuntiva, ti consiglio di dare un'occhiata ad alcune risorse se desideri saperne di più sulle estensioni dopo aver letto questo tutorial.
Stiamo per costruire una semplice estensione Action chiamata "Read it". L'estensione accetterà il testo come input e leggerà il testo utilizzando l'API di sintesi vocale del framework AVFoundation. Penso che questo funzioni bene per il tutorial, perché non stiamo introducendo dipendenze di terze parti o altre difficoltà.
Questo è l'aspetto che avrà l'estensione al termine. Puoi scaricare il risultato di questo tutorial da GitHub.
Inizia lanciando Xcode 6.1 o versioni successive e crea un nuovo progetto. Selezionare Nuovo> Progetto ... da Xcode's File menu e scegliere Applicazione vista singola dalla lista di modelli.
Clic Il prossimo e dai un nome al tuo progetto SampleActionExtensionApp. Inserire un Identificatore di organizzazione e impostare dispositivi a i phone. La lingua che useremo per questo tutorial è Objective-C.
Una volta creato il progetto, puoi aggiungere un obiettivo per l'estensione Azione. Selezionare Nuovo> Target ... dal File menu. Nel riquadro di sinistra, selezionare Estensione dell'applicazione dal iOS sezione, scegliete Estensione di azione, e fare clic Il prossimo.
Impostare il nome del prodotto a ReadItAction. Notare anche le altre opzioni, in particolare il Tipo di azione. Arriverò a quello in un minuto. Clic finire per creare l'estensione Action.
Ti verrà chiesto se vuoi attivare il ReadItAction schema. Clic Annulla, perché installeremo l'estensione Action eseguendo invece l'app contenente.
Esistono due tipi di estensioni Action, una con un'interfaccia utente e l'altra senza. Forse ti starai chiedendo quale sia il vantaggio di avere un'estensione di Action senza un'interfaccia utente, quindi lascia che ti spieghi.
Le estensioni di azione senza un'interfaccia utente agiscono sull'elemento corrente in un modo che lo modifica. Ad esempio, un'estensione di Action può rimuovere gli occhi rossi dalle foto e non ha bisogno di un'interfaccia utente per farlo. L'app contenente ha quindi la possibilità di utilizzare il contenuto modificato, la foto migliorata in questo caso.
Le estensioni di azione con un'interfaccia utente possono essere a schermo intero o presentate sotto forma di foglio di modulo. Il modello di estensione dell'estensione di azione utilizza la presentazione a schermo intero, quindi è quello che useremo.
Ora che abbiamo le nozioni di base, possiamo iniziare a creare l'interfaccia utente. Inizieremo con l'app contenente.
Clicca il Main.storyboard nel SampleActionExtensionApp gruppo nel Project Navigator. Nel riquadro destro, selezionare il File Inspector e deselezionare Utilizza le classi di dimensioni. Nota che se stavi creando un'app reale e avresti bisogno di supportare iPad, sarebbe probabilmente una buona idea usare le classi di dimensioni.
Apri il Libreria di oggetti e trascinare una vista di testo e una barra degli strumenti sulla vista. Imposta la cornice della vista testo su x: 8, y: 20, larghezza: 304, altezza: 288 nel Ispettore di taglia sulla destra. Per quanto riguarda la barra degli strumenti, imposta la sua cornice su x: 0, y: 308, larghezza: 320, altezza: 44 nel Ispettore di taglia.
La barra degli strumenti contiene un pulsante della barra. Selezionalo e, nel Ispettore degli attributi, impostare il suo Stile a pianura e la sua Identifier a Azione.
Come tocco finale, rimuovi il testo predefinito della visualizzazione del testo e sostituiscilo con "Tocca il pulsante di azione per richiamare il controller della visualizzazione attività. Quindi seleziona l'azione" Leggi "e questo testo verrà letto dalla nostra estensione di esempio."
L'interfaccia utente del controller di visualizzazione dovrebbe ora avere un aspetto simile a questo:
Ovviamente, avremmo potuto lasciare vuota l'app contenente. Dopo tutto, stiamo costruendo un'estensione app di esempio in modo che l'app non debba realmente fare nulla. Ma volevo mostrare quanto sia facile richiamare il controller di attività dall'interno dell'app e fornire un punto in cui altre estensioni di azione possono entrare.
Toccando il pulsante nella barra degli strumenti, viene presentato un controller di visualizzazione delle attività e potremo richiamare la nostra estensione di azione da lì. Un altro buon motivo è che se vuoi pubblicare la tua estensione su App Store, deve far parte di una vera app e ovviamente l'app deve fare qualcosa in modo che possa essere approvata.
Successivamente, dobbiamo aggiungere del codice a ViewController.m. Inizia creando un'uscita per la visualizzazione del testo nell'estensione di classe del controller di visualizzazione come mostrato di seguito.
@interface ViewController () @property (nonatomic, weak) IBOutlet UITextView * textView; @fine
Crea un'azione chiamata actionButtonPressed in cui inizializziamo e presentiamo un UIActivityViewController istanza e presentarla all'utente.
- (IBAction) actionButtonPressed: (id) sender UIActivityViewController * activityVC = [[UIActivityViewController alloc] initWithActivityItems: @ [self.textView.text] applicationActivities: nil]; [AutoViewViewController: activityVC animated: YES completion: nil];
Torna a Main.storyboard e collegare l'uscita vista testo alla vista testo premendo Controllo e trascinando dal Visualizza controller oggetto nel Visualizza scena controller alla vista del testo, selezionando textView dal menu popover.
Per collegare il metodo di azione, selezionare il pulsante della barra nella barra degli strumenti e aprire il Connections Inspector. Trascina da selettore, sotto Azioni inviate, al Visualizza controller oggetto, selezionando actionButtonPressed: dal menu popover.
Con l'interfaccia utente dell'app pronta e cablata, possiamo passare alla creazione dell'estensione Action.
Nel Project Navigator, espandere il ReadItAction gruppo e clicca su MainInterface.storyboard. Noterai che lo storyboard non è vuoto e contiene già alcuni componenti dell'interfaccia utente. Ne useremo alcuni, ma non abbiamo bisogno della visualizzazione dell'immagine. Seleziona la vista dell'immagine e rimuovila premendo Elimina.
Apri il Libreria di oggetti e aggiungi una vista di testo sotto la barra di navigazione. Cambia la sua cornice in x: 8, y: 72, larghezza: 304, altezza: 300. Infine, fai doppio clic sulla vista del titolo della barra di navigazione e imposta il titolo su "Lettore di testo".
Accentsconagua
ActionViewController È ora di implementare l'estensione Action. Nel Project Navigator, selezionare ActionViewController.m e apportare le seguenti modifiche.
Sotto le istruzioni di importazione aggiungere una dichiarazione di importazione per il framework AVFoundation in modo da poter sfruttare l'API di sintesi vocale nell'estensione Azione.
@import AVFoundation;
Nell'estensione di classe del ActionViewController classe, rimuovere il ImageView outlet e aggiungerne uno per la visualizzazione testuale che abbiamo aggiunto in precedenza.
@interface ActionViewController () @property (nonatomic, strong) IBOutlet UITextView * textView; @fine
Abbiamo anche bisogno di apportare alcune modifiche al viewDidLoad metodo del ActionViewController classe.
- (void) viewDidLoad [super viewDidLoad]; // Ottieni l'articolo [s] che stiamo gestendo dal contesto dell'estensione. // Nella nostra estensione Action, abbiamo solo bisogno di un elemento di input (testo), quindi usiamo il primo elemento dell'array. NSExtensionItem * item = self.extensionContext.inputItems [0]; NSItemProvider * itemProvider = item.attachments [0]; if ([itemProvider hasItemConformingToTypeIdentifier: (NSString *) kUTTypePlainText]) // È un testo normale! __basso UITextView * textView = self.textView; [itemProvider loadItemForTypeIdentifier: (NSString *) Opzioni kUTTypePlainText: nil completionHandler: ^ (NSString * item, NSError * error) if (item) [[NSOperationQueue mainQueue] addOperationWithBlock: ^ [textView setText: item]; // Imposta il sintetizzatore vocale e avvialo AVSpeechSynthesizer * synthesizer = [[AVSpeechSynthesizer alloc] init]; AVSpeechUtterance * utterance = [AVSpeechUtterance speechUtteranceWithString: textView.text]; [valore di registrazione: 0.1]; [sintetizzatore speakUtterance: enunciazione]; ]; ];
L'implementazione è abbastanza facile da capire. Nel viewDidLoad, otteniamo il testo di input, lo assegniamo alla vista del testo e creiamo un oggetto sintetizzatore vocale che lo leggerà.
Anche se ci stiamo avvicinando, ci sono alcune cose di cui dobbiamo ancora occuparci. Innanzitutto, dobbiamo collegare la visualizzazione del testo nello storyboard alla presa che abbiamo creato un momento fa.
Aperto MainInterface.storyboard e connetti la vista testuale al Immagine scena come abbiamo fatto in Main.storyboard Un minuto fa.
Dobbiamo anche specificare quali tipi di dati supporta l'estensione Action. Nel nostro caso, è solo testo. Espandi il File di supporto raggruppa e seleziona Info.plist. Nel Info.plist, navigare verso NSExtension> NSExtensionAttributes> NSExtensionActivationRule. Cambiare il NSExtensionActivationRuledi tipo da Stringa a Dizionario.
Con il dizionario espanso, fare clic su + pulsante accanto ad esso. Questo aggiungerà una chiave figlio. Imposta il suo nome su NSExtensionActivationSupportsText, il suo tipo a booleano, e il valore a SÌ. Ciò garantisce che l'estensione di azione sia visibile solo quando gli elementi di input contengono testo.
Ancora nel Info.plist, cambiare il Nome visualizzato del pacchetto a Leggilo. Sembra migliore Questo è ciò che la parte correlata del Info.plist il file dovrebbe apparire:
Come tocco finale, puoi aggiungere un'icona per l'estensione Azione. Nel Project Navigator, seleziona il progetto e, sotto i bersagli, seleziona il ReadItAction bersaglio. Dal Generale scheda in Icone di app e lanciare immagini sezione, toccare Utilizzare il catalogo delle risorse accanto al Fonte di icone di app. Nel prompt, fare clic Migrare. Passare al catalogo delle risorse e trascinare l'icona in basso a App per iPhone iOS 7,8 60pt 2x posto.
Crea ed esegui l'app per vedere se tutto funziona come previsto. C'è una cosa però. Se l'icona del suono non è mostrata nell'estensione di azione, è necessario assicurarsi che il principale Images.xcassets il file è stato copiato nella destinazione dell'estensione.
Per fare ciò, selezionare il progetto in Project Navigator e scegli il ReadItAction bersaglio dalla lista di obiettivi. Apri il Costruisci fasi scheda in alto ed espandilo Copia le risorse del pacchetto fase. Se la Images.xcassets il file non è nella lista delle risorse, quindi fai clic sul piccolo simbolo più per aggiungerlo alla lista.
Esegui l'app per provarla. Di seguito sono riportati due screenshot che mostrano l'estensione in azione. Puoi anche provare a richiamare questo controller di visualizzazione attività dall'app Notes e lasciare che la nostra estensione legga alcune delle tue note. Inoltre, prova ad aprire il foglio delle attività nell'app Foto, vedrai che la nostra estensione non è elencata, che è esattamente ciò che ci aspetteremmo in base alle regole di attivazione impostate.
In questo tutorial, hai imparato come creare una semplice estensione Action. Abbiamo anche spiegato le basi dell'utilizzo dell'API di sintesi vocale del framework AVFoundation. Se sei interessato a creare altre estensioni, consulta altri tutorial su Tuts +, come il tutorial di Cesar Tessarin sulla creazione di un'estensione di oggi.
Se hai commenti o domande, puoi lasciare un commento nei commenti qui sotto o contattarmi su Twitter.
