Экран телевизора обычно используется с расстояния около 3 метров, и хотя он значительно больше, чем большинство других дисплеев устройств на базе 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 toolkit ожидают использования FragmentActivity и Theme.Leanback .
Если вам необходимо использовать одну и ту же базовую активность для мобильных устройств Android и Android TV, или если вы хотите использовать пользовательские представления на основе виджетов AppCompat таких как AppCompatImageView , используйте темы Theme.AppCompat.Leanback . Эти темы предоставляют все возможности оформления из AppCompat , а также значения, специфичные для Leanback.
Темы Theme.AppCompat.Leanback можно настраивать так же, как и любые другие темы. Например, если вы хотите изменить значения, специфичные для OnboardingSupportFragment из набора инструментов пользовательского интерфейса Leanback, сделайте что-то подобное следующему:
<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для упорядочивания элементов. Такой подход позволяет системе корректировать положение элементов в соответствии с размером, выравниванием, соотношением сторон и плотностью пикселей экрана телевизора. - Добавьте достаточные отступы между элементами управления макетом, чтобы избежать перегруженности пользовательского интерфейса.
Пересканирование
Макеты для телевизоров предъявляют ряд уникальных требований из-за эволюции телевизионных стандартов, направленных на отображение изображения на весь экран. По этой причине телевизионные устройства могут обрезать внешний край макета приложения, чтобы обеспечить заполнение всего экрана. Такое поведение обычно называется пересканированием (overscan ).
Размещайте элементы экрана, которые должны быть постоянно видны пользователю, в пределах безопасной зоны пересканирования. Добавление 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 |
| 4K | xxxhdpi |
Для получения дополнительной информации об оптимизации макетов и ресурсов для больших экранов см. раздел «Обзор совместимости с экранами» .
Следует избегать определенных схем компоновки.
Существует несколько подходов к созданию макетов, которые плохо работают на телевизорах. Вот некоторые подходы к пользовательскому интерфейсу, которых следует избегать при разработке макета для телевизора.
- Повторное использование макетов телефонов или планшетов: не используйте макеты приложений для телефонов или планшетов без изменений. Макеты, созданные для других форм-факторов устройств Android, плохо подходят для телевизоров и должны быть упрощены для работы на телевизоре.
- Использование
ActionBar: хотя панели действий рекомендуются для использования на телефонах и планшетах, они не подходят для интерфейса телевизора. Использование меню параметров панели действий или любого выпадающего меню крайне не рекомендуется для приложений на телевизоре из-за сложности навигации по такому меню с помощью пульта дистанционного управления. - Использование
ViewPager: переключение между экранами с помощью свайпа отлично работает на телефоне или планшете, но не пытайтесь делать это на телевизоре!
Для получения дополнительной информации о разработке макетов, подходящих для размещения на телевизоре, см. руководство по дизайну для телевизоров .
Обработка больших растровых изображений
Телевизоры, как и другие устройства Android, имеют ограниченный объем памяти. Если вы используете изображения очень высокого разрешения при создании макета приложения или применяете много изображений высокого разрешения в работе приложения, это может быстро привести к исчерпанию памяти и ошибкам нехватки памяти. В большинстве случаев мы рекомендуем использовать библиотеку Glide для получения, декодирования и отображения растровых изображений в вашем приложении. Для получения дополнительной информации о достижении наилучшей производительности при работе с растровыми изображениями обратитесь к нашим общим рекомендациям по работе с графикой в Android .
Обеспечьте эффективную рекламу
Для гостиной мы рекомендуем использовать полноэкранные видеорекламные решения, которые можно закрыть через 30 секунд. Функциональность рекламы на Android TV, такая как кнопки закрытия и переходы по ссылкам, должна быть доступна с помощью D-pad, а не сенсорного экрана.
Android TV не предоставляет веб-браузер. Ваши рекламные объявления не должны пытаться запускать веб-браузер или перенаправлять на контент Google Play Store, не одобренный для устройств Android TV.
Примечание: Для авторизации в социальных сетях можно использовать класс WebView .
Дополнительные ресурсы
Разработка дизайна для телевидения