Работа с значками и изображениями tvOS в Xamarin

Мақала
03/16/2017

Создание захватывающих значков и изображений является важной частью разработки иммерсивного пользовательского интерфейса для приложений Apple TV. В этом руководстве описаны действия, необходимые для создания и включения необходимых графических ресурсов для приложений Xamarin.tvOS:

Изображение запуска — изображение запуска отображается при первом запуске приложения и заменяется первым экраном приложения после завершения запуска.
Многоуровневые образы — относящиеся к Apple TV, новые многоуровневые изображения Apple работают с эффектом Parallax, чтобы создать трехмерный эффект для выбранных элементов. Существует несколько способов создания многоуровневого изображения.
Значок приложения — значки необходимы не только для начального экрана Apple TV, но и для Магазина приложений. Они должны быть предоставлены как многоуровневый образ.
Изображение верхней полки . Если ваше приложение размещено на верхней строке начального экрана, для выделения функций приложения потребуется изображение верхней полки. При необходимости можно указать динамическое содержимое верхней полки , чтобы выделить содержимое в приложении.
Изображения в Центре игр . Если ваше приложение является игрой и использует Game Center, потребуется несколько дополнительных изображений.
Настройка образов проектов Xamarin.tvOS— описывает действия, необходимые для настройки образа запуска и значка приложения Xamarin.tvOS.

Внимание

Все изображения на Apple TV находятся в разрешении 1x (@1x), и вы должны использовать только изображения этого размера. Включая более крупные графические элементы с более высоким разрешением, не только требует времени для загрузки и использования большего объема памяти и хранилища, но они должны быть динамически перемасштабированы во время выполнения и негативно повлияют на производительность рисования.

Запуск образа

Изображение запуска — это первое, что отображается при первоначальном запуске приложения Xamarin.tvOS на Apple TV и таким образом, каждое приложение tvOS должно предоставить образ запуска.

Изображение запуска отображается быстро и дает впечатление, что ваше приложение быстро и быстро реагирует. Apple TV заменит изображение запуска первым экраном вашего приложения вскоре после этого.

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

Запуск размера изображения	Примечания.
1920x1080 пикселей	Неуровневые файлы .png только

Apple предлагает следующие предложения по проектированию образа запуска приложения:

Почти идентично первому экрану . Экран запуска должен быть как можно ближе к первому экрану вашего приложения. Включение различных рисунков или элементов может привести к раздражающей "вспышке" при появлении первого экрана.
Избегайте использования текста . Запуск изображений является статическим и таким образом не будет локализован перед отображением.
Запуск downplay — так как пользователи Apple TV часто переключают приложения, вы не должны привлечь внимание к процессу запуска приложения.
Нет рекламы или фирменной символики . Изображение запуска не должно использоваться в качестве экрана "О программе" или включать в себя любую фирменную символику, если она не является статической частью первого экрана вашего приложения. Объявления строго запрещены.

Настройка образа запуска

Чтобы задать образ запуска для проекта tvOS, сделайте следующее:

В Обозреватель решений дважды щелкните Assets.xcassets его, чтобы открыть его для редактирования:
В редакторе активов LaunchImages щелкните ресурс:
Щелкните запись Apple TV 1x и выберите "Запустить образ" или перетащите новый образ из файловой системы:
Сохранение изменений.

Многоуровневые изображения

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

Многоуровневые изображения содержат от двух (2) до пяти (5) отдельных слоев, объединенных для формирования полного изображения. За исключением фонового слоя, каждый слой использует свой порядок Z вместе с прозрачностью, чтобы создать иллюзию глубины. Когда пользователь взаимодействует с многоуровневыми изображениями, более высокие упорядоченные Z слои масштабируются и перекрываются для создания этого эффекта.

Внимание

Многоуровневые изображения требуются для значков приложения и являются необязательными для других фокусируемых элементов (таких как изображение верхней полки). Однако Apple предлагает использовать многоуровневые изображения для любого изображения, которое может сосредоточиться на приложении.

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

Сделайте фоновый слой непрозрачным . Фоновый слой (слой 1) должен быть непрозрачным или при попытке использовать многоуровневый образ в Apple TV. Все остальные слои могут содержать несколько уровней прозрачности для улучшения трехмерного эффекта.
Изоляция переднего плана, средних и фоновых элементов — размещение видных элементов (например, игровых символов) на переднем плане используйте середину для вторичных элементов или теней. Наконец, включите нейтральный фон, чтобы обеспечить этап для верхних слоев.
Сохраните текст на переднем плане . Если вы не хотите, чтобы текст не был скрыт более высоким уровнем, обычно он должен находиться на самом верхнем слое.
Используйте простой слой - Эффект Параллакса был разработан, чтобы быть тонким, чтобы сохранить ваши слои до минимального, чтобы предотвратить jarring, нереалистичные эффекты.
Включите зону Сейф . Так как верхние слои могут быть обрезаны во время эффекта Parallax, необходимо создать границу Сейф Зоны на каждом слое. Если содержимое слишком близко к краю слоев, оно может быть обрезано. Верхние слои будут испытывать больше масштабирования и обрезки, чем нижние слои. См. раздел "Уровни изображений" ниже.
Предварительный просмотр часто — многоуровневые изображения следует просматривать часто, чтобы убедиться, что нужный трехмерный эффект возникает, и что ни одно из содержимого на отдельных слоях не обрезается. Вы должны предварительно просмотреть слоистые изображения на реальном оборудовании Apple TV, чтобы убедиться, что они отрисовываются должным образом.

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

Изменение размера слоев изображений

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

Создание многоуровневого изображения

TvOS работает с многоуровневыми изображениями в следующих форматах:

CAR Files — это собственный формат каталога активов, созданный Apple. Вы не создаете ФАЙЛЫ CAR напрямую, они создаются во время компиляции из любых файлов LSR и включаются в пакет приложений.
Образы LSR — это собственный формат изображения , созданный Apple. Используйте подключаемый модуль Parallax Adobe Photoshop или средство предварительного просмотра Parallax для создания и просмотра многоуровневых изображений в формате LSR.
Assets.xcassets — от двух (2) до пяти (5) .png стандартных форматированных изображений, включенных в каталог активов, которые будут скомпилированы в car или LSR форматированный образ во время компиляции.
LCR-файлы — это собственный формат файла, созданный Apple. LCR-файлы предназначены для использования в качестве дополнительного содержимого, скачиваемого с одного из серверов содержимого. LCR-файл никогда не должен быть включен в пакет приложений. LCR-файлы создаются из LSR или Photoshop-файлов с помощью средства командной строки, включенного layerutil в Xcode.

Средство предварительного просмотра Parallax

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

При просмотре многоуровневого изображения можно использовать мышь для поворота изображения и предварительного просмотра эффекта Parallax. Используйте кнопки + (плюс) и (минус) для добавления и - удаления слоев.

При создании нового многоуровневого образа его можно экспортировать в формате LSR и включить в пакет приложения.

Дополнительные сведения о создании и просмотре многоуровневых изображений см . в разделе "Создание параллакса " в руководстве по программированию приложений для tvOS.

Значки приложений

Приложению Xamarin.tvOS потребуется не только значок приложения для начального экрана Apple TV, но и значок для Магазина приложений. Значок приложения — это первое изменение, чтобы сделать большое впечатление на потенциального пользователя и общаться с целью вашего приложения на первый взгляд.

Каждое приложение должно предоставлять как небольшую, так и большую версию значка приложения. Маленький значок будет использоваться на начальном экране Apple TV при установке приложения. Большая версия используется в App Store. Значок большого приложения должен имитировать внешний вид и ощущение небольшой версии значка.

Маленький значок	Разрешение	Разрешение
Фактический размер	400x240px	1280x768px
размер зоны Сейф	370x22px
Нефокусный размер	300x180px
Размер фокуса	370x22px

Внимание

Значки приложения должны быть предоставлены как многоуровневые изображения. Дополнительные сведения см. в разделе "Многоуровневый образ ".

Apple предоставляет следующие предложения по созданию значков приложений:

Укажите единую точку фокуса — создайте значок с одной точкой фокуса, размещенной непосредственно в центре значка.
Используйте простой фон . Оставьте фон значка простым, чтобы верхние слои выделялись. Попробуйте использовать простой цвет или тонкий градиент.
Ограничить объем текста . Так как имя приложения будет отображаться под значком, когда оно выбрано пользователем, необходимо включить только текст, если это важно для оформления значка.
Не используйте снимки экрана. Снимок экрана слишком сложный для значка и не позволяет пользователю видеть назначение приложения на первый взгляд.
Сохраните значок квадрата — tvOS автоматически применяет маску, которая ненастоящее округляет угла значков. Не включайте это округление себя.
Тщательно разделяйте слои. Текст должен находиться на верхнем уровне, вторичных элементах в середине и нейтральном фоне, что позволяет верхним слоям сиять.
Используйте Градиенты и тени тщательно — Градиенты и тени могут столкнуться с эффектом Parallax, чтобы они должны быть тщательно использованы. Простые градиентные стили сверху вниз, светло-темные градиенты лучше всего работают. Тени обычно работают лучше всего, как острые, жесткие оттенки.
Прозрачность различных уровней. Используйте различные уровни прозрачности на верхних уровнях значка приложения, чтобы увеличить трехмерный эффект. Фоновый слой должен быть непрозрачным или приведет к ошибке.

Настройка значков приложения

Чтобы задать значки приложений, необходимые для проекта tvOS, сделайте следующее:

В Обозреватель решений дважды щелкните Assets.xcassets его, чтобы открыть его для редактирования:
В редакторе активов App Icon & Top Shelf Image разверните ресурс:
Затем разверните App Icon - Small ресурс:
Затем разверните Back ресурс и щелкните Contents запись:
Щелкните запись Apple TV 1x и выберите файл изображения.
Повторите описанные выше действия для Front ресурсов и Middle ресурсов.
Затем повторите те же действия, чтобы определить App Icon - Large ресурс.
Сохранение изменений.

Изображение верхней полки

Если пользователь поместил приложение Xamarin.tvOS на верхней строке на начальном экране Apple TV, при выборе приложения будет отображаться большой образ верхней полки. Это изображение должно выделять функции приложения или предоставлять прямые ссылки на его содержимое.

Изображение верхнего полка может быть предоставлено как один статический .png или файл (см. раздел "Создание многоуровневых изображений") или .lsr его можно динамически создавать в среде выполнения в виде одной строки фокусируемых элементов (см. раздел "Динамическое содержимое верхней полки ниже").

Размер изображения верхнего полки	Примечания.
1920x720px	Статический .png или многоуровневый LSR-файл

Apple предоставляет следующие предложения по созданию образов верхней полки:

Используйте многофункциональные статические изображения . Если приложение не предоставляет динамическое содержимое, его верхний образ полки будет не фокусируемым. Используйте это изображение, чтобы выделить функции приложения или торговой марки.
Ссылка на содержимое приложения — динамические макеты верхней полки предоставляют быструю ссылку на содержимое, которое пользователь находит наиболее важным в приложении. Используйте эту область, чтобы предоставить быструю ссылку для запуска приложения и немедленно перейти к заданному содержимому.
Продемонстрировать последнее содержимое — содержимое с расширенными возможностями верхнего полка может привлечь пользователя к приложению и сделать его более нужным. Используйте это в качестве области для демонстрации самого высокого уровня или новейшего содержимого.
Персонализированное содержимое — пользователи размещают наиболее часто используемые или любимые приложения в верхней строке начального экрана. Используйте верхнюю полку для отображения содержимого, в котором они будут наиболее заинтересованы.
Реклама не разрешена . Объявления строго запрещены отображаться в верхней полке. Вы можете отобразить последнее содержимое, которое можно использовать, но не должны отображаться сведения о ценах.

Настройка верхнего образа полки

Чтобы задать верхний образ полки, необходимый для проекта tvOS, сделайте следующее:

В Обозреватель решений дважды щелкните Assets.xcassets его, чтобы открыть его для редактирования:
В редакторе активов App Icon & Top Shelf Image разверните ресурс:
Top Shelf Image Щелкните ресурс:
Щелкните запись Apple TV 1x и выберите файл изображения.
Сохранение изменений.

Динамическое содержимое верхнего полка

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

Строка содержимого с разделами

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

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

Потребуются следующие размеры содержимого:

Размер	Плакат (2:3)	Квадрат (1:1)	HDTV (16:9)
Фактический размер	404x608px	608x608px	908x512px
размер зоны Сейф	380x570px	570x570px	852x479px
Нефокусный размер	333x500px	500x500px	782x440px
Размер фокуса	380x570px	570x570px	852x479px

Apple предоставляет следующие предложения для строки содержимого с разделами:

Завершите строку . Необходимо предоставить достаточно содержимого, чтобы охватывать полную ширину экрана.
Масштабирование смешанных изображений — строка содержимого с разделами предназначена для хранения сочетания размеров изображений (из приведенного выше списка). Однако если вы смешиваете размеры изображений, следует учитывать, что для нормализации отображения содержимого будет применено дополнительное масштабирование.

Прокрутка баннеров набора

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

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

Изображение баннера (дополнительное расширение)

Размер	Разрешение
Фактический размер	1940x624px
размер зоны Сейф	1740x620px
Нефокусный размер	1740x560px
Размер фокуса	1740x620px

Прокручиваемые баннеры набора можно предоставить как статический .png или многоуровневый .lsr файл.

Apple предоставляет следующие предложения для прокручивающих баннеров набора:

Объем содержимого. Чтобы прокручивать прокрутку, вы должны предоставить не менее трех (3) баннеров. Вы должны включать не более восьми (8) баннеров или сделать навигацию жесткой для конечного пользователя.
Текст содержимого. Если для баннера требуется текст, должен быть включен в изображение баннера. Если вы используете многоуровневые изображения, текст должен находиться в самом верхнем слое.

Дополнительные сведения о добавлении расширения Верхнего полка в приложение см. в справочнике по Apple TVServices Framework, чтобы предоставить динамическое содержимое Top Shelf.

Изображения в Центре игр

Если ваше приложение Xamarin.tvOS является игрой, и вы включили поддержку Game Center, потребуется несколько дополнительных ресурсов изображений:

Значки достижения — непрозрачный образ требуется для каждого достижения, которое будет автоматически обрезано в круг. Достижения — это не фокусируемые элементы.
Панель мониторинга — можно указать необязательное изображение, которое появится в верхней части панели мониторинга приложения в Центре игр. Эти изображения не фокусируются.
Иллюстрация списка лидеров. Для каждого списка лидеров, поддерживаемых приложением, необходимо указать от одного (1) до трех (3) 16:9 изображений пропорций. Это могут быть статические .png или многоуровневые .lsr файлы. Фокус на панели лидеров.

Размер	Значки достижения	Панель мониторинга	Работа в области лидеров
Видимый размер	200x200px	923x150px	Н/Д
Фактический размер	320x320px	Н/Д	659x371px
размер зоны Сейф	Недоступно	Недоступно	618x348px
Нефокусный размер	Недоступно	Недоступно	548x309px
Размер фокуса	Недоступно	Недоступно	618x348px

Дополнительные сведения о работе с Game Center см. в руководстве по программированию в Центре игр Apple.

Работа с образами

Так как tvOS 9 является подмножеством iOS 9, те же методы, которые используются для включения и отображения изображений в приложении Xamarin.iOS, также работают для приложения Xamarin.tvOS. Дополнительные сведения см. в нашей документации по отображению изображения .

Настройка образов проектов Xamarin.tvOS

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

Выполните следующие действия.

В Обозреватель решений дважды щелкните Info.plist его, чтобы открыть его для редактирования:
В редакторе Info.Plist выберите каталог активов (настроенный выше в разделе "Настройка значков приложений") для значков приложений:
Затем выберите каталог ресурсов (настроенный выше в разделе "Настройка образа запуска") для образов запуска.
Сохранение изменений.

Итоги

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

Бөлісу құралы:

Работа с значками и изображениями tvOS в Xamarin