Amarengo

Articles and news

Sådan opbygges en iOS Share-udvidelse i hurtig

oprindeligt udgivet af Scotty Fister den 30. Juli 2016 24.887 læser

Bemærk: opdateret til hurtig 4.

for en hack dag på arbejde besluttede jeg at prøve min hånd på at skabe en aktie udvidelse. Jeg opdagede, at der ikke var en fuldt udstyret tutorial derude, og som et resultat måtte jeg samle information (meget af det tilskrives overraskende Apple-dokumentationen).

målet

at gemme en hjemmeside URL som rigt indhold i vores app, og give mulighed for konfiguration af et par muligheder. Oprindeligt troede jeg, at en udvidelseshandling var det, der var nødvendigt — men det ser ud til, at det er bedre egnet til at ændre indhold (såsom at fjerne røde øjne på et foto med et tryk). Det ser ud til, at andre, inklusive Apple, bruger share-udvidelsen til at oprette varer i stedet.

dette er, hvad vi vil have bygget ved udgangen:

den færdige udvidelse

som du kan se, har jeg tilpasset designet lidt og tilføjet det, der kaldes et “konfigurationselement”, som er celler i bunden af arket; almindeligt brugt til at vælge fra konti eller andre muligheder. Det bruges her til at vælge fra brugerens eksisterende “dæk” for at gemme til. Det, du ikke kan se, er, at det også kører en JavaScript-kode for at hente den aktuelle URL til bro.sereren, som vi sender til serveren senere. Vi dækker alt dette forude!

indledende trin

Opret enten et nyt projekt, eller Åbn et eksisterende, du vil tilføje udvidelsen til. Tryk derefter på Fil > nyt > mål. Under fanen iOS skal du vælge Del udvidelse og trykke på Næste. Giv det et navn; jeg valgte den enkle”Shareekstension”.

det vil spørge, om du vil aktivere ordningen. Dette betyder, at når du kører applikationen, giver det dig mulighed for at åbne direkte i Safari eller lignende for at teste udvidelsen i modsætning til din hovedapp. Vi vil have dette — tryk på Aktiver.

Test hvad du har hidtil ved at køre projektet Cmd + R — som nævnt giver det dig muligheder for hvilken app at teste fra, Vælg Safari og tryk på Kør.

dialogen præsenteres, når du kører en udvidelse.

når Safari åbnes, skal du trykke på delingsikonet, og dit udvidelsesnavn med pladsholderikonet skal vises på listen. Hvis ikke, skal du trykke på mere og aktivere det. Hvis du trykker på ikonet, vises Slcomposeservicecontrollerens standardimplementering, som er ret pæn lige ud af kassen.

Hent URL ‘en

delingsarket henter automatisk sidetitlen og indstiller den som brødtekst, men generelt vil du have mere end det — hvad enten det er URL’ en eller et billede på siden. Til dette kan du få Safari til at køre en JavaSript-fil for at analysere dokumentet og hente det, vi har brug for.

højreklik først på din udvidelsesmappe i kode og vælg Ny fil. Du finder Tom inde i den anden fane, tryk på Næste og navngiv filen “GetURL.js”.

du skal redigere dine udvidelser Info.plist-fil og i ” Nsekstension “er der en anden ordbog kaldet” Nsekstensionattributes “— Tilføj en nøgle” Nsekstensionjavascriptprebehandlingfile “med værdien af vores fil, der netop er oprettet,” GetURL ” (Bemærk manglen på udvidelse).

tilføj også en ordbogsrække “Nsekstensionaktiveringregel”, som skal indeholde nøglen “Nsekstensionaktiveringsupportvinkelmedmaksimum” med nummeret 1:

hvordan din udvidelse er Info.plist skal se, når den ses som en ejendomsliste

Nsekstensionjavascriptprebrocessingfile: dette lader vores app vide om en JavaScript-fil, der skal køres ved udførelse af udvidelsen.

Nsekstensionaktiveringsregel: brug denne ordbog til at tilføje Handlingsudvidelsestaster, der hjælper systemet med at bestemme, hvilke typer indhold der skal aktiveres din udvidelse til.

indsæt følgende i “GetURL.js”:

sammen med de taster, vi har angivet ovenfor, vil iOS nu se efter et objekt med navnet” Udvidelsespreprocessingjs”, der skal udføres ved kørsel. Dette forklares mere detaljeret i Apples dokumentation.

for at hente de data, der er skrabet med javascript-filen ovenfor, skal du køre denne blok kode inden for “Shareviecontroller.hurtig “visningdidload-funktion:

du har også brug for denne import til kUTTypePropertyList:

import MobileCoreServices

kørsel af udvidelsen nu skal med succes udskrive URL’ en til konsollen!

Side note: Tilføj følgende uddrag, hvis du vil tilpasse navigationslinjen som jeg har (erstatter med dit eget billede eller bare en titel).

tilføjelse af Konfigurationsceller

standardpladen, der fulgte med oprettelsen af din share-udvidelse, har inkluderet en metode til valgfrit at levere konfigurationselementer (cellerne i bunden af delingsarket)

override func configurationItems() -> ! {

indsæt nedenstående uddrag, som returnerer en række “SLComposeSheetConfigurationItem”:

Kør din app igen, og du vil se en celle i bunden nu.

en Model til Konfigurationselementet

Opret en grundlæggende model kaldet “Deck.hurtig”, som bruges fremad til at videregive data mellem visningskontrollere.

tabelvisningen

i gif i begyndelsen har du bemærket, når du trykker på konfigurationscellen, skubber den til en ny visning med en tabelvisning. Opret en ny fil, der arver fra” Uivecontroller “med navnet” Shareselectcontroller.Hurtig”. Opret en tabelvisningsegenskab, og føj den til visningen.

jeg har også indstillet titlen og titelfarven til denne visning og foretrækker at holde konstanter som celleidentifikatorer i en struktur:)

Opret en ejendom til at gemme dækkets videregivet fra den originale visningskontroller:

var userDecks = ()

og i overensstemmelse med de nødvendige protokoller for tabelvisningen:

tilbage i”Sharevisioncontroller.Hurtig”, opret en ejendom til at gemme nogle dummy-data og udfylde dem inden for visningdidload:

endelig, inde i tapHandler for det konfigurationselement, vi oprettede, skal du oprette en forekomst af Shareselectvisecontroller og få den til at trykke på tryk og også passere dækkene:

Kør appen. Hvis du trykker på konfigurationscellen, skal du skubbe til bordvisningen med dummy-dataene.

du vil dog bemærke, at konfigurationscellen stadig er hardcodet til”Deck Title”. For at få denne opdatering skal du oprette en egenskab til at gemme det valgte dæk og vælge det første som standard:

og opdatere konfigurationscellen inde i configurationItems() for at bruge det:

deck.value = selectedDeck?.title 

Kør appen igen, så ser du, at den er opdateret.

en protokol til opdatering af det valgte dæk

du har brug for en måde at afvise tilbage til Shareviecontroller, når der tappes på et nyt dæk, og få det til at opdatere brugergrænsefladen. En protokol vil være tilstrækkelig. Tilføj følgende til din Shareselectvisecontroller:

endelig skal du tilpasse Sharevisescontroller til den netop oprettede protokol og sikre, at delegeret for Shareselectviscontroller er indstillet til selv:

det valgte dæk opdateres, og konfigurationselementerne genindlæses for at opdatere værdien. Så pop vi for at gå tilbage til hovedskærmen.

Kør appen, og nu skal du være i stand til at ændre dæk, som opdateres for at vise det korrekt valgte dæk 🙂

efterbehandling

alt der er tilbage er at sende de indsamlede oplysninger til din server eller app for at gøre noget med, som du kan gøre inden for en anden kedelplademetode:

override func didSelectPost()

jeg vil ikke gå i detaljer om dette, men jeg brugte en NSURLSession til at sende til vores server. Jeg erstattede også dummy-dataene med rigtige dæk ved at oprette en appgruppe og bruge en delt NSUserDefaults til at gemme og hente data, der tidligere blev hentet i den vigtigste iOS-app.

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

endelig vil du bemærke, at min udvidelse hedder “Vurb” i handlingsdialogen og har et ikon. Du kan indstille et ikon ved at følge dette SO post. Og for at ændre navnet skal du blot ændre “Visningsnavn” i projektindstillingerne for udvidelsen.

det er alt, hvis du fandt dette nyttigt, kan du hjælpe andre med at finde det ved at anbefale.

du kan se hele projektet her.

Tags

Deltag Hacker Noon

Opret din gratis konto for at låse din brugerdefinerede læseoplevelse.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.