Amarengo

Articles and news

Come Costruire un iOS Condividere Estensione in Swift

Originariamente pubblicato da Scotty Fister 30 luglio 2016 24,887 legge

Nota: Aggiornato per Swift 4.

Per una giornata di hack al lavoro ho deciso di provare a creare un’estensione di condivisione. Ho scoperto che non c’era un tutorial completo là fuori, e di conseguenza ho dovuto mettere insieme le informazioni (gran parte di esso attribuito, sorprendentemente, alla documentazione di Apple).

L’obiettivo

Per salvare un URL della pagina web come contenuto ricco nella nostra applicazione, e consentire la configurazione di alcune opzioni. Inizialmente pensavo che un’azione di estensione fosse ciò che era necessario, ma sembra che sia più adatto per modificare il contenuto (come rimuovere gli occhi rossi su una foto con un solo tocco). Sembra che altri, Apple inclusa, stiano utilizzando l’estensione share per creare invece elementi.

Questo è ciò che avremo costruito entro la fine:

L’estensione completata

Come puoi vedere, ho personalizzato un po ‘ il design e aggiunto quello che viene definito un “elemento di configurazione” che sono celle nella parte inferiore del foglio; comunemente usato per selezionare da account o altre opzioni. Viene utilizzato qui per selezionare dai “Mazzi” esistenti dell’utente su cui salvare. Quello che non puoi vedere è che sta anche eseguendo del codice JavaScript per recuperare l’URL corrente del browser, che inviamo al server in seguito. Copriremo tutto prima!

Passaggi iniziali

Crea un nuovo progetto o apri uno esistente a cui desideri aggiungere l’estensione. Quindi premi File > Nuovo > Target. Nella scheda iOS selezionare Condividi estensione e premere Avanti. Dagli un nome; ho optato per il semplice “ShareExtension”.

Ti chiederà se desideri attivare lo schema. Ciò significa che quando si esegue l’applicazione che vi permetterà di aprire direttamente in Safari o simili per testare l’estensione, al contrario della vostra applicazione principale. Vogliamo questo-toccare Attiva.

Prova quello che hai finora eseguendo il progetto Cmd + R-come detto ti dà le opzioni di quale app testare da, selezionare Safari e toccare Esegui.

La finestra di dialogo presentata quando si esegue un’estensione.

Quando Safari si apre, toccare l’icona condividi e il nome dell’estensione con l’icona segnaposto dovrebbe apparire nell’elenco. In caso contrario, tocca Altro e abilitalo. Toccando l’icona verrà presentata l’implementazione predefinita di SLComposeServiceViewController, che è abbastanza ordinata e pronta all’uso.

Ottenere l’URL

Il foglio di condivisione recupera automaticamente il titolo della pagina e lo imposta come testo del corpo, ma in genere si vorrà di più, sia che si tratti dell’URL o di un’immagine sulla pagina. Per questo puoi far eseguire a Safari un file JavaSript per analizzare il documento e recuperare tutto ciò di cui abbiamo bisogno.

Per prima cosa, fai clic con il pulsante destro del mouse sulla cartella estensioni in Xcode e seleziona Nuovo file. Troverai Vuoto all’interno dell’Altra scheda, premi Avanti e assegna un nome al file ” GetURL.js”.

Dovrai modificare le informazioni sulle estensioni.plist file e in “NSExtension” c’è un altro dizionario chiamato “NSExtensionAttributes” – aggiungi una chiave “NSExtensionJavaScriptPreprocessingFile” con il valore del nostro file appena creato, “GetURL” (nota la mancanza di estensione).

Aggiungi anche una riga del dizionario “NSExtensionActivationRule” che dovrebbe contenere la chiave “NSExtensionActivationSupportsWebURLWithMaxCount” con il numero 1:

Come le informazioni della tua estensione.plist dovrebbe apparire quando viene visualizzato come un elenco di proprietà

NSExtensionJavaScriptPreprocessingFile: questo consente alla nostra app di conoscere un file JavaScript che dovrebbe essere eseguito all’esecuzione dell’estensione.

NSExtensionActivationRule: utilizzare questo dizionario per aggiungere chiavi di estensione azione che aiutano il sistema a determinare quali tipi di contenuti attivare l’estensione per.

Incolla quanto segue in “GetURL.js”:

Accoppiato con le chiavi che abbiamo impostato sopra, iOS ora cercherà un oggetto chiamato “ExtensionPreprocessingJS” da eseguire in fase di runtime. Questo è spiegato in modo più dettagliato nella documentazione di Apple.

Per recuperare i dati raschiati con il file javascript sopra, è necessario eseguire questo blocco di codice all’interno di “ShareViewController.swift ” viewDidLoad funzione:

Avrete anche bisogno di questa importazione per kUTTypePropertyList:

import MobileCoreServices

L’esecuzione dell’estensione ora dovrebbe stampare correttamente l’URL sulla console!

Nota a margine: aggiungi il seguente frammento se desideri personalizzare la barra di navigazione come ho fatto io (sostituendo con la tua immagine o solo un titolo).

Aggiunta di Configurazione Cellule

boilerplate che è venuto con la creazione di una condivisione estensione hanno incluso un metodo per l’eventuale fornitura di elementi di configurazione (le cellule in fondo alla scheda condivisione)

override func configurationItems() -> ! {

Inserire il seguente frammento di codice, che restituisce un array di “SLComposeSheetConfigurationItem”:

Eseguire l’applicazione e vedrai una cella in fondo ora.

Un modello per l’elemento di configurazione

Crea un modello base chiamato “Deck.swift”, che viene utilizzato in anticipo per passare i dati tra i controller di visualizzazione.

Il TableView

Nella gif all’inizio, avrete notato quando si tocca la cella di configurazione spinge a una nuova vista con un tableview. Crea un nuovo file che eredita da “UIViewController” denominato ” ShareSelectViewController.Swift”. Creare una proprietà tableview e aggiungerla alla vista.

Ho anche impostato il titolo e il colore del titolo per questa vista e preferisco mantenere costanti come gli identificatori di celle in una struct 🙂

Crea una proprietà per memorizzare il Mazzo passato dal controller della vista originale:

var userDecks = ()

E conforme ai protocolli richiesti per tableview:

Di nuovo in ” ShareViewController.swift”, crea una proprietà per memorizzare alcuni dati fittizi e popolarli all’interno di viewDidLoad:

Infine, all’interno del tapHandler per l’elemento di configurazione che abbiamo creato, crea un’istanza di ShareSelectViewController e fallo premere alla spina, passando anche i deck:

Esegui l’app. Toccando la cella di configurazione dovrebbe passare a tableview con i dati fittizi.

Tuttavia noterai che la cella di configurazione è ancora codificata su “Titolo del mazzo”. Per avere questo aggiornamento, creare una proprietà per memorizzare il mazzo selezionato e selezionare il primo per impostazione predefinita:

E aggiornare la cella di configurazione all’interno configurationItems () per usarlo:

deck.value = selectedDeck?.title 

Esegui di nuovo l’app e vedrai che è stata aggiornata.

Un protocollo per aggiornare il deck selezionato

Avrai bisogno di un modo per respingere il ShareViewController quando viene toccato un nuovo deck e farlo aggiornare l’interfaccia utente. Un protocollo sarà sufficiente. Aggiungi quanto segue al tuo ShareSelectViewController:

Infine, conforma ShareViewController al protocollo appena creato e assicurati che il delegato per ShareSelectViewController sia impostato su self:

Il Deck selezionato viene aggiornato e gli elementi di configurazione vengono ricaricati per aggiornare il valore. Poi ci pop per tornare alla schermata principale.

Esegui l’app e ora dovresti essere in grado di cambiare i mazzi che si aggiorneranno per mostrare il mazzo correttamente selezionato 🙂

Finire

Tutto ciò che rimane è inviare le informazioni raccolte al server o all’app per fare qualcosa, cosa che puoi fare all’interno di un altro metodo boilerplate:

override func didSelectPost()

Non entrerò nei dettagli su questo, ma ho usato un NSURLSession per pubblicare sul nostro server. Ho anche sostituito i dati fittizi con mazzi reali creando un gruppo di app e utilizzando un NSUserDefaults condiviso per archiviare e recuperare i dati recuperati in precedenza all’interno dell’app iOS principale.

let userDefaults = NSUserDefaults(suiteName: "some.group.name")
let decks = userDefaults?.objectForKey("userDecks") as? NSArray

Infine, noterai che la mia estensione si chiama “Vurb” nella finestra di dialogo azione e ha un’icona. È possibile impostare un’icona seguendo questo post SO. E per cambiare il nome basta cambiare “Nome visualizzato” nelle impostazioni del progetto per l’estensione.

Questo è tutto, se hai trovato questo utile per favore aiuta gli altri a trovarlo raccomandando.

È possibile visualizzare il progetto nella sua interezza qui.

i Tag

Join Hacker Mezzogiorno

Crea il tuo conto gratuito per sbloccare la vostra esperienza di lettura personalizzata.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.