Bienvenido, soy Miguel y para hoy les traigo otro nuevo artículo.
Muchas más aplicaciones han implementado vistas previas de enlaces en una publicación o mensaje, como una forma conveniente de mostrar más información sobre el sitio web al que dirige el enlace, como el título y la imagen de vista previa.
En WWDC 2019, Apple lanzó el marco LinkPresentation que fue diseñado para buscar, proporcionar y presentar enlaces enriquecidos en aplicaciones iOS.
Sin embargo, este marco solo puede funcionar en dispositivos con iOS 13+, lo que significa que los dispositivos iPhone que ejecutan iOS 12 o versiones anteriores no pueden aprovechar esta función.
En este artículo, le mostraré una manera fácil de crear vistas previas de enlaces utilizando la biblioteca de código abierto SwiftLinkPreview , que es compatible con iOS 8+ y, por lo tanto, hará que las vistas previas de enlaces estén disponibles en el 99,9%
de los dispositivos iPhone.
Esencialmente, no necesita preocuparse por la compatibilidad de los dispositivos.
Índice
Descripción del proyecto
Como se muestra a continuación, el tutorial actual tiene como objetivo crear una lista de tweets y cada uno de ellos muestra una vista previa del enlace a un artículo publicado en la publicación Better Programming en Manualestutor.
En general, la interfaz de usuario está tratando de imitar la de la última aplicación de Twitter para iOS y conserva solo los elementos esenciales que son más relevantes para el tutorial actual.
Específicamente, la vista previa del enlace incluye una imagen del artículo, el título y el enlace al sitio web de Manualestutor para indicar que se trata de una vista previa del enlace.
Los metadatos de cada artículo se obtienen y procesan utilizando la biblioteca SwiftLinkPreview mencionada anteriormente, cuya referencia se proporciona al final de este artículo.
El proyecto se completó con Swift v5.1.3
y SwiftUI
se utilizó para la programación de la interfaz de usuario.
Paso 1. Configuración del proyecto
En Xcode, cree un proyecto de aplicación de vista única ( Archivo -> Nuevo -> Proyecto ). Nombra el proyecto LinkPreviewSwiftUI
(o lo que quieras).
Especifique que queremos usar Swift como lenguaje de programación y SwiftUI para la configuración de la interfaz de usuario.
Usaremos CocoaPods para integrar SwiftLinkPreview
en nuestro proyecto. Para hacer eso, siga estos pasos.
- Cierre el proyecto que acabamos de crear.
- Abra la terminal y cambie al directorio de su proyecto usando
$ cd
. - Cree un Podfile usando
$ pod init
. Tenga en cuenta que si no tiene CocoaPods instalado en su computadora, consulte el sitio web oficial para obtener instrucciones de instalación. - Abra su Podfile y actualícelo como se muestra a continuación.
platform :ios, '9.0' // update the target name below if your project has a different nametarget 'LinkPreviewSwiftUI' do use_frameworks! pod 'SwiftLinkPreview', '~> 3.1.0' end
- Guarde y cierre su Podfile.
- En la terminal, complete la instalación del marco ejecutando
$ pod install
. - Abra el
LinkPreviewSwiftUI
espacio de trabajo que acaba de crear.
Abra el archivo ContentView.swift
, importe el marco SwiftLinkPreview
en la parte superior del archivo.
Paso 2. Datos y recursos
Antes de construir nuestra interfaz de usuario, recopilemos los datos necesarios y otros recursos que se utilizarán en esta aplicación.
Primero, descargue la miniatura de la cuenta de Twitter de Better Programming desde este sitio web . Luego puede arrastrar y soltar esta imagen a su proyecto, que copiará la imagen a la carpeta de su proyecto. Cambie el nombre a BP_Thumbnail.png
.
En segundo lugar, cree el modelo de datos para el proyecto. Es una clase de datos que se ajusta al protocolo Identifiable
.
Esta clase Article
tiene cinco propiedades de la instancia: id
, title
, link
, imageLink
, y imageData
.
Cada uno de ellos debe ser autoexplicativo por su nombre. Si no lo tiene claro ahora, no se preocupe, porque las instancias se usarán en la lista y podrá averiguar fácilmente qué es qué.
Además, preparé una lista de enlaces a los últimos artículos de Better Programming, que se utilizarían en el proyecto actual.
dejar articleURLs = [ "https://manualestutor.com/10-increíbles-librerías-de-javascript-para-los-desarrolladores-del-front-end-en-2020", "https://manualestutor.com/d3-visualizaciones-sensibles-y-dinámicas-para-datos-y-otras-recetas-fáciles", "https://manualestutor.com/construir-bibliotecas-de-componentes-swiftui-reutilizables-con-el-gestor-de-paquetes-swift", "https://manualestutor.com/mi-único-consejo-para-ser-efectivo-en-el-aprendizaje-de-un-nuevo-lenguaje-de-programación", ] struct Artículo: Identificable { dejar id: String var title: String = "Marcador de posición del título del artículo" var subtítulo: String? var link: String? = "Enlace al artículo" var imageLink: String? var imageData: ¿Datos? static func sampleArticles () -> [Artículo] { var artículos = [Artículo] () para URL en articleURLs { Articles.append (Article (id: url)) } devolver artículos } }
Modelos de datos.
El objetivo de la vista previa de un enlace es proporcionar información para un enlace a un sitio web, lo que significa que esta información se obtendrá de forma remota. Para hacer eso, podemos crear un buscador de datos como el siguiente.
Buscador de artículos para obtener datos a distancia.
En concreto, esta clase ArticleFetcher
se ajusta al protocolo ObservableObject
, por lo que se pueden observar sus valores.
La propiedad article
es del tipo Article
y está marcada como @Published
, de modo que notificará a los observadores pertinentes sobre cualquier cambio.
Para usar SwiftLinkPreview
, simplemente puede crear una instancia sin ningún parámetro en el método de inicialización, aunque le permite proporcionar opciones de configuración personalizadas sobre cómo funciona la vista previa del enlace especificando parámetros adicionales, como URLSession
y DispatchQueue
.
Sin embargo, para el tutorial actual, no debemos preocuparnos por configurar estos parámetros.
Como puede ver, la instancia SwiftLinkPreview
llamará al método preview()
. Cuando la solicitud se completa correctamente, se devuelve una instancia de tipo struct
de forma response
asincrónica.
La respuesta tiene varias propiedades importantes que son relevantes para la presentación de la información del enlace.
Para este ejemplo actual, vamos a acceder a su title
, canonicalURL
y propiedades image
, que se pueden asignar a los title
, link
y propiedades imageLink
de una instancia Article
.
Cuando la propiedad image
no lo es nil
, simplemente podemos obtener los datos de la imagen y guardarlos en la propiedad de la instancia Article
e imageData
.
Si desea obtener más información sobre la estructura response
de datos, puede consultar la referencia que se proporciona al final de este artículo.
Paso 3. Interfaz de usuario
A continuación, estamos listos para crear la interfaz de usuario de nuestra aplicación. Para simplificar este tutorial, la aplicación solo mostrará la lista de tweets y no se establecerán interacciones de usuario (por ejemplo, gestos de toque).
Como puede ver a continuación, el componente principal de esta aplicación es una List
con cada fila presentando un artículo.
Específicamente, para cada fila, crearemos un ArticleRow
que tomará el correspondiente article
como parámetro de inicialización.
Interfaz de usuario.
Cuando ArticleRow
se crea una instancia, crearemos una instancia ArticleFetcher
que será responsable de obtener los datos de Internet.
Debido a ArticleRow
que observará que articleFetcher
, cuando article
se actualice después de obtener los datos pertinentes, la interfaz de usuario de la fila se actualizará en consecuencia.
Básicamente ArticleRow
, la configuración del está usando algunas vistas comunes en SwiftUI, incluyendo Text
y Image
. No los voy a explicar en detalle, ya que no es el enfoque del tutorial actual.
Sin embargo, si ejecuta el código, verá que no funcionará porque la forma utilizada en la línea 35, RoundedCorners
no se puede reconocer. Para solucionar el problema, simplemente puede comentar esta línea.
Entonces, en lugar de comentar la línea anterior, puede agregar la forma autodefinida RoundedCorners
a su proyecto.
Básicamente, es una estructura que se ajusta al protocolo Shape
. Al implementar la función path(in: Rect) -> Path
, crea una forma con esquinas redondeadas que se puede especificar para cada una de sus cuatro esquinas cuando se usa.
Forma de esquinas redondeadas.
Construya y ejecute el proyecto, debería poder ver algo similar a la captura de pantalla al comienzo de este artículo. Avísame si tienes algún problema. Estaré más que feliz de poder ayudarte.
SwiftLinkPreview
para obtener los datos para preparar una vista previa de un enlace.
También mencionamos brevemente algunas implementaciones básicas de SwiftUI List
que implican la obtención de datos asincrónicos.
Gracias por leer este artículo.
Añadir comentario