Amarengo

Articles and news

Hoe te Bouwen van een iOS-Aandeel Uitbreiding in Swift

Oorspronkelijk geplaatst door Scotty ‘ Fister op 30 juli 2016 24,887 leest

Opmerking: Bijgewerkte voor Swift 4.

voor een hack dag op het werk besloot ik mijn hand te proberen om een share extensie te maken. Ik ontdekte dat er niet een volledig uitgeruste tutorial die er zijn, en als gevolg daarvan moest ik stuk samen informatie (veel ervan toegeschreven, verrassend, aan de Apple documentatie).

het doel

om een URL van een webpagina op te slaan als rijke inhoud in onze app, en het mogelijk maken voor de configuratie van een paar opties. In eerste instantie dacht ik dat een extensie actie was wat nodig was — maar het lijkt erop dat is beter geschikt voor het wijzigen van de inhoud (zoals het verwijderen van rode ogen op een foto met één tik). Het lijkt erop dat anderen, inclusief Apple, de share-extensie gebruiken om items in plaats daarvan te maken.

Dit is wat we tegen het einde zullen hebben gebouwd:

de voltooide extensie

zoals u kunt zien heb ik het ontwerp een beetje aangepast, en toegevoegd wat wordt aangeduid als een “configuratie-item” die cellen aan de onderkant van het vel zijn; vaak gebruikt om te selecteren uit accounts of andere opties. Het wordt hier gebruikt om te selecteren uit de bestaande “Decks” van de gebruiker om op te slaan. Wat je niet kunt zien is dat het ook een aantal JavaScript-code uitvoert om de huidige URL van de browser op te halen, die we later naar de server sturen. We dekken dit allemaal vooruit!

initiële stappen

Maak een nieuw project aan of open een bestaand project waaraan u de extensie wilt toevoegen. Druk vervolgens op Bestand > Nieuw > doel. Selecteer Onder het tabblad ios extensie delen en druk op Volgende. Geef het een naam; Ik koos voor de eenvoudige “ShareExtension”.

het zal vragen of u het schema wilt activeren. Dit betekent dat wanneer u de applicatie uit te voeren zal u toelaten om direct te openen in Safari of iets dergelijks om de uitbreiding te testen, in tegenstelling tot uw belangrijkste app. We willen dit — Tik op Activeren.

Test wat u tot nu toe hebt door het project Cmd + R uit te voeren — zoals gezegd geeft het u opties van welke app om uit te testen, selecteer Safari en tik op Uitvoeren.

het dialoogvenster dat wordt weergegeven bij het uitvoeren van een extensie.

wanneer Safari wordt geopend, tikt u op het share-pictogram en de naam van uw extensie met het placeholder-pictogram moet in de lijst verschijnen. Zo niet, tik op Meer en schakel het in. Tikken op het pictogram zal de SLComposeServiceViewController standaard implementatie, die is vrij netjes recht uit de doos te presenteren.

het ophalen van de URL

het Share sheet haalt automatisch de paginatitel op en stelt deze in als de hoofdtekst, maar over het algemeen wilt u meer dan dat — of het nu de URL is of een afbeelding op de pagina. Hiervoor kunt u Safari een JavaSript-bestand laten uitvoeren om het document te ontleden en op te halen wat we nodig hebben.

klik eerst met de rechtermuisknop op de map Extensies in Xcode en selecteer Nieuw bestand. Je vindt lege binnenkant van de andere tab, druk op Volgende en noem het bestand “GetURL.js”.

u moet de informatie over uw extensies bewerken.plist file en in ” NSExtension “is er een ander woordenboek genaamd” NSExtensionAttributes “— voeg een sleutel” NSExtensionJavaScriptPreprocessingfile “met de waarde van ons bestand net gemaakt,” GetURL ” (let op het gebrek aan extensie).

voeg ook een woordenboekrij “NSExtensionActivationRule” toe die de sleutel “NSExtensionActivationSupportsWeburlwithmaxcount” moet bevatten met het getal 1:

hoe uw extensie Info.plist moet er uitzien als een eigenschappenlijst

NSExtensionJavaScriptPreprocessingfile: dit laat onze app weten van een JavaScript-bestand dat moet worden uitgevoerd bij het uitvoeren van de extensie.

NSExtensionActivationRule: gebruik dit woordenboek om Actieuitbreidingssleutels toe te voegen die het systeem helpen te bepalen voor welke soorten inhoud de extensie moet worden geactiveerd.

plak het volgende in ” GetURL.js”:

in combinatie met de sleutels die we hierboven hebben ingesteld, zal iOS nu zoeken naar een object met de naam “ExtensionPreprocessingJS” om tijdens runtime uit te voeren. Dit wordt in meer detail uitgelegd in de documentatie van Apple.

om de gegevens die met het bovenstaande javascript-bestand zijn geschraapt op te halen, moet u dit blok code uitvoeren in de “ShareViewController.swift ” viewDidLoad function:

deze import heb je ook nodig voor kUTTypePropertyList:

import MobileCoreServices

het uitvoeren van de extensie nu moet met succes afdrukken van de URL naar de console!

kant opmerking: voeg het volgende fragment toe als u de navigatiebalk wilt aanpassen zoals Ik heb (vervangen door uw eigen afbeelding of gewoon een titel).

Configuratiecellen toevoegen

de standaardtekst die bij het maken van uw share-extensie is meegeleverd, bevat een methode om optioneel configuratieitems aan te leveren (de cellen onderaan het share-blad))

override func configurationItems() -> ! {

voer het onderstaande fragment in, dat een array van “SLComposeSheetConfigurationItem” retourneert:

Voer uw app opnieuw uit en u zult nu een cel onderaan zien.

een Model voor het Configuratieitem

Maak een basismodel aan met de naam “Deck.swift”, die vooruit wordt gebruikt om gegevens door te geven tussen de weergave controllers.

de TableView

In de gif aan het begin, zult u gemerkt hebben wanneer u tikt op de configuratiecel die naar een nieuwe weergave met een tableview pusht. Maak een nieuw bestand dat erft van ” UIViewController “genaamd” ShareSelectViewController.snel”. Maak een Tableview-eigenschap en voeg deze toe aan de weergave.

ik heb ook de titel en titelkleur voor deze weergave ingesteld, en geef de voorkeur aan constanten zoals cel-ID ’s in een struct te houden:)

Maak een eigenschap aan om de Deck’ s op te slaan die zijn doorgegeven vanaf de oorspronkelijke weergavecontroller:

var userDecks = ()

en voldoen aan de vereiste protocollen voor de tableview:

terug in de”ShareViewController.swift”, create a property to store some dummy data and vulped it within viewdiload:

ten slotte, in de tapHandler voor de configuratie item dat we gemaakt hebben, maak een instantie van de ShareSelectViewController en laat het push on tap, het passeren van de decks in als goed:

start de app. Tikken op de configuratiecel zou naar de tableview moeten duwen met de dummy data.

maar u zult merken dat de configuratie cel is nog steeds hardcoded naar “Deck Titel”. Om deze update te hebben, maakt u een eigenschap aan om het geselecteerde deck op te slaan en selecteert u standaard het eerste:

en update de configuratiecel binnen configurationItems() om het te gebruiken:

deck.value = selectedDeck?.title 

Voer de app opnieuw en je zult zien dat het is bijgewerkt.

een Protocol om het geselecteerde Deck

bij te werken Je hebt een manier nodig om terug te keren naar de ShareViewController wanneer een nieuw Deck wordt getikt, en het de gebruikersinterface te laten bijwerken. Een protocol is voldoende. Voeg het volgende toe aan uw ShareSelectViewController:

ten slotte, conformeer de ShareViewController aan het zojuist gemaakte protocol en zorg ervoor dat de gedelegeerde voor de ShareSelectViewController is ingesteld op zelf:

het geselecteerde Deck wordt bijgewerkt en de configuratieitems worden opnieuw geladen om de waarde bij te werken. Dan pop om terug te gaan naar het hoofdscherm.

start de app en nu moet u in staat zijn om decks te veranderen die worden bijgewerkt om het correct geselecteerde deck te tonen 🙂

afronden

het enige wat overblijft is om de verzamelde informatie naar uw server of app te sturen om iets mee te doen, wat u kunt doen in een andere standaardmethode:

override func didSelectPost()

Ik zal hier niet in detail over ingaan, maar ik heb een NSURLSession gebruikt om op onze server te posten. Ik verving ook de dummy gegevens met echte decks door het creëren van een app-groep en het gebruik van een gedeelde NSUserDefaults op te slaan en gegevens eerder opgehaald binnen de belangrijkste iOS-app op te halen.

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

tot slot, zult u merken dat mijn extensie is vernoemd “Vurb” in de actie dialoogvenster, en heeft een pictogram. U kunt een pictogram instellen door het volgen van deze So post. En om de naam te veranderen gewoon wijzigen “weergavenaam” in de projectinstellingen voor de extensie.

dat is alles, als je dit nuttig vond help dan anderen om het te vinden door het aan te bevelen.

u kunt het project hier in zijn geheel bekijken.

Tags

Join Hacker ‘ s middags

Maak je gratis account aan om te ontgrendelen uw aangepaste leeservaring.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.