Ekran telewizora jest zazwyczaj oglądany z odległości około 3 metrów i chociaż jest znacznie większy niż większość innych urządzeń z Androidem, ekran telewizora nie zapewnia takiej samej szczegółowości i koloru jak mniejszy ekran urządzenia. Te czynniki wymagają tworzenia układów aplikacji z uwzględnieniem urządzeń telewizyjnych, aby zapewnić użytkownikom przydatne i komfortowe korzystanie z aplikacji.
Używanie motywów układu na potrzeby telewizora
Motywy na Androida mogą być podstawą układów w aplikacjach telewizyjnych. Użyj motywu, aby zmodyfikować sposób wyświetlania aktywności w aplikacji, która ma być uruchamiana 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 aktywności na telewizorze, który zapewnia spójny styl wizualny. Możesz go użyć w przypadku każdej aplikacji na telewizory utworzonej z klasami 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 to standardowy element interfejsu w aplikacjach na Androida na telefony i tablety, ale nie jest odpowiedni w przypadku aplikacji na telewizory. Jeśli nie używasz klas Leanback w AndroidzieX, zastosuj do swoich działań na telewizorze motyw NoTitleBar, aby ukryć pasek tytułu. Ten przykładowy kod z pliku manifestu aplikacji na telewizor 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 często używane jest AppCompatActivity razem z jednym z motywów Theme.AppCompat. Ta kombinacja umożliwia korzystanie z funkcji takich jak zabarwienie rysunkowe, nie martwiąc się 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 są w nim przydatne.
Jeśli tworzysz aplikację, która korzysta ze wspólnej bazy kodu dla aplikacji na urządzenia mobilne z Androidem i Androida TV, możesz napotkać pewne problemy związane z ich motywami. AppCompatActivity i różne widżety AppCompat wymagają użycia Theme.AppCompat, natomiast fragmenty narzędzi interfejsu Leanback wymagają użycia FragmentActivity i Theme.Leanback.
Jeśli musisz stosować tę samą podstawową aktywność na urządzeniach mobilnych z Androidem i Androidzie TV lub chcesz korzystać z widoków niestandardowych opartych na widżetach AppCompat, takich jak AppCompatImageView, użyj motywów Theme.AppCompat.Leanback. Te motywy zawierają wszystkie motywy z AppCompat oraz wartości charakterystyczne dla Leanback.
Motywy Theme.AppCompat.Leanback możesz dostosowywać w taki sam sposób jak każdy inny motyw. Jeśli na przykład chcesz zmienić wartości charakterystyczne dla OnboardingSupportFragment zestawu narzędzi interfejsu Leanback, wykonaj czynności podobne do tego:
<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 można było korzystać z nich 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ą po lewej lub prawej stronie ekranu i zaoszczędź miejsce w pionie na treść.
- Twórz interfejsy użytkownika podzielone na sekcje za pomocą fragmentów. Aby lepiej wykorzystać poziomą przestrzeń na ekranie, używaj grup widoków takich jak
GridViewzamiastListView. - Aby rozmieszczać widoki, możesz używać grup widoków, takich jak
RelativeLayoutlubLinearLayout. Dzięki temu system może dostosować pozycję widoków do rozmiaru, wyrównania, formatu obrazu i gęstości 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 telewizory mają szczególne wymagania ze względu na ewolucję standardów telewizyjnych w zakresie wyświetlania widzom obrazu pełnoekranowego. Z tego powodu urządzenia telewizyjne mogą przycinać zewnętrzną krawędź układu aplikacji, by cały ekran był zapełniony. To zachowanie nazywa się nadmiarowym skanowaniem.
Elementy ekranu, które muszą być zawsze widoczne dla użytkownika, umieść w obszarze zapewniającym ochronę przed przeskanowaniem. Dodanie 5% marginesu 48 dp na lewej i prawej krawędzi oraz 27 dp (górnej i dolnej) do układu pomaga zapewnić, że elementy ekranu w układzie znajdują się w obszarze zapewniającym nadmiarowość obrazu.
Nie dostosowuj elementów ekranu tła, z którymi użytkownik nie wchodzi w bezpośrednią interakcję, ani nie przycinaj ich do obszaru, w którym można uzyskać nadmiarowość obrazu. Dzięki temu będziesz mieć pewność, że elementy tła na ekranie będą wyglądały poprawnie na wszystkich ekranach.
Ten przykład przedstawia układ główny, który może zawierać elementy tła oraz zagnieżdżony układ podrzędny z 5% marginesem i elementami w obszarze zapewniającym ochronę nad ekranem:
<?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 klas Leanback w AndroidzieX, takich jak BrowseSupportFragment, lub powiązanych widżetów, ponieważ układy te zawierają już marginesy z zabezpieczeniem nad skanowaniem.
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"/> - Wszystkie widżety powinny być na tyle duże, aby były wyraźnie widoczne dla osób siedzących z odległości co najmniej 3 metrów od ekranu. Najlepszym sposobem, aby to zrobić, jest użycie rozmiaru zależnego od układu zamiast rozmiaru bezwzględnego i niezależne od gęstości jednostek pikseli (dp) zamiast bezwzględnych jednostek pikseli. Aby na przykład ustawić szerokość widżetu, użyj parametru
wrap_contentzamiast pomiaru w pikselach, a do ustawienia marży 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 dostosowanych do większych ekranów znajdziesz w artykule Omówienie zgodności ekranu.
Zarządzanie zasobami układu na potrzeby telewizora
Podobnie jak wszystkie inne urządzenia z Androidem, telewizory mają różne rozmiary ekranu i rozdzielczości, w tym 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 na ekranach o różnych rozmiarach, rozdzielczości i gęstości pikseli, określ pomiary interfejsu przy użyciu pikseli niezależnych od gęstości (dp), a nie pikseli. Poniżej znajdziesz gęstość pikseli ekranu dla różnych rozdzielczości panelu TV.
| Rozdzielczość panelu | Gęstość pikseli ekranu |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
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ć
Jest kilka sposobów tworzenia układów, które nie sprawdzają się na telewizorach. Oto niektóre podejścia do interfejsu, których należy unikać podczas projektowania układu na telewizory.
- Ponowne wykorzystywanie układów na telefony lub tablety: nie wykorzystuj ponownie układów z aplikacji na telefony lub tablety bez modyfikacji. Układy utworzone na potrzeby innych formatów urządzeń z Androidem nie nadają się do wyświetlania na telewizorach i trzeba je uprościć.
- Za pomocą
ActionBar: paski działań są zalecane do używania na telefonach i tabletach, ale nie nadają się do używania z interfejsem telewizora. W przypadku aplikacji na telewizory zdecydowanie odradzamy korzystanie z menu opcji paska działań lub jakiegokolwiek menu rozwijanego, ponieważ poruszanie się po takim menu za pomocą pilota staje się trudne. - Za pomocą
ViewPager: przesuwanie między ekranami może świetnie działać na telefonie lub tablecie, ale nie próbujcie tego na telewizorze.
Więcej informacji o projektowaniu układów odpowiednich do wyświetlania na telewizorze znajdziesz w przewodniku 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 tworzysz układ aplikacji z obrazami o bardzo wysokiej rozdzielczości lub używasz wielu takich obrazów, może to szybko przekroczyć limity pamięci i spowodować błędy jej braku. 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 optymalnej wydajności pracy z mapami bitowymi znajdziesz w naszych ogólnych sprawdzonych metodach dotyczących grafiki na Androida.
Zadbaj o skuteczną reklamę
W salonie zalecamy korzystanie z reklam wideo, które są wyświetlane na pełnym ekranie i można je zamknąć w ciągu 30 sekund. Funkcje reklamowe w Androidzie TV, takie jak przyciski zamykania i kliknięć, muszą być dostępne za pomocą pada kierunkowego, a nie dotyku.
Android TV nie zawiera przeglądarki. Reklamy nie mogą uruchamiać przeglądarki ani przekierowywać do treści ze Sklepu 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.