Узнайте, как легко создавать предварительные просмотры ссылок без использования инфраструктуры LinkPresentation, которая доступна только в iOS 13+.

Многие другие приложения реализовали предварительный просмотр ссылок в сообщениях или сообщениях в качестве удобного способа показать дополнительную информацию о веб-сайте, на который ведет ссылка, например заголовок и изображение для предварительного просмотра.

На WWDC 2019 Apple выпустила фреймворк LinkPresentation, который был разработан для получения, предоставления и представления расширенных ссылок в приложениях iOS.

Однако эта платформа может работать только на устройствах с iOS 13+, а это означает, что устройства iPhone с iOS 12 или более ранней версии не могут воспользоваться этой функцией.

В этой статье я покажу вам простой способ создания превью ссылок с помощью хорошо разработанной библиотеки с открытым исходным кодом SwiftLinkPreview, которая поддерживает iOS 8+ и, таким образом, сделает предварительный просмотр ссылок доступным на 99,9% устройств iPhone.

По сути, вам не нужно беспокоиться о совместимости устройств.

Обзор проекта

Как показано ниже, текущее руководство направлено на создание списка твитов, в каждом из которых отображается предварительная ссылка на статью, опубликованную в публикации Better Programming на Medium.

В целом, пользовательский интерфейс пытается имитировать одно из последних приложений Twitter для iOS и сохраняет только основные элементы, которые наиболее актуальны для текущего руководства.

В частности, предварительный просмотр ссылки включает изображение статьи, заголовок и ссылку на веб-сайт Medium, чтобы указать, что это предварительный просмотр ссылки.

Метаданные каждой статьи выбираются и обрабатываются с помощью вышеупомянутой библиотеки SwiftLinkPreview, ссылка на которую приведена в конце этой статьи.

Проект был выполнен с использованием Swift v5.1.3, и SwiftUI использовался для программирования пользовательского интерфейса.

Шаг 1. Настройка проекта

Создать проект

В Xcode создайте проект приложения с одним представлением (Файл - ›Новый -› Проект). Назовите проект LinkPreviewSwiftUI (или как хотите).

Укажите, что мы хотим использовать Swift в качестве языка программирования и SwiftUI для настройки пользовательского интерфейса.

Интегрируйте SwiftLinkPreview с помощью CocoaPods

Мы будем использовать CocoaPods для интеграции SwiftLinkPreview в наш проект. Для этого выполните следующие действия.

  • Закройте только что созданный проект.
  • Откройте терминал и перейдите в каталог вашего проекта с помощью $ cd.
  • Создайте подфайл, используя $ pod init. Обратите внимание: если на вашем компьютере не установлен CocoaPods, обратитесь к официальному сайту за инструкциями по установке.
  • Откройте свой подфайл и обновите его, как показано ниже.
platform :ios, '9.0'
// update the target name below if your project has a different name
target 'LinkPreviewSwiftUI' do
    use_frameworks!
    pod 'SwiftLinkPreview', '~> 3.1.0'
end
  • Сохраните и закройте свой подфайл.
  • В терминале завершите установку фреймворка, запустив $ pod install.
  • Откройте LinkPreviewSwiftUI рабочее пространство, которое только что было создано.

Фреймворк для импорта

Откройте файл ContentView.swift, импортируйте структуру SwiftLinkPreview в верхней части файла.

Шаг 2. Данные и ресурсы

Прежде чем мы создадим наш пользовательский интерфейс, давайте соберем необходимые данные и другие ресурсы, которые будут использоваться в этом приложении.

Получите эскиз

Сначала загрузите эскиз учетной записи Twitter Better Programming с этого веб-сайта. Затем вы можете перетащить это изображение в свой проект, который скопирует изображение в папку вашего проекта. Переименуйте его в BP_Thumbnail.png.

Модели данных

Во-вторых, создайте модель данных для проекта. Это класс данных, соответствующий протоколу Identifiable.

Этот класс Article имеет пять свойств экземпляра: id, title, link, imageLink и imageData.

Название каждого из них не требует пояснений. Если вам сейчас непонятно, не беспокойтесь об этом, потому что экземпляры будут использоваться в списке, и вы легко поймете, что к чему.

Кроме того, я подготовил список ссылок на последние статьи по Better Programming, которые будут использоваться в текущем проекте.

Удаленный сборщик данных

Весь смысл предварительного просмотра ссылки состоит в том, чтобы предоставить некоторую информацию для ссылки на веб-сайт, что означает, что эта информация будет извлечена удаленно. Для этого мы можем создать сборщик данных, как показано ниже.

В частности, этот ArticleFetcher класс соответствует протоколу ObservableObject, так что его значения можно наблюдать.

Свойство article относится к типу Article и помечено как @Published, чтобы уведомлять соответствующих наблюдателей о любых изменениях.

Чтобы использовать SwiftLinkPreview, вы можете просто создать экземпляр без каких-либо параметров в методе инициализации, хотя он позволяет вам предоставить настраиваемые параметры конфигурации в отношении того, как работает предварительный просмотр ссылки, указав дополнительные параметры, такие как URLSession и DispatchQueue.

Однако в текущем руководстве нам не нужно беспокоиться об установке этих параметров.

Как видите, экземпляр SwiftLinkPreview вызовет метод preview(). Когда запрос завершен успешно, асинхронно возвращается экземпляр struct типа response.

Ответ имеет несколько важных свойств, которые имеют отношение к представлению информации о ссылке.

В текущем руководстве мы получим доступ к его свойствам title, canonicalURL и image, которые будут сопоставлены со свойствами title, link и imageLink экземпляра Article.

Если свойство image не равно nil, мы можем просто получить данные изображения и сохранить их в свойстве imageData экземпляра Article.

Если вы хотите узнать больше о структуре данных response, вы можете обратиться к ссылке, приведенной в конце этой статьи.

Шаг 3. Пользовательский интерфейс

Теперь мы готовы создать пользовательский интерфейс нашего приложения. Для простоты этого руководства приложение просто покажет список твитов, и никакие действия пользователя не будут установлены (например, жесты касания).

Список

Как вы можете видеть ниже, основным компонентом этого приложения является List, в каждой строке которого представлена ​​статья.

В частности, для каждой строки мы создадим ArticleRow, который будет принимать соответствующий article в качестве параметра инициализации.

Ряд

Когда создается ArticleRow экземпляр, мы создаем ArticleFetcher экземпляр, который будет отвечать за выборку данных из Интернета.

Поскольку ArticleRow будет соблюдать articleFetcher, когда article обновляется после получения соответствующих данных, пользовательский интерфейс строки будет соответствующим образом обновлен.

Конфигурация ArticleRow в основном использует некоторые общие представления в SwiftUI, включая Text и Image. Я не собираюсь подробно их объяснять, поскольку это не является основной темой данного руководства.

Форма закругленных углов

Однако, если вы запустите код, вы обнаружите, что он не работает, потому что фигура, использованная в строке 35, RoundedCorners, не может быть распознана. Чтобы решить эту проблему, вы можете просто закомментировать эту строку.

Однако, запустив проект, вы увидите, что углы изображения выходят за пределы ограничивающего вида при предварительном просмотре, что может немного раздражать. Итак, вместо того, чтобы комментировать приведенную выше строку, вы можете добавить в свой проект самоопределенную форму RoundedCorners.

По сути, это структура, соответствующая протоколу Shape. Реализуя функцию path(in: Rect) -> Path, он создает форму со скругленными углами, которую можно указать для каждого из ее четырех углов при ее использовании.

Скомпилируйте и запустите проект, вы должны увидеть что-то похожее на снимок экрана в начале этой статьи. Просто дайте мне знать, если у вас возникнут проблемы. Я буду более чем счастлив помочь вам.

Заключение

Это все, что у меня есть для этого урока. Таким образом, мы узнали, как использовать SwiftLinkPreview фреймворк для получения данных для подготовки предварительного просмотра ссылки.

Мы также вкратце коснулись некоторых базовых реализаций List SwiftUI, которые включают асинхронную выборку данных.

использованная литература