Ein Fernsehbildschirm wird in der Regel aus einer Entfernung von etwa 3 Metern betrachtet und ist zwar viel größer als die meisten anderen Bildschirme, Displays anderer Android-Geräte, bietet ein TV-Bildschirm nicht die gleichen wie auf einem kleineren Gerätebildschirm dargestellt wird. Diese Faktoren erfordern das Erstellen von App-Layouts mit TV-Geräte, um eine nützliche und angenehme Nutzererfahrung zu bieten.
Layoutdesigns für TV verwenden
Android-Designs können eine Grundlage für in Ihren TV-Apps. Sie können ein Design verwenden, um die Darstellung Ihrer App-Aktivitäten zu ändern, für die Schaltung auf einem TV-Gerät bestimmt sind. In diesem Abschnitt wird erläutert, welche Themen Sie verwenden sollten.
Leanback-Design
Die androidx.leanback-Bibliothek enthält Theme.Leanback, ein Design für TV-Aktivitäten, die
einen einheitlichen visuellen Stil bietet. Dieses Design für jede TV-App verwenden
mit den AndroidX Leanback-Klassen. Das folgende Codebeispiel zeigt, wie dieses Design
Aktivität:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar-Design
Die Titelleiste ist ein standardmäßiges Benutzeroberflächenelement für Android-Apps auf Smartphones und Tablets,
ist für TV-Apps nicht geeignet. Wenn Sie keine AndroidX Leanback-Klassen verwenden, wenden Sie die
NoTitleBar hinzufügen, um die Anzeige einer Titelleiste zu unterdrücken. Das folgende Codebeispiel
aus einem TV-App-Manifest zeigt, wie dieses Design angewendet wird, um die Anzeige einer Titelleiste zu entfernen:
<application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application>
AppCompat-Designs
In mobilen Android-Apps wird häufig
AppCompatActivity
zusammen mit einem der Theme.AppCompat-Themen. Mit dieser Kombination können Sie Funktionen
Du brauchst dir keine Gedanken darüber zu machen, welche Android-Version auf dem Gerät läuft. Wenn Sie
eine App entwickeln, die nur mit Android TV läuft, verwenden Sie
AppCompatActivity, da die dadurch aktivierten Funktionen entweder bereits auf
Android TV oder nicht relevant ist.
Wenn Sie eine App mit einer gemeinsamen Codebasis für Android-Mobilgeräte und Android TV erstellen, können Sie
durch Themes zu Herausforderungen führen. AppCompatActivity und die verschiedenen
AppCompat-Widgets erfordern die Verwendung von Theme.AppCompat. Für das
Die Fragmente des Leanback-UI-Toolkits erfordern die Verwendung
FragmentActivity
und Theme.Leanback.
Wenn Sie für Android-Mobilgeräte und Android TV dieselbe Basisaktivität verwenden möchten
benutzerdefinierte Ansichten basierend auf AppCompat Widgets wie
AppCompatImageView,
Theme.AppCompat.Leanback-Designs verwenden. Diese Themen liefern Ihnen alle Themen,
aus AppCompat abrufen und außerdem die Leanback-spezifischen Werte angeben.
Du kannst Theme.AppCompat.Leanback-Designs genauso wie andere Designs anpassen
aus. Wenn Sie beispielsweise Werte ändern möchten, die für das
Leanback-UI-Toolkit
OnboardingSupportFragment,
gehen Sie in etwa so vor:
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
Einfache TV-Layouts erstellen
Layouts für TV-Geräte müssen einigen grundlegenden Richtlinien entsprechen, damit sie nutzungsfreundlich und Bildschirmen effektiv einsetzen. Befolgen Sie diese Tipps, um für TV-Bildschirme optimierte Layouts zu erstellen:
- Erstellen Sie Layouts im Querformat. Fernsehbildschirme werden immer im Querformat angezeigt.
- Platzieren Sie die Navigationsbedienelemente links oder rechts auf dem Bildschirm und speichern Sie die vertikalen Platz für den Inhalt.
- Erstellen Sie Benutzeroberflächen, die mithilfe von Fragmenten in Abschnitte unterteilt sind. Sie können Datenansichtsgruppen wie
GridViewstattListViewum den horizontalen Bildschirm besser zu nutzen. - Sie können Datenansichtsgruppen wie
RelativeLayoutoderLinearLayoutum Ansichten anzuordnen. Auf diese Weise kann das System die Position der Ansichten an die Größe anpassen, Ausrichtung, Seitenverhältnis und Pixeldichte eines TV-Bildschirms. - Fügen Sie ausreichende Ränder zwischen Layout-Steuerelementen ein, um eine überladene Benutzeroberfläche zu vermeiden.
Overscan
Layouts für Fernseher haben aufgrund der Entwicklung der TV-Standards einige besondere Anforderungen: die Vollbildansicht vergrößern. Aus diesem Grund kann es sein, dass Fernsehgeräte den Außenrand einer App beschneiden. um sicherzustellen, dass der gesamte Bildschirm ausgefüllt ist. Dieses Verhalten wird im Allgemeinen overscan verwenden.
Positionieren Sie Bildschirmelemente, die für den Nutzer jederzeit sichtbar sein müssen, innerhalb des Overscan-Sicherheitssystems Bereich. Ein zusätzlicher Rand von 5% von 48 dp am linken und rechten Rand und 27 dp oben und unten Ränder eines Layouts trägt dazu bei, dass Bildschirmelemente im Layout innerhalb des Overscan-sicher sind Bereich.
Passen Sie Bildschirmelemente im Hintergrund nicht an, mit denen die Nutzenden nicht direkt interagieren, und beschneiden Sie sie nicht. Elemente in den Overscan-Sicherheitsbereich verschieben. Dieser Ansatz trägt dazu bei, dass die Elemente des Hintergrundbildschirms korrekt aussehen, auf allen Bildschirmen.
Das folgende Beispiel zeigt ein Stammlayout, das Hintergrundelemente und ein verschachteltes untergeordnetes Layout mit einem Rand von 5 %, das Elemente innerhalb des Overscan-Sicherheitsbereichs enthalten kann:
<?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>
Achtung:Wenden Sie Overscan-Ränder nicht auf Ihr Layout an, wenn Sie die
AndroidX Leanback-Klassen wie
BrowseSupportFragment
oder ähnliche Widgets, da diese Layouts bereits über Scansichere Ränder verfügen.
Verwendbare Texte und Steuerelemente erstellen
Mit den folgenden Tipps können Sie den Text und die Steuerelemente in Ihrer TV-App auch aus der Ferne besser erkennen:
- Teilen Sie Text in kleine Blöcke auf, die Nutzer schnell überfliegen können.
- Hellen Text auf dunklem Hintergrund verwenden Dieser Stil ist auf einem Fernseher besser lesbar.
- Vermeiden Sie Schriftarten mit sehr schmaler und breit gefasster Kontur. Verwenden Sie einfache Sans-Serif-Schriftarten und Kantenglättung, um die Lesbarkeit zu verbessern.
- Verwenden Sie die Standardschriftgrößen von Android:
<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"/>
- Gestalten Sie alle Ansichts-Widgets so groß, dass sie für andere deutlich sichtbar sind.
3 Meter vom Bildschirm entfernt. Die
Verwenden Sie dazu am besten die layoutbezogene Größe statt der absoluten Größenanpassung.
dichteunabhängige Pixeleinheiten (dp) anstelle von absoluten Pixeleinheiten. Um beispielsweise den Parameter
eines Widgets verwenden, verwenden Sie
wrap_contentanstelle eines Pixelmaßes und legen Sie für ein Widget, verwenden Sie dp-Werte anstelle von px-Werten.
Weitere Informationen zu dichteunabhängigen Pixeln und Gebäudelayouts für die Verarbeitung größerer Bildschirmgrößen, siehe Bildschirmkompatibilität Übersicht.
Layoutressourcen für TV verwalten
Wie alle anderen Android-Geräte haben Fernseher unterschiedliche Bildschirmgrößen und unterstützen unterschiedliche unter anderem 720p, 1080p und 4K. Achten Sie darauf, dass Ihre App unterschiedliche Bildschirmgrößen unterstützt.
Verschiedene Bildschirmgrößen und -auflösungen haben unterschiedliche Pixeldichten. Um das Aussehen der Bildschirmgrößen, Auflösung und Pixeldichten anpassen, UI-Messungen mit dichteunabhängige Pixel (dp) anstelle von Pixeln. Die Bildschirmpixeldichte für verschiedene TV-Bildschirme Lösungen finden Sie weiter unten.
| Bereichsauflösung | Bildschirm-Pixeldichte |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Weitere Informationen zum Optimieren von Layouts und Ressourcen für große Bildschirme finden Sie unter Bildschirmkompatibilität
Zu vermeidende Layoutmuster
Es gibt einige Ansätze, um Layouts zu erstellen, die nicht funktionieren. auch auf Fernsehern. Hier einige Ansätze auf der Benutzeroberfläche, die Sie bei der Entwicklung eines Layouts für TV vermeiden sollten.
- Smartphone- oder Tablet-Layouts wiederverwenden: Verwenden Sie keine Layouts von Smartphones oder Tablets. Tablet-App unverändert lassen. Layouts, die für andere Formfaktoren von Android-Geräten erstellt wurden, gut für TV-Geräte geeignet ist und für die Nutzung auf einem Fernseher vereinfacht werden muss.
ActionBarverwenden: Aktionsleisten werden empfohlen. auf Smartphones und Tablets sind sie für eine Fernsehoberfläche nicht geeignet. Bei Verwendung eines der Aktionsleisten-Optionen oder eines Dropdown-Menüs wird für TV-Apps aus folgenden Gründen dringend abgeraten. die Bedienung eines solchen Menüs mit einer Fernbedienung.- Mit
ViewPager: Auf Smartphones oder Tablets kannst du beispielsweise zwischen Bildschirmen wechseln. aber probiere das nicht auf einem Fernseher aus!
Weitere Informationen zum Entwerfen von Layouts, die für das Fernsehen geeignet sind, finden Sie in der TV-Design-Leitfaden.
Große Bitmaps verarbeiten
Fernseher und andere Android-Geräte haben nur einen begrenzten Speicherplatz. Wenn Sie Ihre eigene mit sehr hochauflösenden Bildern oder vielen hochauflösenden Bildern Ihrer App können schnell Speicherlimits überschritten werden und es kommt zu Speicherfehlern. Für die meisten empfehlen wir die Verwendung von Glide zum Abrufen, Decodieren und Anzeigen von Bitmaps in Ihrer App. Weitere Informationen zum Abrufen der beste Leistung bei der Arbeit mit Bitmaps erzielen, finden Sie in unseren allgemeinen Best Practices für Android-Grafiken.
Effektive Werbung
Wir empfehlen Lösungen für Videoanzeigen im Wohnzimmer. die im Vollbildmodus angezeigt und innerhalb von 30 Sekunden geschlossen werden können. Funktionalität für für Anzeigen auf Android TV, wie z. B. Schließen-Schaltflächen und Klicks, statt mit dem Steuerkreuz.
Android TV bietet keinen Webbrowser. Mit Ihren Anzeigen darf nicht versucht werden, einen Webbrowser öffnen oder zu Google Play Store-Inhalten weiterleiten, die nicht für Android TV-Geräte genehmigt.
Hinweis:Sie können den Kurs WebView verwenden.
um sich in sozialen Medien anzumelden.