Экран телевизора обычно просматривается с расстояния примерно 10 футов, и, хотя он намного больше, чем дисплеи большинства других устройств на базе Android, экран телевизора не обеспечивает такой же уровень детализации и цвета, как экран устройства меньшего размера. Эти факторы требуют от вас создания макетов приложений с учетом телевизионных устройств, чтобы создать полезный и приятный пользовательский опыт.
Использование тем макета для ТВ
Темы Android могут служить основой для макетов ваших телевизионных приложений. Используйте тему, чтобы изменить отображение действий вашего приложения, предназначенных для запуска на ТВ-устройстве. В этом разделе объясняется, какие темы использовать.
Тема наклона
Библиотека androidx.leanback включает Theme.Leanback — тему для ТВ-действий, обеспечивающую единообразный визуальный стиль. Используйте эту тему для любого телевизионного приложения, созданного с использованием классов AndroidX Leanback. В следующем примере кода показано, как применить эту тему к действию:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
Тема NoTitleBar
Строка заголовка — это стандартный элемент пользовательского интерфейса для приложений Android на телефонах и планшетах, но он не подходит для телевизионных приложений. Если вы не используете классы AndroidX Leanback, примените тему NoTitleBar к своим действиям на телевидении, чтобы отключить отображение строки заголовка. В следующем примере кода из манифеста телевизионного приложения показано, как применить эту тему для удаления отображения строки заголовка:
<application>
...
<activity
android:name="com.example.android.TvActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
...
</activity>
</application>
AppCompat темы
В мобильных приложениях Android очень часто используется AppCompatActivity вместе с одной из тем Theme.AppCompat . Эта комбинация позволяет вам использовать такие функции, как рисуемая тонировка, не беспокоясь о версии Android, работающей на устройстве. Если вы разрабатываете приложение, которое работает только на Android TV, не используйте AppCompatActivity , поскольку функции, которые он включает, либо уже доступны на Android TV, либо не актуальны.
Если вы создаете приложение с общей базой кода для мобильных устройств Android и Android TV, вы можете столкнуться с некоторыми проблемами из-за тем. AppCompatActivity и различные виджеты AppCompat требуют использования Theme.AppCompat , тогда как фрагменты набора инструментов Leanback UI требуют использования FragmentActivity и Theme.Leanback .
Если вам нужно использовать одно и то же базовое действие для мобильных устройств Android и Android TV или если вы хотите использовать пользовательские представления на основе виджетов AppCompat , таких как AppCompatImageView , используйте темы Theme.AppCompat.Leanback . Эти темы предоставляют вам все темы из AppCompat , а также значения, специфичные для Leanback.
Вы можете настраивать темы Theme.AppCompat.Leanback так же, как и любую другую тему. Например, если вы хотите изменить значения, специфичные для OnboardingSupportFragment набора инструментов Leanback UI, сделайте что-то похожее на следующее:
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
<item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
<item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>
Создание базовых макетов телевизоров
Макеты телевизионных устройств должны соответствовать некоторым основным правилам, чтобы гарантировать их удобство и эффективность на больших экранах. Следуйте этим советам, чтобы создать макеты, оптимизированные для экранов телевизоров:
- Создавайте макеты с альбомной ориентацией. Экраны телевизоров всегда отображаются в ландшафтном режиме.
- Разместите экранные элементы управления навигацией в левой или правой части экрана и оставьте вертикальное пространство для контента.
- Создавайте пользовательские интерфейсы, разделенные на разделы с помощью фрагментов . Используйте группы представлений, такие как
GridViewвместоListView, чтобы лучше использовать горизонтальное пространство экрана. - Используйте группы представлений, такие как
RelativeLayoutилиLinearLayoutдля упорядочения представлений. Такой подход позволяет системе подстраивать положение изображений под размер, выравнивание, соотношение сторон и плотность пикселей экрана телевизора. - Добавьте достаточные поля между элементами управления макетом, чтобы избежать загромождения пользовательского интерфейса.
Оверскан
К макетам для телевидения предъявляются некоторые уникальные требования в связи с развитием телевизионных стандартов, обеспечивающих представление зрителям полноэкранного изображения. По этой причине телевизионные устройства могут обрезать внешний край макета приложения, чтобы обеспечить заполнение всего экрана. Такое поведение обычно называется пересканированием .
Расположите элементы экрана, которые должны быть всегда видны пользователю, в зоне, безопасной для развертки. Добавление 5%-го поля в 48 dp по левому и правому краям и 27 dp по верхнему и нижнему краям макета помогает гарантировать, что элементы экрана в макете находятся в пределах области, безопасной для развертки.
Не настраивайте элементы фонового экрана, с которыми пользователь не взаимодействует напрямую, и не обрезайте их в область, безопасную для развертки. Такой подход помогает гарантировать, что элементы фонового экрана будут правильно выглядеть на всех экранах.
В следующем примере показан корневой макет, который может содержать фоновые элементы, и вложенный дочерний макет с отступом 5 %, который может содержать элементы в области, безопасной для развертки:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Screen elements that can render outside the overscan-safe area go here. -->
<!-- Nested RelativeLayout with overscan-safe margin. -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="27dp"
android:layout_marginBottom="27dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp">
<!-- Screen elements that need to be within the overscan-safe area go here. -->
</RelativeLayout>
</RelativeLayout>
Внимание: не применяйте к макету поля с превышением развертки, если вы используете классы AndroidX Leanback, такие как BrowseSupportFragment или связанные виджеты, поскольку эти макеты уже включают поля, безопасные для развертки.
Создавайте удобный текст и элементы управления
Следуйте этим советам, чтобы текст и элементы управления в вашем ТВ-приложении было легче видеть на расстоянии:
- Разбивайте текст на небольшие фрагменты, которые пользователи смогут быстро просмотреть.
- Используйте светлый текст на темном фоне. Этот стиль легче читать по телевизору.
- Избегайте легких шрифтов или шрифтов с очень узкими и очень широкими штрихами. Используйте простые шрифты без засечек и сглаживание, чтобы повысить читаемость.
- Используйте стандартные размеры шрифтов Android:
<TextView android:id="@+id/atext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleLine="true" android:textAppearance="?android:attr/textAppearanceMedium"/> - Сделайте все виджеты просмотра достаточно большими, чтобы их было хорошо видно тому, кто сидит на расстоянии 10 футов от экрана. Лучший способ сделать это — использовать размер относительно макета, а не абсолютный размер, и независимые от плотности единицы пикселей (dp) вместо абсолютных единиц пикселей. Например, чтобы установить ширину виджета, используйте
wrap_contentвместо измерения в пикселях, а чтобы установить поле для виджета, используйте значения dp вместо значений пикселей.
Дополнительные сведения о независимых от плотности пикселях и планировках зданий для работы с экранами большего размера см. в разделе Обзор совместимости экранов .
Управление ресурсами макета для ТВ
Как и все другие устройства Android, телевизоры имеют разные размеры экрана и поддерживают разные разрешения, включая, помимо прочего, 720p, 1080p и 4K. Убедитесь, что ваше приложение поддерживает разные размеры экрана .
Различные размеры и разрешения экрана имеют разную плотность пикселей. Чтобы сохранить внешний вид вашего пользовательского интерфейса независимо от размеров экрана, разрешения и плотности пикселей, определите измерения пользовательского интерфейса, используя пиксели, не зависящие от плотности (dp), а не пиксели. Плотность пикселей экрана для различных разрешений ТВ-панелей указана ниже.
| Разрешение панели | Плотность пикселей экрана |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4К | xxxhdpi |
Дополнительные сведения об оптимизации макетов и ресурсов для больших экранов см. в разделе Обзор совместимости экранов .
Шаблоны макета, которых следует избегать
Существует несколько подходов к созданию макетов, которые не работают на телевизионных устройствах. Вот некоторые подходы к пользовательскому интерфейсу, которых следует избегать при разработке макета для телевидения.
- Повторное использование макетов телефона или планшета: не используйте повторно макеты из приложения для телефона или планшета без изменений. Макеты, созданные для других форм-факторов устройств Android, плохо подходят для телевизионных устройств и должны быть упрощены для работы на телевизоре.
- Использование
ActionBar: хотя панели действий рекомендуется использовать на телефонах и планшетах, они не подходят для интерфейса телевизора. Использование меню параметров панели действий или любого раскрывающегося меню настоятельно не рекомендуется для телевизионных приложений из-за сложности навигации по такому меню с помощью пульта дистанционного управления. - Использование
ViewPager: переключение между экранами может отлично работать на телефоне или планшете, но не пытайтесь повторить это на телевизоре!
Дополнительные сведения о разработке макетов, подходящих для телевидения, см. в руководстве по проектированию телевизоров .
Обработка больших растровых изображений
Телевизионные устройства, как и другие устройства Android, имеют ограниченный объем памяти. Если вы создаете макет приложения с изображениями очень высокого разрешения или используете много изображений с высоким разрешением в работе вашего приложения, это может быстро привести к ограничению памяти и вызвать ошибки нехватки памяти. В большинстве случаев мы рекомендуем использовать библиотеку Glide для извлечения, декодирования и отображения растровых изображений в вашем приложении. Дополнительные сведения о том, как добиться максимальной производительности при работе с растровыми изображениями, см. в наших общих рекомендациях по работе с графикой Android .
Обеспечиваем эффективную рекламу
Для гостиной мы рекомендуем использовать полноэкранные решения для видеорекламы, которые можно закрыть в течение 30 секунд. Функциональные возможности рекламы на Android TV, такие как кнопки закрытия и переходы по кликам, должны быть доступны с помощью D-pad, а не сенсорного экрана.
Android TV не имеет веб-браузера. Ваши объявления не должны пытаться запустить веб-браузер или перенаправлять на контент Google Play Store, не одобренный для устройств Android TV.
Примечание. Вы можете использовать класс WebView для входа в службы социальных сетей.
Дополнительные ресурсы
Проектирование для телевидения