Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK
Code

Создание приложения iMessage в iOS 10

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Введение

С iOS 10 Apple открыла приложение «Сообщения» сторонним разработчикам с помощью новой функции, называемой приложениями iMessage. Теперь разработчики могут создавать свои собственные различные типы приложений, начиная от наклеек и заканчивая полностью интерактивными интерфейсами, которые создают встроенный контент в iMessage.

В этом уроке я расскажу вам о новой структуре сообщений и покажу вам, как создавать собственные приложения iMessage.

Этот учебник требует, чтобы у вас был Xcode 8 в OS X El Capitan или более поздние версии и предполагает, что у вас есть небольшие знания по созданию приложений iOS на базе UIKit. Если вы все еще начинаете работу с iOS, ознакомьтесь с серией iOS From Scratch With Swift. В ходе этой серии вы узнаете, как начать разработку платформы iOS с помощью углубленных статей и руководств.

1. Экосистема

Прикладная экосистема iMessage начинается с полного App Store, доступного пользователям через приложение «Сообщения». Этот магазин полностью отделен от обычного магазина приложений iOS и будет показывать только приложения, связанные с iMessage.

Приложения iMessage существуют как расширения для обычных приложений iOS, похожие на такие, как расширения для фотографий и пользовательские клавиатуры. Главное отличие состоит в том, что, поскольку iMessage App Store существует самостоятельно в приложении «Сообщения», вы можете создать приложение iMessage, не создавая приложение iOS, которое выходит на главный экран пользователя; Приложение iMessage создается как расширение эффективного и невидимого приложения iOS. Однако важно отметить, что, конечно, если вы хотите разработать приложение iOS и iMessage, вы можете создать расширение iMessage, как и любой другой тип расширения.

Наконец, в то время как приложения iMessage будут доступны только на iOS, их контент будет доступен для просмотра на устройствах macOS и watchOS. В дополнение к этому пользователи watchOS 3 смогут просматривать свои недавно использованные стикеры и отправлять их своим контактам прямо из Apple Watch.

2. Основные стикеры

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

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

Если вы не строго соблюдаете правила, укажите размеры файлов, которые Apple рекомендует для ваших наклеек:

  • Маленькая: 100 x 100 pt@3x масштаб (300 x 300 пикселей)
  • Средняя: 136 x 136 pt @ 3x шкала (378 x 378 пикселей)
  • Большая: 206 x 206 pt @ 3x scale (618 x 618 пикселей)

Однако есть некоторые ограничения на изображения, которые вы можете использовать в своих стикерах:

  • Размер файлов не может превышать 500 КБ.
  • Изображения могут быть не меньше 100 х 100 пикселей (300 х 300 пикселей).
  • Изображения могут быть не более 206 x 206 pt (618 x 618 пикселей).
  • Файлы изображений должны быть PNG, APNG, JPEG или GIF; PNG для статических стикеров и APNG для анимированных рекомендуется, потому что они обрабатывают масштабирование и прозрачные фоны намного лучше, чем JPEG и GIF соответственно.

Откройте Xcode и создайте новый проект. В разделе iOS> Application вы увидите, что теперь есть варианты проектов iMessage Application iMessage и Sticker Pack Application. В этом первом примере выберите шаблон Sticker Pack Application:

Sticker Pack Application Template

Если вы хотите, чтобы некоторые ресурсы стикеров использовались в вашем приложении, вы можете загрузить их из папки iMessage Application Stickers учебника GitHub repo.

На левой боковой панели Xcode вы увидите, что теперь у вас есть каталог ресурсов Stickers.xcstickers в вашем проекте. Эта папка будет содержать значок приложения iMessage и все стикеры в вашем наборе. Добавление стикеров в ваше приложение так же просто, как перетаскивание их в папку Sticker Pack вашего каталога ресурсов.

Sticker Pack Folder

Обратите внимание: если вы хотите добавить анимированный стикер с помощью серии изображений, вы можете щелкнуть правой кнопкой мыши в папке Sticker Pack и выбрать опцию «Добавить ресурсы»> «Новая последовательность стикеров». В этом случае на вашем стикере вы можете перетащить кадры, чтобы изменить порядок отдельных кадров.

Sticker Sequence Creation

Наконец, при открытии вашего каталога ресурсов, если вы перейдете к инспектору атрибутов на правой боковой панели Xcode, вы можете изменить имя своего стикера, а также размер стикера, который вы используете.

Sticker Pack Configuration

Тестирование набора стикеров

Чтобы проверить стикер, просто нажмите кнопку воспроизведения в верхнем левом углу Xcode или нажмите Command-R на клавиатуре. После того, как симулятор загрузился, Xcode должен представить вам следующее меню.

Choose App Menu

Выберите «Сообщения», а затем нажмите кнопку «Выполнить». После того, как симулятор запустил приложение «Сообщения», нажмите кнопку «Магазин приложений» внизу экрана для доступа к приложениям iMessage.

Accessing iMessage Apps

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

Sticker Pack Interface

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

Sent Sticker

Как вы можете видеть, очень быстро и легко создавать стикеры для iMessage в iOS 10 без необходимости использовать какой-либо код вообще.

3. Пользовательские приложения со стикерами

В некоторых случаях использования основных функций, предоставляемых основным шаблоном приложения стикера, может быть недостаточно. Из-за этого Apple также предоставляет вам возможность создать более индивидуальное приложение стикеров. Создайте новый проект под названием CustomStickerPack, как показано в начале этого руководства, но на этот раз выберите шаблон iMessage Application.

После того, как Xcode создаст ваш проект, вы увидите, что теперь у вас есть папки, похожие на файлы приложения iOS, с дополнительной папкой MessagesExtension. В верхней папке CustomStickerPack просто содержится каталог ресурсов и файл Info.plist для вашего «чистого» приложения iOS. Важно, чтобы вы указали все значки подходящего размера в этом каталоге ресурсов, поскольку iOS все равно будет использовать его для таких вещей, как настройки использования хранилища пользователя.

Папка, на которой мы собираемся сосредоточиться - MessageExtension, которая в настоящий момент содержит следующие файлы:

  • MessagesViewController.swift, который является контроллером корневого представления для пользовательского интерфейса приложения iMessage
  • MainInterface.storyboard, где вы можете легко проектировать интерфейс приложения
  • Assets.xcassets, который содержит файлы значков приложения iMessage, а также любые другие изображения, которые необходимо использовать в вашем интерфейсе.
  • Info.plist для значений конфигурации вашего расширения

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

Откройте файл MessagesViewController.swift, и вы сначала увидите, что ваш класс MessageViewController является подклассом MSMessagesAppViewController, который сам является подклассом UIViewController. Это означает, что все UIKit доступны для использования в приложениях iMessage.

Класс MSMessagesAppViewController предоставляет множество методов обратного вызова, которые вы можете переопределить для дальнейшей настройки функциональности вашего приложения, но нам в этом учебнике не нужно беспокоиться об этом. На данный момент просто измените определение класса, чтобы ваш класс соответствовал протоколу MSStickerBrowserViewDataSource:

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

После того, как вы добавили эти файлы, добавьте следующий код в свой класс MessageViewController:

С помощью этого кода мы просто создаем массив MSSticker для хранения наших стикеров и функции для их загрузки из локального хранилища.

Затем добавьте в свой класс следующий метод:

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

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

Наконец, чтобы весь наш код был фактически выполнен, замените метод viewDidLoad следующим:

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

Custom Sticker Pack

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

4. Настраиваемое приложение

В последней части этого урока мы собираемся создать очень простое приложение iMessage, чтобы создать уникальное сообщение.

Откройте Xcode и создайте другое приложение iMessage, называемое MessageApp. Откройте файл MainInterface.storyboard и в показанном контроллере представления удалите метку по умолчанию и добавьте степпер и кнопку, как показано:

App Interface

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

Затем откройте инспектор атрибутов с выбранным степпером и измените его минимальное и максимальное значения на 0 и 10 соответственно:

Stepper Values

Затем откройте редактор ассистента с вашим файлом MessagesViewController.swift, чтобы создать и подключить аутлет для вашего степпера и действие тач для вашей кнопки:

Теперь пришло время написать код. Во-первых, мне нужно познакомить вас с несколькими классами, которые имеют решающее значение при создании приложения iMessage:

  • MSConversation: представляет собой открытый разговор. Вы можете использовать этот класс, чтобы манипулировать транскриптом беседы, например, вставляя сообщения или получая в настоящее время выбранное сообщение.
  • MSMessage: представляет собой одно сообщение, независимо от того, создано ли оно вами для вставки в разговор или уже существует в разговоре.
  • MSMessageTemplateLayout: создает пузырь сообщений для отображения вашего пользовательского сообщения. Как показано на рисунке ниже, эта макет шаблона имеет много свойств и мест для размещения вашего собственного контента для настройки ваших сообщений.
Template Message Layout

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

Еще в вашем файле MessagesViewController.swift добавьте следующий метод в свой класс MessageViewController:

С помощью этого метода мы берем текущее значение слайдера и помещаем его в круглую метку. Затем мы обрисовывает эту метку (и содержащий ее родительский вид) в объект UIImage, который мы можем прикрепить к нашему сообщению.

Затем замените метод didPress(button:) следующим кодом:

Вы увидите, что с помощью этого кода мы сначала создаем макет сообщения и устанавливаем свойства image и caption. Затем мы создаем объект MSMessage для вставки в беседу.

Обратите внимание, что для правильной обработки вашего сообщения для iMessage необходимо установить layout и url для вашего сообщения. Этот URL-адрес предназначен для ссылки на веб-страницу некоторого типа, где пользователи MacOS также могут просматривать ваш пользовательский контент iMessage. Однако для этого простого примера мы просто создали базовый url из строки.

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

Создайте и запустите новое приложение еще раз, и вы увидите интерфейс, похожий на следующий:

Running App Interface

После того, как вы нажмете кнопку «Создать сообщение», вы также должны увидеть пузырь макета сообщения, указанный в поле ввода и доступный для отправки:

Completed Message

Вывод

В этом уроке я познакомил вас с новым фреймворком сообщений в iOS 10, который позволяет создавать стикеры и приложения для интеграции с iMessage. Мы рассмотрели основные классы, о которых вам нужно знать, включая MSStickerBrowserViewController, MSConversation, MSMessage и MSTemplateMessageLayout.

Фреймворк сообщений предоставляет API-интерфейсы, чтобы обеспечить вам большой контроль над приложениями iMessage. Для дальнейшего чтения я бы рекомендовал справочную информацию Apple по сообщениям.

Как всегда, пожалуйста, оставляйте свои комментарии и отзывы в разделе комментариев ниже.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.