Экран телевизора обычно смотрят с расстояния около трёх метров. Хотя он значительно больше, чем экраны большинства других устройств на базе Android, он не обеспечивает такой же уровень детализации и цветопередачи, как экраны устройств меньшего размера. Это требует от вас разрабатывать приложения с учётом особенностей телевизоров, чтобы обеспечить удобный и приятный пользовательский интерфейс.
Используйте темы макетов для ТВ
Темы Android могут стать основой для макетов ваших телевизионных приложений. Используйте темы для изменения отображения действий в приложениях, предназначенных для работы на телевизоре. В этом разделе объясняется, какие темы использовать.
Тема отдыха
Устаревшая библиотека androidx.leanback включает тему Theme.Leanback для действий на ТВ, которая обеспечивает единый визуальный стиль для приложений Leanback UI toolkit. Используйте эту тему для любого приложения на ТВ, созданного с использованием классов 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"/>
- Сделайте все виджеты достаточно большими, чтобы их было хорошо видно человеку, сидящему на расстоянии 3 метров от экрана. Лучший способ добиться этого — использовать относительные, а не абсолютные размеры макета, и единицы измерения в пикселях (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 для входа в службы социальных сетей.
Дополнительные ресурсы
Проектирование для телевидения