Amarengo

Articles and news

So erstellen Sie eine iOS-Freigabeerweiterung in Swift

Ursprünglich veröffentlicht von Scotty Fister am Juli 30th 2016 24,887 liest

Hinweis: Aktualisiert für Swift 4.

Für einen Hack-Tag bei der Arbeit habe ich beschlossen, eine Share-Erweiterung zu erstellen. Ich entdeckte, dass es kein voll ausgestattetes Tutorial gab, und als Ergebnis musste ich Informationen zusammenstellen (vieles davon wurde überraschenderweise der Apple-Dokumentation zugeschrieben).

Das Ziel

Eine Webseiten-URL als Rich Content in unserer App zu speichern und einige Optionen zu konfigurieren. Anfangs dachte ich, dass eine Erweiterungsaktion erforderlich ist — aber es scheint, dass dies besser zum Ändern von Inhalten geeignet ist (z. B. zum Entfernen roter Augen auf einem Foto mit einem Fingertipp). Es scheint, dass andere, einschließlich Apple, stattdessen die Freigabeerweiterung verwenden, um Elemente zu erstellen.

Das haben wir am Ende gebaut:

Die fertige Erweiterung

Wie Sie sehen können, habe ich das Design ein wenig angepasst und ein sogenanntes „Konfigurationselement“ hinzugefügt, bei dem es sich um Zellen am unteren Rand des Blattes handelt. häufig verwendet, um aus Konten oder anderen Optionen auszuwählen. Es wird hier verwendet, um aus den vorhandenen „Decks“ des Benutzers auszuwählen, in denen gespeichert werden soll. Was Sie nicht sehen können, ist, dass auch JavaScript-Code ausgeführt wird, um die aktuelle URL des Browsers abzurufen, die wir später an den Server senden. Wir werden das alles im Voraus abdecken!

Erste Schritte

Erstellen Sie entweder ein neues Projekt oder öffnen Sie ein vorhandenes Projekt, dem Sie die Erweiterung hinzufügen möchten. Klicken Sie dann auf Datei > Neues > Ziel. Wählen Sie auf der Registerkarte iOS die Option Erweiterung freigeben und drücken Sie Weiter. Gib ihm einen Namen; Ich entschied mich für die einfache „ShareExtension“.

Es wird gefragt, ob Sie das Schema aktivieren möchten. Dies bedeutet, dass Sie beim Ausführen der Anwendung direkt in Safari oder ähnlichem öffnen können, um die Erweiterung zu testen, im Gegensatz zu Ihrer Haupt-App. Wir wollen das – tippen Sie auf Aktivieren.

Testen Sie, was Sie bisher haben, indem Sie das Projekt Cmd + R ausführen – wie bereits erwähnt, können Sie auswählen, von welcher App aus Sie testen möchten, Safari auswählen und auf Ausführen tippen.

Der Dialog, der beim Ausführen einer Erweiterung angezeigt wird.

Wenn Safari geöffnet wird, tippen Sie auf das Freigabesymbol, und Ihr Erweiterungsname mit dem Platzhaltersymbol sollte in der Liste angezeigt werden. Wenn nicht, tippen Sie auf Mehr und aktivieren Sie es. Durch Tippen auf das Symbol wird die Standardimplementierung des Slcomposeserviceviewcontrollers angezeigt, die sofort einsatzbereit ist.

Abrufen der URL

Das Freigabeblatt ruft automatisch den Seitentitel ab und legt ihn als Haupttext fest, aber im Allgemeinen möchten Sie mehr als das — sei es die URL oder ein Bild auf der Seite. Dazu können Sie Safari eine JavaSript-Datei ausführen lassen, um das Dokument zu analysieren und alles abzurufen, was wir benötigen.

Klicken Sie zunächst mit der rechten Maustaste auf Ihren Erweiterungsordner in Xcode und wählen Sie Neue Datei. Sie finden Leer in der anderen Registerkarte, klicken Sie auf Weiter und nennen Sie die Datei „getURL.js“.

Sie müssen Ihre Erweiterungsinformationen bearbeiten.fügen Sie einen Schlüssel „NSExtensionJavaScriptPreprocessingFile“ mit dem Wert unserer gerade erstellten Datei „getURL“ hinzu (beachten Sie das Fehlen einer Erweiterung).

Fügen Sie außerdem eine Wörterbuchzeile „NSExtensionActivationRule“ hinzu, die den Schlüssel „NSExtensionActivationSupportsWebURLWithMaxCount“ mit der Nummer enthalten sollte 1:

Wie die Informationen Ihrer Erweiterung.plist sollte aussehen, wenn es als Eigenschaftsliste angezeigt wird

NSExtensionJavaScriptPreprocessingFile: Dadurch wird unsere App über eine JavaScript-Datei informiert, die bei der Ausführung der Erweiterung ausgeführt werden soll.

NSExtensionActivationRule: Verwenden Sie dieses Wörterbuch, um Aktionserweiterungsschlüssel hinzuzufügen, mit denen das System bestimmen kann, für welche Arten von Inhalten Ihre Erweiterung aktiviert werden soll.

Fügen Sie Folgendes in „getURL.js“:

In Verbindung mit den oben festgelegten Schlüsseln sucht iOS nun nach einem Objekt namens „ExtensionPreprocessingJS“, das zur Laufzeit ausgeführt werden soll. Dies wird in der Dokumentation von Apple ausführlicher erläutert.

Um die mit der obigen JavaScript-Datei abgekratzten Daten abzurufen, müssen Sie diesen Codeblock im „ShareViewController .swift“ viewDidLoad-Funktion:

Sie benötigen diesen Import auch für kUTTypePropertyList:

import MobileCoreServices

Wenn Sie die Erweiterung jetzt ausführen, sollte die URL erfolgreich auf der Konsole gedruckt werden!

Randnotiz: Fügen Sie das folgende Snippet hinzu, wenn Sie die Navigationsleiste wie ich anpassen möchten (Ersetzen durch Ihr eigenes Bild oder nur einen Titel).

Hinzufügen von Konfigurationszellen

Das Boilerplate, das mit dem Erstellen Ihrer Freigabeerweiterung geliefert wurde, enthält eine Methode zum optionalen Bereitstellen von Konfigurationselementen (die Zellen am unteren Rand des Freigabeblatts)

override func configurationItems() -> ! {

Fügen Sie das folgende Snippet ein, das ein Array von „SLComposeSheetConfigurationItem“ zurückgibt:

Führen Sie Ihre App erneut aus und Sie sehen jetzt unten eine Zelle.

Ein Modell für das Konfigurationselement

Erstellen Sie ein Basismodell mit dem Namen „Deck.swift“, die im Voraus verwendet wird, um Daten zwischen View-Controllern zu übergeben.

Die Tabellenansicht

Im GIF am Anfang haben Sie beim Tippen auf die Konfigurationszelle bemerkt, dass sie zu einer neuen Ansicht mit einer Tabellenansicht wechselt. Erstellen Sie eine neue Datei mit dem Namen „ShareSelectViewController“, die von „UIViewController“ erbt.rasch“. Erstellen Sie eine Tableview-Eigenschaft und fügen Sie sie der Ansicht hinzu.

Ich habe auch den Titel und die Titelfarbe für diese Ansicht festgelegt und bevorzuge es, Konstanten wie Zellenbezeichner in einer Struktur beizubehalten 🙂

Erstellen Sie eine Eigenschaft, um die vom ursprünglichen Ansichtscontroller übergebenen Daten zu speichern:

var userDecks = ()

Und entsprechen den erforderlichen Protokollen für die Tabellenansicht:

Zurück im „ShareViewController.swift“, erstellen Sie eine Eigenschaft, um einige Dummy-Daten zu speichern, und füllen Sie sie in viewDidLoad:

Erstellen Sie schließlich im tapHandler für das von uns erstellte Konfigurationselement eine Instanz des ShareSelectViewController und lassen Sie ihn auf tippen, wobei Sie auch die Daten übergeben:

Führen Sie die App aus. Wenn Sie auf die Konfigurationszelle tippen, wird die Tabellenansicht mit den Dummy-Daten angezeigt.

Sie werden jedoch feststellen, dass die Konfigurationszelle immer noch fest in „Deck Title“ codiert ist. Um dieses Update zu erhalten, erstellen Sie eine Eigenschaft zum Speichern des ausgewählten Decks und wählen Sie standardmäßig das erste aus:

Und aktualisieren Sie die Konfigurationszelle in ConfigurationItems(), um sie zu verwenden:

deck.value = selectedDeck?.title 

Führen Sie die App erneut aus und Sie werden sehen, dass sie aktualisiert wurde.

Ein Protokoll zum Aktualisieren des ausgewählten Decks

Sie benötigen eine Möglichkeit, zum ShareViewController zurückzukehren, wenn auf ein neues Deck getippt wird, und die Benutzeroberfläche zu aktualisieren. Ein Protokoll genügt. Fügen Sie Ihrem ShareSelectViewController Folgendes hinzu:

Passen Sie schließlich den ShareViewController an das gerade erstellte Protokoll an und stellen Sie sicher, dass der Delegat für den ShareSelectViewController auf self :

Das ausgewählte Deck wird aktualisiert, und die Konfigurationselemente werden neu geladen, um den Wert zu aktualisieren. Dann müssen wir zum Hauptbildschirm zurückkehren.

Führen Sie die App aus und jetzt sollten Sie in der Lage sein, Decks zu ändern, die aktualisiert werden, um das korrekt ausgewählte Deck anzuzeigen 🙂

Beenden

Sie müssen nur noch die gesammelten Informationen an Ihren Server oder Ihre App senden, um etwas damit zu tun, was Sie in einer anderen Boilerplate-Methode tun können:

override func didSelectPost()

Ich werde nicht ins Detail gehen, aber ich habe eine NSURLSession verwendet, um auf unserem Server zu posten. Ich habe auch die Dummy-Daten durch echte Daten ersetzt, indem ich eine App-Gruppe erstellt und eine freigegebene NSUserDefaults zum Speichern und Abrufen von Daten verwendet habe, die zuvor in der Haupt-iOS-App abgerufen wurden.

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

Zuletzt werden Sie feststellen, dass meine Erweiterung im Aktionsdialogfeld „Vurb“ heißt und über ein Symbol verfügt. Sie können ein Symbol festlegen, indem Sie diesem SO-Beitrag folgen. Und um den Namen zu ändern, ändern Sie einfach „Anzeigename“ in den Projekteinstellungen für die Erweiterung.

Das ist alles, wenn Sie dies hilfreich fanden, helfen Sie bitte anderen, es zu finden, indem Sie es empfehlen.

Sie können das Projekt hier vollständig ansehen.

Tags

Hacker Noon beitreten

Erstellen Sie Ihr kostenloses Konto, um Ihr individuelles Leseerlebnis freizuschalten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.