Układy w zestawie narzędzi interfejsu TalkBack

Ulepszaj dzięki funkcji tworzenia wiadomości
Dzięki Jetpack Compose na system operacyjny Android TV możesz tworzyć atrakcyjne interfejsy użytkownika przy użyciu minimalnej ilości pisania.
Tworzenie wiadomości do telewizora → .

Ekran telewizora jest zwykle widziany z odległości około 3 metrów, ale jest on dużo większy niż większość innych urządzeń na innych urządzeniach z Androidem, telewizor nie zapewnia szczegóły i kolory na mniejszym ekranie. Te czynniki wymagają tworzenia układów aplikacji za pomocą funkcji Urządzenia telewizyjne z myślą o wygodzie użytkowników i ich użyteczności.

Używanie motywów układu na potrzeby telewizora

Motywy Androida mogą być podstawą w aplikacjach telewizyjnych. Użyj motywu, aby zmodyfikować sposób wyświetlania aktywności w aplikacji, która do wyświetlania na telewizorze. Z tej sekcji dowiesz się, których motywów możesz używać.

Motyw Leanback

Biblioteka androidx.leanback zawiera Theme.Leanback – motyw do ćwiczeń na telewizorze, który zapewnia spójny styl wizualny. Używaj tego motywu we wszystkich utworzonych aplikacjach telewizyjnych dzięki klasom Leanback na AndroidzieX. Poniższy przykładowy kod pokazuje, jak zastosować ten motyw do aktywność: 

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

Motyw NoTitleBar

Pasek tytułu to standardowy element interfejsu w aplikacjach na Androida na telefonach i tabletach, ale nie jest odpowiedni w przypadku aplikacji telewizyjnych. Jeśli nie używasz klas Leanback w AndroidzieX, zastosuj makro Motyw NoTitleBar do oglądania na telewizorze, który nie będzie wyświetlany na pasku tytułu. Ten przykładowy kod z manifestu aplikacji na telewizory pokazuje, jak zastosować ten motyw w celu usunięcia 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ę funkcji AppCompatActivity wraz z jednym z motywów Theme.AppCompat. Dzięki tej kombinacji możesz używać funkcji np. rysowanie, nie martwiąc się o wersję Androida na urządzeniu. Jeśli jeśli tworzysz aplikację, która działa tylko na Androida TV, nie używaj AppCompatActivity, ponieważ włączane przez nią funkcje są już dostępne Android TV lub nieistotne.

Jeśli tworzysz aplikację, która korzysta ze wspólnej bazy kodu dla ze względu na ich tematykę. AppCompatActivity i różne usługi Widżety AppCompat wymagają korzystania z tagu Theme.AppCompat, a Fragmenty zestawu narzędzi interfejsu Leanback, których należy użyć FragmentActivity i Theme.Leanback.

Jeśli musisz użyć tej samej podstawowej aktywności na urządzeniach mobilnych z Androidem i Androidzie TV lub chcesz widoki niestandardowe na podstawie AppCompat widżetów, takich jak AppCompatImageView, użyj motywów Theme.AppCompat.Leanback. Te motywy zapewniają wszystkie motywy z AppCompat i podać wartości specyficzne dla Leanback.

Możesz dostosowywać Theme.AppCompat.Leanback motywy tak samo jak inne motyw. Jeśli na przykład chcesz zmienić wartości, które są typowe dla parametru Zestaw narzędzi interfejsu Leanback OnboardingSupportFragment, wykonaj podobną czynność: 

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

Układy na telewizory muszą być zgodne z podstawowymi wytycznymi, aby upewnić się, że są przydatne 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 orientacji poziomej.
  • Umieść elementy sterujące nawigacją z lewej lub prawej strony ekranu i zapisz wartość w pionie.
  • Twórz interfejsy użytkownika podzielone na sekcje za pomocą fragmentów. Używaj grup widoków, takich jak GridView zamiast ListView jak lepiej wykorzystać poziomą przestrzeń ekranu.
  • Używaj grup widoków, takich jak RelativeLayout lub LinearLayout lub rozmieścić widoki. Dzięki temu system dostosuje położenie widoków do rozmiaru, wyrównanie, format obrazu i gęstość pikseli na ekranie telewizora.
  • Dodaj wystarczające marginesy między elementami sterującymi układu, aby uniknąć zaśmiecania interfejsu.

Nadmiarowość obrazu

Układy na potrzeby telewizji mają szczególne wymagania ze względu na ewolucję standardów telewizyjnych. na pełnym ekranie. Z tego powodu urządzenia telewizyjne mogą przycinać zewnętrzną krawędź aplikacji. układ, by zapewnić wypełnienie całego ekranu. Takie zachowanie określa się jako nadmierne skanowanie.

Umieść elementy ekranu, które muszą być przez cały czas widoczne dla użytkownika, w bezpiecznym obszarze skanowania. w pobliżu. Dodanie 5% marginesu: 48 dp na lewej i prawej krawędzi oraz 27 dp u góry i u dołu. krawędzie do układu, dzięki czemu elementy ekranu w układzie są w bezpiecznym miejscu nad skanowaniem w pobliżu.

Nie dostosowuj tych elementów na ekranie, z którymi użytkownik nie wchodzi w bezpośrednią interakcję, ani nie przycinaj ich i usuń elementy w obszarze zapewniającym nadmiarowość obrazu. Dzięki temu będziesz mieć pewność, że elementy na ekranie tła wyglądają 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żone elementy układ podrzędny z 5% marginesem i zawierającym elementy w obszarze zapewniającym nadmiarowość obrazu: 

<?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 nadmiarowych marginesów do układu, jeśli używasz klasach AndroidX Leanback, takich jak BrowseSupportFragment i powiązanych widżetów, ponieważ układy te zawierają już marginesy, które można wykonać bez skanowania.

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

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

  • Podziel tekst na mniejsze fragmenty, które użytkownicy mogą szybko przeskanować.
  • Używaj jasnego tekstu na ciemnym tle. Ten styl łatwiej odczytać na telewizorze.
  • Unikaj lekkich czcionek oraz tych, które zawierają zarówno bardzo wąskie, jak i bardzo szerokie kreski. Zastosuj proste czcionki bezszeryfowe i anti-aliasing, aby zwiększyć czytelność.
  • 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"/>
  • Dopilnuj, aby wszystkie widżety były wystarczająco duże, aby były wyraźnie widoczne dla innych osób w odległości 3 metrów od ekranu. najlepszym sposobem jest użycie rozmiaru zależnego od układu zamiast rozmiaru bezwzględnego. niezależnej od gęstości jednostek pikseli (dp), a nie bezwzględnych jednostek pikseli. Aby na przykład ustawić parametr szerokości widżetu, użyj wrap_content zamiast pomiaru w pikselach i ustaw dla 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 do obsługi większych rozmiarów ekranu, zapoznaj się z sekcją Zgodność 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ą między innymi 720p, 1080p i 4K. Upewnij się, że aplikacja obsługuje różne rozmiary ekranów.

Różne rozmiary i rozdzielczości ekranu mają różną gęstość pikseli. Aby zachować wygląd interfejsu użytkownika na różnych rozmiarach, rozdzielczościach i gęstości pikseli, zdefiniuj pomiary za pomocą niezależnych od gęstości (dp), a nie pikseli. Gęstość pikseli ekranu dla różnych paneli TV dostępne rozwiązania są podane poniżej.

Rozdzielczość panelu Gęstość pikseli ekranu
720p tvdpi
1080 xhdpi
4K xxxhdpi
Zobacz Obsługuj różne gęstości pikseli w przypadku: znajdziesz więcej informacji.

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

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

Jest kilka sposobów tworzenia układów, które nie działają na telewizorach. Oto kilka sposobów na to, unikanie przy projektowaniu układu graficznego na telewizory.

  • Ponowne wykorzystywanie układów na telefonie lub tablecie: nie używaj ponownie układów z telefonu ani bez modyfikacji. Układy utworzone na potrzeby innych formatów urządzeń z Androidem nie są dobrze nadaje się do wyświetlania na urządzeniach telewizyjnych i musi być prostsza w obsłudze na telewizorze.
  • Korzystanie z narzędzia ActionBar: zalecamy używanie pasków działań na telefonach i tabletach, nie nadają się do używania z interfejsem telewizora. Za pomocą za pomocą menu opcji na pasku działań ani żadnego menu. Zdecydowanie odradzamy korzystanie w przypadku aplikacji na telewizory, na trudność w poruszaniu się po takim menu za pomocą pilota.
  • W aplikacji ViewPager: przełączanie się między ekranami świetnie się sprawdza na telefonach i tabletach. ale nie próbujcie tego na telewizorze.

Więcej informacji na temat projektowania układów odpowiednich dla ekranów telewizyjnych znajdziesz w Przewodnik po projektowaniu telewizorów.

Obsługa dużych map bitowych

Telewizory, podobnie jak inne urządzenia z Androidem, mają ograniczoną ilość pamięci. Jeśli utworzysz układ aplikacji z obrazami o bardzo wysokiej rozdzielczości lub używanie wielu obrazów o wysokiej rozdzielczości; może szybko przekroczyć limit pamięci i spowodować błędy jej braku. Większość przypadków, zalecamy użycie funkcji Glide do pobierania, dekodowania i wyświetlania map bitowych w aplikacji. Aby dowiedzieć się więcej o uzyskiwaniu najlepszą wydajność podczas pracy z mapami bitowymi zapoznaj się z naszymi ogólnymi Sprawdzone metody dotyczące grafiki na Androida.

Zadbaj o skuteczną reklamę

W salonie zalecamy korzystanie z rozwiązań reklam wideo które wyświetlają się na pełnym ekranie i można je zamknąć w ciągu 30 sekund. Funkcje usługi reklamy w Android TV, np. przyciski zamykania i klikalności, muszą być można użyć pada kierunkowego zamiast dotykowego.

Android TV nie zawiera przeglądarki. Reklamy nie mogą podejmować prób uruchomić przeglądarkę lub przekierować do Sklepu Google Play treści, które nie są zatwierdzonych na urządzenia z Androidem TV.

Uwaga: możesz użyć zajęć WebView dotyczące logowania się w serwisach społecznościowych.

Dodatkowe materiały

Projektowanie na telewizor

Wstecz
Sprawdzone metody zwiększania zaangażowania w Google TV
Dalej
Przejdź do tworzenia na telewizorze