Układy w zestawie narzędzi interfejsu TalkBack

Ekran telewizora jest zazwyczaj widoczny z odległości około 3 metrów. Jest on znacznie większy od wyświetlacza innych urządzeń z Androidem, jednak jego szczegółowość i kolor nie są takie same jak mniejsze ekrany. Czynniki te wymagają tworzenia układów aplikacji z myślą o urządzeniach telewizyjnych, aby zapewnić użytkownikom wygodę i wygodę.

Używanie motywów układu na telewizorze

Motywy Androida mogą być podstawą układów w aplikacjach na telewizory. Użyj motywu, aby zmodyfikować wyświetlanie działań w aplikacji, które powinny być uruchamiane na telewizorze. W tej sekcji znajdziesz informacje o tym, których motywów użyć.

Motyw TalkBack

Biblioteka Leanback na Androidax zawiera Theme.Leanback – motyw dla aktywności telewizyjnych, który zapewnia spójny styl wizualny. Używaj tego motywu w dowolnej aplikacji TV opracowanej z użyciem klas funkcji AndroidX Switch. Poniższy przykładowy kod pokazuje, jak zastosować ten motyw do działania: 

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

Motyw bez tytułu na pasku

Pasek tytułu to standardowy element interfejsu aplikacji na Androida na telefonach i tabletach, ale nie jest odpowiedni w przypadku aplikacji na telewizory. Jeśli nie używasz klas w funkcji AndroidX Functions, zastosuj motyw NoTitleBar do działań związanych z telewizorem, aby zapobiec wyświetlaniu paska tytułu. Poniższy przykładowy kod z pliku manifestu aplikacji TV pokazuje, jak zastosować ten motyw, aby usunąć pasek 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ę atrybutu AppCompatActivity razem z jednym z motywów Theme.AppCompat. Ta kombinacja pozwala korzystać z funkcji takich jak rysowalne kolory bez obaw o wersję Androida działającą na urządzeniu. Jeśli tworzysz aplikację, która działa tylko na Androidzie TV, nie używaj AppCompatActivity, ponieważ funkcje, które umożliwia, są już dostępne na Androidzie TV lub nie mają znaczenia.

Jeśli tworzysz aplikację, która korzysta z bazy kodu wspólnego dla Androida i Androida TV, możesz napotkać pewne wyzwania z powodu ich motywów. AppCompatActivity i różne widżety AppCompat wymagają użycia Theme.AppCompat, a fragmenty zestawu narzędzi interfejsu TalkBack wymagają użycia FragmentActivity i Theme.Leanback.

Jeśli chcesz używać tej samej podstawowej aktywności na urządzeniach mobilnych z Androidem i Androidem TV lub chcesz korzystać z widoków niestandardowych opartych na widżetach AppCompat, takich jak AppCompatImageView, użyj motywów Theme.AppCompat.Leanback. Motywy te zawierają wszystkie motywy z funkcji AppCompat, a także zapewniają wartości specyficzne dla funkcji TalkBack.

Motywy Theme.AppCompat.Leanback możesz dostosować tak samo jak każdy inny motyw. Jeśli na przykład chcesz zmienić wartości specyficzne dla elementu OnboardingSupportFragment zestawu narzędzi interfejsu TalkBack, wykonaj czynność podobną do tej: 

<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 reklam telewizyjnych

Układy na telewizory muszą być zgodne z podstawowymi wytycznymi, aby zapewnić ich użyteczność i skuteczność na dużych ekranach. Aby utworzyć układy zoptymalizowane pod kątem ekranów telewizyjnych, postępuj zgodnie z tymi wskazówkami:

  • Twórz układy w orientacji poziomej. Telewizory zawsze wyświetlają się w trybie poziomym.
  • Umieść elementy sterujące nawigacją po lewej lub prawej stronie ekranu, aby zachować pionową przestrzeń na treści.
  • Utwórz interfejsy użytkownika podzielone na sekcje za pomocą fragmentów. Aby lepiej wykorzystać przestrzeń na ekranie w poziomie, używaj grup widoków takich jak GridView zamiast ListView.
  • Widoki możesz uporządkować za pomocą grup widoków danych, takich jak RelativeLayout czy LinearLayout. Takie podejście pozwala systemowi dostosować pozycję widoków do rozmiaru, wyrównania, współczynnika proporcji i gęstości pikseli na ekranie telewizora.
  • Dodaj wystarczające marginesy między elementami sterującymi układem, aby uniknąć zaśmiecenia interfejsu.

Nadmiarowość obrazu

Układy do wyświetlania na telewizorze mają pewne szczególne wymagania ze względu na ewolucję standardów, które trzeba spełnić, by wyświetlać widzom obraz na pełnym ekranie. Z tego powodu telewizory mogą przycinać zewnętrzną krawędź układu aplikacji, aby wypełnić cały ekran. Takie działanie jest zwykle nazywane nadmiernym skanowaniem.

Umieść elementy ekranu, które muszą być zawsze widoczne dla użytkownika, w obszarze bezpiecznym dla nadmiernego skanowania. Dodanie 5% marginesu 48 dp przy krawędziach lewej i prawej oraz 27 dp u góry i u dołu układu pomaga upewnić się, że elementy ekranu w układzie znajdują się w obszarze bezpiecznym dla nadmiarowego skanowania.

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

Poniższy przykład przedstawia układ główny, który może zawierać elementy tła, oraz zagnieżdżony układ podrzędny z marginesem 5% i może zawierać elementy w obszarze bezpiecznym dla nadmiernego skanowania: 

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

Uwaga: nie stosuj marginesów przeskanowania w układzie, jeśli używasz klas funkcji AndroidX funkcji Wróć do płatności, takich jak BrowseSupportFragment lub powiązane widżety, ponieważ te układy już zawierają marginesy możliwe do nadmiernego przeskanowania.

Utwórz użyteczny tekst i elementy sterujące

Postępuj zgodnie z tymi wskazówkami, aby tekst i elementy sterujące aplikacji TV były lepiej widoczne z daleka:

  • Podziel tekst na mniejsze fragmenty, które użytkownicy mogą szybko przejrzeć.
  • Używaj jasnego tekstu na ciemnym tle. Ten styl jest bardziej czytelny na telewizorze.
  • Unikaj lekkich czcionek z bardzo wąskimi i bardzo szerokimi kreskami. Aby zwiększyć czytelność, użyj prostych czcionek bezszeryfowych i anti-aliasingu.
  • 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"/>
  • Zadbaj o to, aby wszystkie widżety były na tyle duże, aby były dobrze widoczne dla osób, które znajdują się w odległości 3 metrów od ekranu. Najlepszym sposobem, aby to zrobić, jest użycie rozmiaru zależnego od układu zamiast rozmiaru bezwzględnego oraz jednostek pikseli niezależnych od gęstości (dp) zamiast bezwzględnych jednostek pikseli. Aby na przykład ustawić szerokość widżetu, zamiast pomiaru piksela użyj wrap_content, a aby ustawić marżę widżetu, użyj wartości dp zamiast wartości px.

Więcej informacji o pikselach niezależnych od gęstości i układach budynków umożliwiających obsługę większych rozmiarów ekranu znajdziesz w artykule Omówienie zgodności ekranu.

Zarządzanie zasobami układu na potrzeby telewizora

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

W zależności od rozmiaru i rozdzielczości pikseli różni się też gęstość pikseli. Aby zachować wygląd UI na różnych rozmiarach ekranu, rozdzielczości i gęstości pikseli, określ pomiary w interfejsie za pomocą pikseli niezależnych od gęstości (dp), a nie pikseli. Poniżej znajdziesz gęstość pikseli na ekranie przy różnych rozdzielczościach panelu telewizora.

Rozdzielczość panelu Gęstość pikseli ekranu
720p tvdpi
1080 xhdpi
4K xxxhdpi
Więcej informacji znajdziesz w artykule o obsłudze różnych gęstości pikseli.

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

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

Istnieje kilka metod tworzenia układów, które nie działają dobrze na urządzeniach telewizyjnych. Oto kilka metod korzystania z interfejsu, których należy unikać przy projektowaniu układu ekranu telewizora.

  • Ponowne używanie układów na telefonie lub tablecie: nie używaj ponownie układów z aplikacji na telefon lub tablet bez modyfikacji. Układy utworzone na inne formaty urządzeń z Androidem nie sprawdzają się na telewizorach, dlatego ich obsługa na telewizorze musi być uproszczona.
  • Używaj ActionBar: paski działań są zalecane do stosowania na telefonach i tabletach, ale nie nadają się do interfejsu telewizyjnego. Zdecydowanie odradzamy korzystanie z menu opcji na pasku działań lub dowolnego menu w przypadku aplikacji na telewizory ze względu na trudności z poruszaniem się po menu za pomocą pilota.
  • Za pomocą ViewPager: przesuwanie się między ekranami sprawdza się świetnie na telefonie lub tablecie, ale nie warto tego robić na telewizorze.

Więcej informacji o projektowaniu układów odpowiednich do wyświetlania na telewizorze znajdziesz w przewodniku Projektowanie telewizorów.

Obsługa dużych map bitowych

Telewizory, tak jak inne urządzenia z Androidem, mają ograniczoną ilość pamięci. Jeśli układ aplikacji zawiera obrazy o bardzo wysokiej rozdzielczości lub używasz wielu obrazów o wysokiej rozdzielczości podczas działania aplikacji, może to szybko wyczerpać limit pamięci i spowodować błędy w pamięci. W większości przypadków zalecamy pobieranie, dekodowanie i wyświetlanie map bitowych w aplikacji za pomocą biblioteki Glide. Więcej informacji o uzyskiwaniu maksymalnej wydajności podczas pracy z mapami bitowymi znajdziesz w naszych ogólnych sprawdzonych metodach dotyczących grafiki na Androida.

Zadbaj o skuteczną reklamę

W przypadku salonów zalecamy korzystanie z reklam wideo, które wyświetlają się 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 dotykowe.

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

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

Dodatkowe materiały

Projektowanie na telewizory