Amarengo

Articles and news

Hur man bygger en iOS-Delningsförlängning i Swift

ursprungligen publicerad av Scotty Fister på Juli 30th 2016 24,887 läser

Obs: uppdaterad för Swift 4.

för en hack dag på jobbet bestämde jag mig för att prova min hand på att skapa en aktie förlängning. Jag upptäckte att det inte fanns en fullfjädrad handledning där ute, och som ett resultat var jag tvungen att sammanställa information (mycket av det tillskrivs överraskande Apple-dokumentationen).

målet

för att spara en webbadress som rikt innehåll i vår app och möjliggöra konfiguration av några alternativ. Ursprungligen trodde jag att en förlängningsåtgärd var vad som behövdes-men det verkar som är bättre lämpat för att ändra innehåll (som att ta bort röda ögon på ett foto med en kran). Det verkar som om andra, inklusive Apple, använder delningstillägget för att skapa objekt istället.

Detta är vad vi har byggt i slutet:

den färdiga förlängningen

som du kan se har jag anpassat designen lite och lagt till vad som kallas ett ”konfigurationsobjekt” som är celler längst ner på arket; vanligtvis används för att välja från konton eller andra alternativ. Det används här för att välja från användarens befintliga ”däck” för att spara till. Vad du inte kan se är att det också kör en del JavaScript-kod för att hämta den aktuella webbadressen till webbläsaren, som vi skickar till servern senare. Vi kommer att täcka allt detta framåt!

inledande steg

antingen skapa ett nytt projekt eller öppna ett befintligt som du vill lägga till tillägget till. Slå sedan fil > nytt > mål. Under fliken iOS väljer du dela Förlängning och trycker på Nästa. Ge det ett namn; jag valde den enkla”ShareExtension”.

det kommer att fråga om du vill aktivera systemet. Det betyder att när du kör programmet kan du öppna direkt i Safari eller liknande för att testa tillägget, i motsats till din huvudapp. Vi vill ha det här — Tryck på Aktivera.

testa vad du har hittills genom att köra projektet Cmd + R-som nämnts ger det dig alternativ för vilken app du ska testa från, Välj Safari och tryck på Kör.

dialogrutan presenteras när du kör ett tillägg.

när Safari öppnas trycker du på delningsikonen och ditt tilläggsnamn med platshållarikonen ska visas i listan. Om inte, tryck på mer och aktivera det. Att trycka på ikonen kommer att presentera SLComposeServiceViewController standardimplementering, vilket är ganska snyggt direkt ur lådan.

hämta webbadressen

delningsbladet hämtar automatiskt sidtiteln och ställer in den som brödtext, men i allmänhet vill du ha mer än det — oavsett om det är webbadressen eller en bild på sidan. För detta kan du låta Safari köra en Javasriptfil för att analysera dokumentet och hämta vad vi behöver.

högerklicka först på mappen extensions i Xcode och välj Ny fil. Du hittar tom inuti den andra fliken, tryck på Nästa och namnge filen ”GetURL.js”.

du måste redigera dina tillägg Info.plist-fil och i” NSExtension ”finns det en annan ordbok som heter” NSExtensionAttributes ”— Lägg till en nyckel” NSExtensionJavaScriptPreprocessingfile ”med värdet av vår fil som just skapats,” GetURL ” (notera bristen på förlängning).

lägg också till en ordbokrad ”nsextensionactivationrule” som ska innehålla nyckeln ”NSExtensionActivationSupportsWeburlwithmaxcount” med numret 1:

hur din förlängning Info.plist ska se ut när den ses som en fastighetslista

NSExtensionJavaScriptPreprocessingfile: detta låter vår app känna till en JavaScript-fil som ska köras vid körning av tillägget.

NSExtensionActivationRule: använd den här ordlistan för att lägga till Åtgärdsförlängningstangenter som hjälper systemet att bestämma vilka typer av innehåll som ska aktiveras för ditt tillägg.

klistra in följande i ”GetURL.js”:

tillsammans med tangenterna som vi ställer in ovan kommer iOS nu att leta efter ett objekt som heter ”ExtensionPreprocessingJS” för att utföra vid körning. Detta förklaras mer detaljerat i Apples dokumentation.

för att hämta data som skrapats med javascript-filen ovan måste du köra detta kodblock i ”ShareViewController.swift ” viewDidLoad funktion:

du behöver också denna import för kUTTypePropertyList:

import MobileCoreServices

att köra tillägget nu ska skriva ut webbadressen till konsolen!

sidoanteckning: Lägg till följande utdrag om du vill anpassa navigeringsfältet som jag har (ersätter med din egen bild eller bara en titel).

lägga till Konfigurationsceller

pannplattan som följde med att skapa din delningstillägg har inkluderat en metod för att eventuellt leverera konfigurationsobjekt (cellerna längst ner på delningsbladet)

override func configurationItems() -> ! {

sätt in nedanstående utdrag, som returnerar en array med ”SLComposeSheetConfigurationItem”:

Kör din app igen så ser du en cell längst ner nu.

en modell för Konfigurationsobjektet

skapa en grundmodell som heter ” Deck.swift”, som används framåt för att skicka data mellan vykontroller.

TableView

i gif i början har du märkt när du trycker på konfigurationscellen som den trycker på till en ny vy med en tableview. Skapa en ny fil som ärver från ”UIViewController” med namnet ”ShareSelectViewController.Snabb”. Skapa en tableview-egenskap och Lägg till den i vyn.

jag har också ställt in titel och titelfärg för den här vyn och föredrar att behålla konstanter som cellidentifierare i en struktur:)

skapa en egenskap för att lagra däckets passerade in från den ursprungliga visningskontrollen:

var userDecks = ()

och överensstämmer med de nödvändiga protokollen för tableview:

tillbaka i”ShareViewController.swift”, skapa en egenskap för att lagra vissa dummy-data och fylla i den i viewDidLoad:

slutligen, inuti tapHandler för konfigurationsobjektet vi skapade, skapa en instans av ShareSelectViewController och få den att trycka på kranen och passera däcken också:

Kör appen. Om du trycker på konfigurationscellen ska du trycka på tabellenvisa med dummy-data.

men du kommer att märka att konfigurationscellen fortfarande är hårdkodad till”Däcktitel”. För att få den här uppdateringen, skapa en egenskap för att lagra däcket valt och välj det första som standard:

och uppdatera konfigurationscellen inuti konfigurationitems () för att använda den:

deck.value = selectedDeck?.title 

Kör appen igen så ser du att den har uppdaterats.

ett protokoll för att uppdatera valt däck

du behöver ett sätt att avvisa tillbaka till ShareViewController när ett nytt däck tappas och få det att uppdatera användargränssnittet. Ett protokoll räcker. Lägg till följande i din ShareSelectViewController:

slutligen, anpassa ShareViewController till protokollet som just gjorts och se till att delegaten för ShareSelectViewController är inställd på self:

det valda däcket uppdateras och konfigurationsobjekten laddas om för att uppdatera värdet. Sedan popar vi för att gå tillbaka till huvudskärmen.

Kör appen och nu ska du kunna ändra däck som kommer att uppdatera för att visa rätt valda däck 🙂

avsluta

allt som finns kvar är att skicka den insamlade informationen till din server eller app för att göra något med, vilket du kan göra i en annan standardmetod:

override func didSelectPost()

jag kommer inte att gå in i detalj om detta, men jag använde en NSURLSession att posta till vår server. Jag ersatte också dummy-data med riktiga däck genom att skapa en appgrupp och använda en delad NSUserDefaults för att lagra och hämta data som tidigare hämtats i huvud iOS-appen.

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

slutligen märker du att mitt tillägg heter ”Vurb” i åtgärdsdialogrutan och har en ikon. Du kan ställa in en ikon genom att följa detta så inlägg. Och för att ändra namnet helt enkelt ändra ”visningsnamn” i projektinställningarna för tillägget.

det är allt, om du tyckte att det här var till hjälp, snälla hjälp andra att hitta det genom att rekommendera.

du kan se hela projektet här.

Tags

Join Hacker Noon

skapa ditt kostnadsfria konto för att låsa upp din anpassade läsupplevelse.

Lämna ett svar

Din e-postadress kommer inte publiceras.