Ekran telewizora jest zwykle oglądany z odległości około 3 metrów. Chociaż jest on znacznie większy niż większość wyświetlaczy innych urządzeń z Androidem, nie zapewnia takiego samego poziomu szczegółowości i kolorów jak mniejszy ekran urządzenia. Z tych powodów musisz tworzyć układy aplikacji z myślą o urządzeniach TV, aby zapewnić użytkownikom wygodę i przyjemność korzystania z aplikacji.
Używanie motywów układu na telewizorze
Motywy Androida mogą stanowić podstawę układów w aplikacjach na telewizor. Użyj motywu, aby zmodyfikować wyświetlanie aktywności aplikacji, które mają być uruchamiane na urządzeniu TV. W tej sekcji wyjaśniamy, których motywów należy używać.
Motyw Leanback
Wycofana biblioteka androidx.leanback zawiera Theme.Leanback,
czyli motyw dla aktywności telewizyjnych, który zapewnia spójny styl wizualny aplikacji korzystających z zestawu narzędzi Leanback UI. Użyj tego motywu w każdej aplikacji TV utworzonej za pomocą 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 użytkownika w aplikacjach na Androida na telefony i tablety, ale nie
nadaje się do aplikacji na telewizor. Jeśli nie używasz klas AndroidX Leanback, zastosuj motyw
NoTitleBar do aktywności telewizyjnych, aby ukryć pasek tytułu. Poniższy przykład kodu
z 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ę
AppCompatActivity
wraz z jednym z motywów Theme.AppCompat. To połączenie umożliwia korzystanie z funkcji takich jak kolorowanie obiektów rysowalnych 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 włącza, są już dostępne na Androidzie TV lub nie są istotne.
Jeśli tworzysz aplikację ze wspólną bazą kodu na Androida i Androida TV, możesz napotkać
pewne problemy związane z motywami. AppCompatActivity i różne
AppCompat widżety wymagają użycia Theme.AppCompat, natomiast
fragmenty zestawu narzędzi Leanback UI oczekują użycia
FragmentActivity
i Theme.Leanback.
Jeśli musisz użyć tej samej aktywności bazowej na Androidzie i Androidzie TV lub chcesz używać
widoków niestandardowych opartych na AppCompat widżetach, takich jak
AppCompatImageView,
użyj motywów Theme.AppCompat.Leanback. Te motywy zapewniają wszystkie motywy
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 specyficzne dla
zestawu narzędzi Leanback UI
OnboardingSupportFragment,
wykonaj podobne czynności jak te:
<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 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 telewizyjnych, postępuj zgodnie z tymi wskazówkami:
- Twórz układy w orientacji poziomej. Ekrany telewizyjne zawsze wyświetlają obraz w trybie poziomym.
- Umieść elementy sterujące nawigacją na ekranie po lewej lub prawej stronie ekranu i zachowaj miejsce w pionie na treści.
- Twórz interfejsy użytkownika podzielone na sekcje za pomocą fragmentów. Aby lepiej wykorzystać poziomą przestrzeń ekranu, używaj grup widoków takich jak
GridViewzamiastListView. - Do rozmieszczania widoków używaj grup widoków takich jak
RelativeLayoutlubLinearLayout. Dzięki temu system może dostosować 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 telewizor mają pewne unikalne wymagania wynikające z ewolucji standardów telewizyjnych, które mają na celu wyświetlanie obrazu na pełnym ekranie. Z tego powodu urządzenia TV mogą przycinać zewnętrzną krawędź układu aplikacji, aby zapewnić wypełnienie całego wyświetlacza. To zachowanie jest zwykle określane jako nadmiarowość obrazu.
Umieść elementy ekranu, które muszą być zawsze widoczne dla użytkownika, w bezpiecznym obszarze nadmiarowości obrazu. Dodanie do układu marginesu 5% (48 dp) po lewej i prawej stronie oraz 27 dp u góry i u dołu pomaga zapewnić, że elementy ekranu w układzie znajdują się w bezpiecznym obszarze nadmiarowości obrazu.
Nie dostosowuj elementów ekranu w tle, z którymi użytkownik nie wchodzi bezpośrednio w interakcję, i nie przycinaj elementów do bezpiecznego obszaru nadmiarowości obrazu. 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 w tle, oraz zagnieżdżony układ podrzędny z marginesem 5%, który może zawierać elementy w bezpiecznym obszarze nadmiarowości 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: jeśli używasz klas AndroidX Leanback, takich jak
BrowseSupportFragment
lub powiązane widżety, nie stosuj marginesów nadmiarowości obrazu do układu, ponieważ te układy już zawierają bezpieczne marginesy nadmiarowości obrazu.
Tworzenie użytecznego tekstu i elementów sterujących
Aby tekst i elementy sterujące w aplikacji TV były lepiej widoczne z daleka, postępuj zgodnie z tymi wskazówkami:
- Podziel tekst na małe fragmenty, które użytkownicy mogą szybko skanować.
- 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"/>
- Upewnij się, że wszystkie widżety są wystarczająco duże, aby były dobrze widoczne dla osoby
siedzącej 3 metry od ekranu. Najlepszym sposobem na to jest używanie rozmiarów względnych w układzie zamiast rozmiarów 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_contentzamiast 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 ekranem.
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 użytkownika na ekranach o różnych rozmiarach, rozdzielczościach i gęstościach pikseli, zdefiniuj wymiary interfejsu użytkownika za pomocą pikseli niezależnych od gęstości (dp) zamiast pikseli. Poniżej znajdziesz gęstość pikseli ekranu w przypadku różnych rozdzielczości panelu telewizora.
| Rozdzielczość panelu | Gęstość pikseli ekranu |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
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 sposobów tworzenia układów, które nie działają dobrze na urządzeniach TV. Oto kilka podejść do interfejsu użytkownika, których należy unikać podczas tworzenia układu na telewizor:
- Ponowne używanie układów telefonu lub tabletu: nie używaj ponownie układów z aplikacji na telefon lub tablet bez modyfikacji. Układy utworzone dla innych formatów urządzeń z Androidem nie są dobrze przystosowane do urządzeń TV i muszą zostać uproszczone, aby działały na telewizorze.
- Używanie
ActionBar: paski działań są zalecane do użycia na telefonach i tabletach, ale nie nadają się do interfejsu telewizora. Używanie menu opcji paska działań lub dowolnego menu rozwijanego jest zdecydowanie odradzane w przypadku aplikacji na telewizor ze względu na trudności w nawigacji po takim menu za pomocą pilota. - Używanie
ViewPager: przesuwanie między ekranami może działać świetnie na telefonie lub tablecie, ale nie próbuj tego na telewizorze!
Więcej informacji o projektowaniu układów odpowiednich dla telewizora znajdziesz w przewodniku projektowania na telewizor.
Obsługa dużych bitmap
Urządzenia TV, 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żyjesz wielu obrazów o wysokiej rozdzielczości w działaniu aplikacji, może ona szybko wyczerpać limit pamięci i spowodować błędy braku pamięci. W większości przypadków zalecamy używanie biblioteki Glide do pobierania, dekodowania i wyświetlania bitmap w aplikacji. Więcej informacji o uzyskiwaniu najlepszej wydajności podczas pracy z bitmapami znajdziesz w naszych ogólnych sprawdzonych metodach dotyczących grafiki na Androidzie.
Skuteczna reklama
W przypadku salonu zalecamy używanie rozwiązań reklamowych 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 dotyku.
Android TV nie udostępnia przeglądarki internetowej. Reklamy nie mogą próbować uruchamiać przeglądarki internetowej ani przekierowywać do treści w Sklepie Google Play, które nie są zatwierdzone na urządzeniach z Androidem TV.
Uwaga: do logowania się w usługach społecznościowych możesz używać klasy WebView.