Amarengo

Articles and news

Cómo Construir un iOS Compartir Extensión en Swift

Originalmente publicado por Scotty Fister en 30 de julio de 2016 24,887 lee

Nota: se ha Actualizado para Swift 4.

Para un día de hackeo en el trabajo, decidí probar suerte creando una extensión para compartir. Descubrí que no había un tutorial con todas las funciones por ahí, y como resultado tuve que reunir información (gran parte de ella atribuida, sorprendentemente, a la documentación de Apple).

El objetivo

De guardar la URL de una página web como contenido enriquecido en nuestra aplicación y permitir la configuración de algunas opciones. Inicialmente pensé que lo que se necesitaba era una acción de extensión, pero parece que es más adecuada para modificar el contenido (como eliminar los ojos rojos en una foto con un solo toque). Parece que otros, incluido Apple, están utilizando la extensión share para crear elementos en su lugar.

Esto es lo que habremos construido al final:

La extensión completada

Como puede ver, he personalizado un poco el diseño y agregado lo que se conoce como «elemento de configuración», que son celdas en la parte inferior de la hoja; se usa comúnmente para seleccionar cuentas u otras opciones. Se usa aquí para seleccionar de los «Mazos» existentes del usuario para guardarlos. Lo que no puede ver es que también está ejecutando código JavaScript para obtener la URL actual del navegador, que enviamos al servidor más tarde. ¡Cubriremos todo esto por delante!

Pasos iniciales

Cree un proyecto nuevo o abra uno existente al que le gustaría agregar la extensión. A continuación, pulse Archivo > Nuevo destino >. En la pestaña iOS, seleccione Compartir extensión y presione Siguiente. Ponle un nombre; opté por el simple «ShareExtension».

Le preguntará si desea activar el esquema. Esto significa que cuando ejecute la aplicación, le permitirá abrir directamente en Safari o similar para probar la extensión, en lugar de su aplicación principal. Queremos que esto-tap Active.

Pruebe lo que tiene hasta ahora ejecutando el proyecto Cmd + R: como se mencionó, le ofrece opciones de qué aplicación probar, seleccione Safari y toque Ejecutar.

El cuadro de diálogo que se presenta al ejecutar una extensión.

Cuando Safari se abra, pulsa el icono compartir y el nombre de la extensión con el icono de marcador de posición debería aparecer en la lista. Si no, toca Más y habilítalo. Al tocar el icono, se presentará la implementación predeterminada de SLComposeServiceViewController, que está bastante limpia al sacarla de la caja.

Obtener la URL

La hoja compartida recupera automáticamente el título de la página y lo establece como el texto del cuerpo, pero generalmente querrá más que eso, ya sea la URL o una imagen en la página. Para esto, puede hacer que Safari ejecute un archivo JavaScript para analizar el documento y recuperar lo que necesitemos.

En primer lugar, haga clic con el botón derecho en su carpeta de extensiones en Xcode y seleccione Nuevo archivo. Encontrarás Vacío dentro de la Otra pestaña, presiona Siguiente y nombra el archivo «getURL».js».

Tendrás que editar la información de tus extensiones.archivo plist y en » NSExtension «hay otro diccionario llamado» NSExtensionAttributes «— agregue una clave» NSExtensionJavaScriptPreprocessingFile «con el valor de nuestro archivo recién creado,» getURL » (tenga en cuenta la falta de extensión).

También agregue una fila de diccionario «NSExtensionActivationRule» que debe contener la clave «NSExtensionActivationSupportsWebURLWithMaxCount» con el número 1:

Cómo es la información de tu extensión.plist debe verse cuando se ve como una lista de propiedades

NSExtensionJavaScriptPreprocessingFile: esto le permite a nuestra aplicación saber de un archivo JavaScript que debe ejecutarse en la ejecución de la extensión.

NSExtensionActivationRule: use este diccionario para agregar Claves de extensión de acción que ayuden al sistema a determinar para qué tipos de contenido activar la extensión.

Pegue lo siguiente en » getURL.js»:

Junto con las teclas que configuramos anteriormente, iOS ahora buscará un objeto llamado «ExtensionPreprocessingJS» para realizar en tiempo de ejecución. Esto se explica con más detalle en la documentación de Apple.

Para recuperar los datos raspados con el archivo javascript anterior, deberá ejecutar este bloque de código dentro del controlador «ShareViewController».función» viewDidLoad » de swift:

También necesitará esta importación para kUTTypePropertyList:

import MobileCoreServices

Ejecutar la extensión ahora debería imprimir correctamente la URL en la consola.

Nota al margen: agregue el siguiente fragmento de código si desea personalizar la barra de navegación como lo he hecho yo (reemplazándola con su propia imagen o simplemente con un título).

Agregar celdas de configuración

El modelo estándar que viene con la creación de la extensión para compartir habrá incluido un método para suministrar elementos de configuración opcionalmente (las celdas en la parte inferior de la hoja para compartir)

override func configurationItems() -> ! {

Inserte el fragmento de código siguiente, que devuelve una matriz de «SLComposeSheetConfigurationItem»:

Ejecute su aplicación de nuevo y verá una celda en la parte inferior ahora.

Un modelo para el Elemento de configuración

Cree un modelo básico llamado «Deck».swift», que se utiliza por adelantado para pasar datos entre controladores de vista.

La vista de tabla

En el gif al principio, te habrás dado cuenta al tocar la celda de configuración que empuja a una nueva vista con una vista de tabla. Cree un nuevo archivo que hereda de «UIViewController» llamado «ShareSelectViewController».Swift». Cree una propiedad de vista de tabla y agréguela a la vista.

También he establecido el título y el color del título para esta vista, y prefiero mantener constantes como identificadores de celda en una estructura 🙂

Crear una propiedad para almacenar la Cubierta pasada desde el controlador de vista original:

var userDecks = ()

Y cumplir con los protocolos requeridos para la vista de tabla:

En el controlador «ShareViewController».swift», cree una propiedad para almacenar algunos datos ficticios y rellenarlos dentro de viewDidLoad:

Por último, dentro del tapHandler para el elemento de configuración que creamos, cree una instancia del controlador ShareSelectViewController y hágalo pulsar sobre el grifo, pasando los mazos también:

Ejecute la aplicación. Al tocar la celda de configuración, se debe empujar a la vista de tabla con los datos ficticios.

Sin embargo, notará que la celda de configuración aún está codificada en «Título de cubierta». Para tener esta actualización, cree una propiedad para almacenar la cubierta seleccionada y seleccione la primera de forma predeterminada:

Y actualice la celda de configuración dentro de configurationItems() para usarla:

deck.value = selectedDeck?.title 

Ejecute la aplicación de nuevo y verá que se ha actualizado.

Un Protocolo para Actualizar el Deck Seleccionado

Necesitará una forma de volver al controlador Shareview cuando se toque un Deck nuevo y hacer que actualice la interfaz de usuario. Un protocolo será suficiente. Agregue lo siguiente a su controlador ShareSelectViewController:

Por último, ajuste el controlador Shareselectviewcontroller al protocolo que acaba de crear y asegúrese de que el delegado para el controlador ShareSelectViewController esté establecido en self:

La cubierta seleccionada se actualiza y los elementos de configuración se recargan para actualizar el valor. Luego hacemos pop para volver a la pantalla principal.

Ejecute la aplicación y ahora debería poder cambiar los mazos que se actualizarán para mostrar el mazo seleccionado correctamente 🙂

Terminando

Todo lo que queda es enviar la información recopilada a su servidor o aplicación para hacer algo, lo que puede hacer dentro de otro método repetitivo:

override func didSelectPost()

No entraré en detalles sobre esto, pero usé una NSURLSession para publicar en nuestro servidor. También reemplacé los datos ficticios con cubiertas reales creando un grupo de aplicaciones y utilizando un NSUserDefaults compartido para almacenar y recuperar datos recuperados anteriormente dentro de la aplicación principal de iOS.

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

Por último, notarás que mi extensión se llama «Vurb» en el cuadro de diálogo de acción y tiene un icono. Puedes establecer un icono siguiendo esta publicación. Y para cambiar el nombre, simplemente cambie «Nombre para mostrar» en la configuración del proyecto para la extensión.

Eso es todo, si le pareció útil, ayude a otros a encontrarlo recomendándolo.

Puede ver el proyecto en su totalidad aquí.

las Etiquetas

Unirse Hacker Mediodía

Crea tu cuenta gratis para desbloquear su costumbre experiencia de lectura.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.