Układy w zestawie narzędzi interfejsu TalkBack

Tworzenie lepszych aplikacji za pomocą Compose
Twórz piękne interfejsy z minimalną ilością kodu za pomocą Jetpack Compose na Androida TV OS.

Ekran telewizora jest zwykle oglądany z odległości około 3 metrów. Chociaż jest on znacznie większy niż większość ekranów innych urządzeń z Androidem, nie zapewnia takiego poziomu szczegółowości i kolorów jak mniejszy ekran urządzenia. Te czynniki wymagają tworzenia układów aplikacji z myślą o urządzeniach TV, aby zapewnić użytkownikom przydatne i przyjemne środowisko.

Używanie motywów układu na telewizorze

Motywy Androida mogą stanowić podstawę układów w aplikacjach na telewizory. Użyj motywu, aby zmodyfikować wyświetlanie aktywności w aplikacji, które mają być uruchamiane na telewizorze. W tej sekcji znajdziesz informacje o tym, jakich motywów używać.

Motyw Leanback

Wycofana biblioteka androidx.leanback zawiera Theme.Leanback, motyw dla aktywności na telewizorze, który zapewnia spójny styl wizualny aplikacji korzystających z zestawu narzędzi interfejsu Leanback. Użyj tego motywu w dowolnej aplikacji na telewizor zbudowanej z użyciem klas AndroidX Leanback. Poniższy przykładowy kod pokazuje, jak zastosować ten motyw do aktywności:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

Motyw NoTitleBar

Pasek tytułu jest standardowym elementem interfejsu aplikacji na Androida na telefonach i tabletach, ale nie nadaje się do aplikacji na telewizory. Jeśli nie używasz klas Leanback AndroidX, zastosuj motyw NoTitleBar do działań na telewizorze, aby ukryć pasek tytułu. Poniższy przykład kodu z pliku manifestu aplikacji na telewizory pokazuje, jak zastosować ten motyw, aby usunąć wyświetlanie paska tytułu:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

Motywy AppCompat

W aplikacjach mobilnych na Androida bardzo często używa się AppCompatActivity wraz z jednym z Theme.AppCompat motywów. Dzięki temu możesz korzystać z funkcji takich jak kolorowanie elementów rysowalnych bez obaw o wersję Androida na urządzeniu. Jeśli tworzysz aplikację, która działa tylko na Androidzie TV, nie używaj AppCompatActivity, ponieważ funkcje, które włącza, są już dostępne na Androidzie TV lub nie mają znaczenia.

Jeśli tworzysz aplikację ze wspólną bazą kodu na urządzenia mobilne z Androidem i Androida TV, możesz napotkać pewne problemy związane z motywami. AppCompatActivity i różne widżety AppCompat wymagają używania Theme.AppCompat, a fragmenty zestawu narzędzi interfejsu Leanback oczekują używania FragmentActivityTheme.Leanback.

Jeśli musisz użyć tej samej aktywności podstawowej na urządzeniach mobilnych z Androidem i Androidzie TV lub chcesz używać widoków niestandardowych opartych na widżetach AppCompat, takich jak AppCompatImageView, użyj Theme.AppCompat.Leanbackmotywów. Te motywy zawierają wszystkie elementy motywu z AppCompat, a także wartości specyficzne dla Leanback.

Motywy Theme.AppCompat.Leanback możesz dostosowywać tak samo jak inne motywy. Jeśli na przykład chcesz zmienić wartości, które są specyficzne dla pakietu narzędzi interfejsu Leanback OnboardingSupportFragment, wykonaj podobne działanie:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

Tworzenie podstawowych układów TV

Układy na urządzenia TV muszą być zgodne z kilkoma podstawowymi wytycznymi, aby były użyteczne i skuteczne na dużych ekranach. Aby tworzyć układy zoptymalizowane pod kątem ekranów telewizorów, postępuj zgodnie z tymi wskazówkami:

  • Twórz układy w orientacji poziomej. Ekrany telewizorów zawsze wyświetlają się w trybie poziomym.
  • Umieść elementy sterujące nawigacją na ekranie po lewej lub prawej stronie i zapisz miejsce w pionie na zawartość.
  • Twórz interfejsy podzielone na sekcje za pomocą fragmentów. Używaj grup widoków, np.GridViewzamiastListView, aby lepiej wykorzystać poziomą przestrzeń ekranu.
  • Używaj grup widoków, np. RelativeLayout lub LinearLayout, aby porządkować widoki. Dzięki temu system może dostosowywać położenie widoków do rozmiaru, wyrównania, proporcji i gęstości pikseli ekranu telewizora.
  • Dodaj wystarczające marginesy między elementami sterującymi układu, aby uniknąć przeładowania interfejsu.

Nadmiarowość obrazu

Układy na telewizory mają pewne unikalne wymagania ze względu na ewolucję standardów telewizyjnych, które mają na celu wyświetlanie obrazu na pełnym ekranie. Z tego powodu urządzenia TV mogą przycinać zewnętrzne krawędzie układu aplikacji, aby zapewnić wypełnienie całego wyświetlacza. Takie zachowanie jest zwykle określane jako overscan.

Elementy ekranu, które muszą być zawsze widoczne dla użytkownika, umieszczaj w obszarze bezpiecznym przed nadmiernym skanowaniem. Dodanie do układu 5-procentowego marginesu o wartości 48 dp na lewej i prawej krawędzi oraz 27 dp na górnej i dolnej krawędzi pomaga zapewnić, że elementy ekranu w układzie znajdują się w bezpiecznym obszarze nadskanowania.

Nie dostosowuj elementów ekranu w tle, z którymi użytkownik nie wchodzi bezpośrednio w interakcję, i nie przycinaj ich do obszaru bezpiecznego. Dzięki temu elementy ekranu w tle będą wyglądać prawidłowo na wszystkich ekranach.

Poniższy przykład pokazuje układ główny, który może zawierać elementy tła, oraz zagnieżdżony układ podrzędny z 5-procentowym marginesem, który może zawierać elementy w obszarze bezpiecznym dla nadskanowania:

<?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>

Ostrzeżenie: nie stosuj marginesów nadskanowania do układu, jeśli używasz klas AndroidX Leanback, takich jak BrowseSupportFragment lub powiązanych widżetów, ponieważ te układy zawierają już marginesy bezpieczne dla nadskanowania.

Tworzenie użytecznego tekstu i elementów sterujących

Aby tekst i elementy sterujące w aplikacji na telewizorze były lepiej widoczne z daleka, postępuj zgodnie z tymi wskazówkami:

  • Dziel tekst na małe fragmenty, które użytkownicy mogą szybko przejrzeć.
  • Używaj jasnego tekstu na ciemnym tle. Ten styl jest łatwiejszy do odczytania na telewizorze.
  • Unikaj cienkich czcionek lub czcionek, które mają zarówno bardzo wąskie, jak i bardzo szerokie kreski. Aby zwiększyć czytelność, używaj prostych czcionek bezszeryfowych i wygładzania.
  • Używaj standardowych rozmiarów czcionek Androida:
    <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"/>
  • Spraw, aby wszystkie widżety były wystarczająco duże, aby były dobrze widoczne dla osoby siedzącej w odległości 3 metrów od ekranu. Najlepszym sposobem na to jest używanie rozmiarów względnych zamiast bezwzględnych oraz jednostek pikseli niezależnych od gęstości (dp) zamiast bezwzględnych jednostek pikseli. Aby na przykład ustawić szerokość widżetu, użyj wrap_content zamiast pomiaru w pikselach, a aby ustawić margines widżetu, użyj wartości dp zamiast wartości px.

Więcej informacji o pikselach niezależnych od gęstości i tworzeniu układów obsługujących większe rozmiary ekranu znajdziesz w artykule Omówienie zgodności z ekranami.

Zarządzanie zasobami układu na telewizorze

Podobnie jak wszystkie inne urządzenia z Androidem, telewizory mają różne rozmiary ekranu i obsługują różne rozdzielczości, w tym 720p, 1080p i 4K. Upewnij się, że Twoja aplikacja obsługuje różne rozmiary ekranu.

Różne rozmiary i rozdzielczości ekranu mają różną gęstość pikseli. Aby zachować wygląd interfejsu na ekranach o różnych rozmiarach, rozdzielczościach i gęstościach pikseli, określaj wymiary interfejsu za pomocą pikseli niezależnych od gęstości (dp), a nie pikseli. Poniżej znajdziesz informacje o gęstości pikseli na ekranie w przypadku różnych rozdzielczości paneli telewizyjnych.

Rozdzielczość panelu Gęstość pikseli na ekranie
720p tvdpi
1080 xhdpi
4K xxxhdpi
Więcej informacji znajdziesz w artykule Obsługa różnych gęstości pikseli.

Więcej informacji o optymalizacji układów i zasobów pod kątem dużych ekranów znajdziesz w artykule Omówienie zgodności z ekranem.

Wzorce układu, których należy unikać

Istnieje kilka podejść do tworzenia układów, które nie sprawdzają się dobrze na urządzeniach telewizyjnych. Oto kilka podejść do interfejsu użytkownika, których należy unikać podczas tworzenia układu na telewizor.

  • Ponowne wykorzystywanie układów z telefonu lub tabletu: nie używaj ponownie układów z aplikacji na telefon lub tablet bez modyfikacji. Układy utworzone z myślą o innych urządzeniach z Androidem nie są dobrze przystosowane do telewizorów i muszą zostać uproszczone, aby można było ich używać na telewizorze.
  • Korzystanie z ActionBar: paski działań są zalecane do używania na telefonach i tabletach, ale nie nadają się do interfejsu telewizora. Korzystanie z menu opcji paska działań lub dowolnego menu rozwijanego jest w przypadku aplikacji na telewizory zdecydowanie odradzane ze względu na trudności w poruszaniu się po takim menu za pomocą pilota.
  • Używanie ViewPager: przesuwanie między ekranami może dobrze działać na telefonie lub tablecie, ale nie próbuj tego na telewizorze.

Więcej informacji o projektowaniu układów odpowiednich na telewizory znajdziesz w przewodniku Projektowanie na telewizory.

Obsługa dużych bitmap

Urządzenia TV, podobnie jak inne urządzenia z Androidem, mają ograniczoną ilość pamięci. Jeśli układ aplikacji jest tworzony z użyciem obrazów o bardzo wysokiej rozdzielczości lub jeśli w działaniu aplikacji używasz wielu obrazów o wysokiej rozdzielczości, może to szybko doprowadzić do przekroczenia limitów pamięci i wywołać błędy związane z brakiem pamięci. W większości przypadków zalecamy używanie biblioteki Glide do pobierania, dekodowania i wyświetlania map bitowych w aplikacji. Więcej informacji o uzyskiwaniu najlepszej wydajności podczas pracy z mapami bitowymi znajdziesz w naszych ogólnych sprawdzonych metodach dotyczących grafiki na Androidzie.

Skuteczna reklama

W przypadku salonu zalecamy korzystanie z rozwiązań w zakresie reklam wideo, które są wyświetlane na pełnym ekranie i można je zamknąć w ciągu 30 sekund. Funkcje reklamowe na Androidzie TV, takie jak przyciski zamykania i kliknięcia, muszą być dostępne za pomocą pada kierunkowego, a nie dotykowo.

Android TV nie udostępnia przeglądarki. Reklamy nie mogą próbować uruchamiać przeglądarki ani przekierowywać do treści w Sklepie Google Play, które nie są zatwierdzone na urządzenia z Androidem TV.

Uwaga: do logowania się w usługach społecznościowych możesz używać klasy WebView.

Dodatkowe materiały

Projektowanie pod kątem telewizorów