Amarengo

Articles and news

Cum să construiți o extensie de partajare iOS în Swift

publicat inițial de Scotty Fister pe 30 iulie 2016 24,887 citește

notă: actualizat pentru Swift 4.

pentru o zi hack la locul de muncă am decis să încerc mâna mea la crearea unei extensii parts. Am descoperit că nu exista un tutorial complet și, ca rezultat, a trebuit să pun împreună informații (o mare parte din acestea fiind atribuite, în mod surprinzător, documentației Apple).

obiectivul

pentru a salva un URL pagină web ca conținut bogat în aplicația noastră, și pentru a permite configurarea câteva opțiuni. Inițial am crezut că este nevoie de o acțiune de extensie — dar se pare că este mai potrivită pentru modificarea conținutului (cum ar fi eliminarea ochilor roșii pe o fotografie cu o singură atingere). Se pare că alții, inclusiv Apple, folosesc extensia share pentru a crea elemente în schimb.

asta vom construi până la sfârșit:

extensia finalizată

după cum puteți vedea, am personalizat puțin designul și am adăugat ceea ce se numește „element de configurare”, care sunt celule din partea de jos a foii; utilizate în mod obișnuit pentru a selecta din conturi sau alte opțiuni. Este folosit aici pentru a selecta din „punțile” existente ale utilizatorului pentru a le salva. Ceea ce nu puteți vedea este că rulează și un cod JavaScript pentru a prelua adresa URL curentă a browserului, pe care o trimitem serverului mai târziu. Vom acoperi toate acestea înainte!

pași inițiali

fie creați un proiect nou, fie deschideți unul existent la care doriți să adăugați extensia. Apoi a lovit fișier > nou > țintă. Sub fila iOS selectați Partajare extensie și apăsați Următorul. Dă-i un nume; am optat pentru simpla „ShareExtension”.

vă va întreba dacă doriți să activați schema. Aceasta înseamnă că atunci când rulați aplicația, vă va permite să vă deschideți direct în Safari sau similar pentru a testa extensia, spre deosebire de aplicația principală. Vrem acest lucru-atingeți Activare.

testați ceea ce aveți până acum rulând proiectul Cmd + R — așa cum am menționat, vă oferă opțiuni din ce aplicație să testați, selectați Safari și atingeți Run.

dialogul prezentat la rularea unei extensii.

când se deschide Safari, atingeți pictograma Partajare și numele extensiei cu pictograma substituent ar trebui să apară în listă. Dacă nu, atingeți Mai mult și activați-l. Atingerea pictogramei va prezenta implementarea implicită a SLComposeServiceViewController, care este destul de îngrijită chiar din cutie.

obținerea adresei URL

foaia de partajare preia automat titlul paginii și o Setează ca text de corp, dar, în general, veți dori mai mult decât atât — Fie că este vorba de adresa URL sau de o imagine din pagină. Pentru aceasta puteți avea Safari rula un fișier JavaSript pentru a analiza documentul și de a prelua tot ce avem nevoie.

mai întâi, faceți clic dreapta pe folderul extensii din Xcode și selectați Fișier Nou. Veți găsi gol în interiorul celeilalte File, apăsați Următorul și denumiți fișierul „GetURL.js”.

va trebui să editați informațiile despre extensii.fișier plist și în ” NSExtension „există un alt dicționar numit” NSExtensionAttributes „— adăugați o cheie” NSExtensionJavaScriptPreprocessingfile „cu valoarea fișierului nostru creat,” GetURL ” (rețineți lipsa extensiei).

adăugați și un rând de dicționar ” NSExtensionActivationRule „care ar trebui să conțină cheia” NSExtensionActivationSupportsWeburlwithmaxcount ” cu numărul 1:

Cum informațiile extensiei dvs.plist ar trebui să arate atunci când este privit ca o listă de proprietăți

NSExtensionJavaScriptPreprocessingfile: acest lucru permite aplicația noastră știu de un fișier JavaScript care ar trebui să fie rulat pe executarea extensiei.

NSExtensionActivationRule: utilizați acest dicționar pentru a adăuga chei de extensie de acțiune care ajută sistemul să determine ce tipuri de conținut să activeze extensia.

lipiți următoarele în „GetURL.js”:

cuplat cu tastele pe care le-am setat mai sus, iOS acum va căuta un obiect numit „ExtensionPreprocessingJS” pentru a efectua în timpul rulării. Acest lucru este explicat mai detaliat în documentația Apple.

pentru a prelua datele răzuite cu fișierul javascript de mai sus, va trebui să rulați acest bloc de cod în cadrul „ShareViewController.swift ” viewDidLoad funcție:

veți avea nevoie, de asemenea, acest import pentru kUTTypePropertyList:

import MobileCoreServices

rularea extensiei acum ar trebui să imprime cu succes URL-ul la consola!

notă laterală: adăugați următorul fragment dacă doriți să personalizați bara de navigare așa cum am (înlocuind cu propria imagine sau doar un titlu).

adăugarea celulelor de configurare

placa de cazan care a venit cu crearea extensiei dvs. de partajare va include o metodă pentru a furniza opțional elemente de configurare (celulele din partea de jos a foii de partajare)

override func configurationItems() -> ! {

introduceți fragmentul de mai jos, care returnează o serie de „SLComposeSheetConfigurationItem”:

rulați din nou aplicația și veți vedea o celulă în partea de jos acum.

un Model pentru elementul de configurare

creați un model de bază numit „Deck.swift”, care este folosit înainte pentru a transmite date între controlerele de vizualizare.

TableView

în gif la început, veți fi observat când atingeți celula de configurare pe care o împinge într-o nouă vizualizare cu un tableview. Creați un fișier nou care moștenește de la „UIViewController” numit „ShareSelectViewController.rapid”. Creați o proprietate tableview și adăugați-o la vizualizare.

de asemenea, am setat titlul și culoarea titlului pentru această vizualizare și prefer să păstrez constante precum identificatorii de celule într-o struct 🙂

creați o proprietate pentru a stoca Pachetul trecut din controlerul de vizualizare original:

var userDecks = ()

și sunt conforme cu protocoalele necesare pentru tableview:

înapoi în”ShareViewController.swift”, a crea o proprietate pentru a stoca unele date fictive și popula-l în viewDidLoad:

în cele din urmă, în interiorul tapHandler pentru elementul de configurare am creat, a crea o instanță a ShareSelectViewController și l-au împinge la robinet, care trece punțile în, precum și:

rulați aplicația. Atingerea celulei de configurare ar trebui să împingă la tableview cu datele fictive.

cu toate acestea, veți observa celula de configurare este încă hardcoded la „titlu punte”. Pentru a avea această actualizare, creați o proprietate pentru a stoca pachetul selectat și selectați prima în mod implicit:

și actualizați celula de configurare din configurationItems() pentru a o utiliza:

deck.value = selectedDeck?.title 

rulați din nou aplicația și veți vedea că s-a actualizat.

un Protocol pentru a actualiza punte selectat

veți avea nevoie de o modalitate de a respinge înapoi la ShareViewController atunci când un nou pachet este exploatat, și să-l actualizeze UI. Un protocol va fi suficient. Adăugați următoarele la ShareSelectViewController:

în cele din urmă, se conformează ShareViewController la Protocolul doar făcut și să asigure delegatul pentru ShareSelectViewController este setat la sine:

pachetul selectat este actualizat, iar elementele de configurare sunt reîncărcate pentru a actualiza valoarea. Apoi vom pop pentru a reveni la ecranul principal.

rulați aplicația și acum ar trebui să puteți schimba punțile care se vor actualiza pentru a afișa puntea selectată corect 🙂

finalizarea

tot ce a mai rămas este să trimiteți informațiile colectate către serverul sau aplicația dvs. pentru a face ceva, ceea ce puteți face în interiorul unei alte metode de șabloane:

override func didSelectPost()

Nu voi intra în detalii despre acest lucru, dar am folosit o sesiune NSURLSession pentru a posta pe serverul nostru. De asemenea, am înlocuit datele fictive cu punți reale prin crearea unui grup de aplicații și utilizarea unui NSUserDefaults partajat pentru a stoca și a prelua datele preluate anterior în aplicația principală iOS.

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

în cele din urmă, veți observa că extensia Mea se numește „Vurb” în dialogul de acțiune și are o pictogramă. Puteți seta o pictogramă urmând acest post. Și pentru a schimba numele pur și simplu schimbați „numele afișat” în setările proiectului pentru extensie.

asta e tot, dacă ați găsit acest ajutor vă rugăm să ajute Alte găsi prin recomandarea.

puteți vedea proiectul în întregime aici.

etichete

Alăturați-vă Hacker Noon

Creați-vă contul gratuit pentru a debloca experiența dvs. de citire personalizată.

Lasă un răspuns

Adresa ta de email nu va fi publicată.