Diese Seite wurde von der Cloud Translation API übersetzt.

Layouts im Leanback-UI-Toolkit

Ein Fernseher wird in der Regel aus einer Entfernung von etwa 3 Metern betrachtet. Obwohl er viel größer als die meisten anderen Displays von Android-Geräten ist, bietet er nicht dasselbe Maß an Detail und Farbe wie ein kleineres Display. Aus diesen Gründen müssen Sie App-Layouts für TV-Geräte erstellen, um eine nützliche und angenehme Nutzererfahrung zu bieten.

Layout-Designs für Fernseher verwenden

Android-Designs können als Grundlage für Layouts in Ihren TV-Apps dienen. Mit einem Theme können Sie die Darstellung Ihrer App-Aktivitäten ändern, die auf einem Fernseher ausgeführt werden sollen. In diesem Abschnitt wird erläutert, welche Designs verwendet werden sollten.

Leanback-Thema

Die eingestellte androidx.leanback-Bibliothek enthält Theme.Leanback, ein Design für TV-Aktivitäten, das einen einheitlichen visuellen Stil für Apps mit dem Leanback-UI-Toolkit bietet. Verwenden Sie dieses Theme für alle TV-Apps, die mit den AndroidX Leanback-Klassen erstellt wurden. Das folgende Codebeispiel zeigt, wie Sie dieses Design auf eine Aktivität anwenden:

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

NoTitleBar-Design

Die Titelleiste ist ein Standard-UI-Element für Android-Apps auf Smartphones und Tablets, aber nicht für TV-Apps. Wenn Sie keine AndroidX Leanback-Klassen verwenden, wenden Sie das NoTitleBar-Design auf Ihre TV-Activities an, um die Anzeige einer Titelleiste zu unterdrücken. Das folgende Codebeispiel aus einem TV-App-Manifest zeigt, wie dieses Design angewendet wird, um die 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-Themes verwendet. Mit dieser Kombination können Sie Funktionen wie das Einfärben von Drawables verwenden, ohne sich Gedanken über die Android-Version auf dem Gerät machen zu müssen. Wenn Sie eine App entwickeln, die nur auf Android TV ausgeführt wird, verwenden Sie AppCompatActivity nicht, da die Funktionen, die dadurch aktiviert werden, entweder bereits auf Android TV verfügbar oder nicht relevant sind.

Wenn Sie eine App mit einer gemeinsamen Codebasis für Android-Mobilgeräte und Android TV entwickeln, kann es aufgrund der Gestaltung zu Problemen kommen. Für AppCompatActivity und die verschiedenen AppCompat-Widgets müssen Sie Theme.AppCompat verwenden. Für die Fragmente des Leanback UI-Toolkits müssen Sie FragmentActivity und Theme.Leanback verwenden.

Wenn Sie dieselbe Basisaktivität für Android-Mobilgeräte und Android TV verwenden müssen oder benutzerdefinierte Ansichten basierend auf AppCompat-Widgets wie AppCompatImageView verwenden möchten, verwenden Sie die Theme.AppCompat.Leanback-Designs. Diese Designs enthalten alle Designfunktionen von AppCompat und bieten auch die Leanback-spezifischen Werte.

Sie können Theme.AppCompat.Leanback-Designs auf dieselbe Weise anpassen wie jedes andere Design. Wenn Sie beispielsweise Werte ändern möchten, die für das OnboardingSupportFragment des Leanback-UI-Toolkits spezifisch sind, gehen Sie 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 auf großen Bildschirmen nutzbar und effektiv sind. Mit den folgenden Tipps können Sie Layouts erstellen, die für Fernseher optimiert sind:

Layouts im Querformat erstellen Auf Fernsehbildschirmen wird immer das Querformat angezeigt.
Platzieren Sie die Navigationssteuerelemente auf dem Bildschirm links oder rechts, um vertikalen Platz für Inhalte zu sparen.
Erstellen Sie Benutzeroberflächen, die mit Fragmenten in Abschnitte unterteilt sind. Verwenden Sie Ansichtsgruppen wie GridView anstelle von ListView, um den horizontalen Bildschirmplatz besser zu nutzen.
Verwenden Sie Ansichtsgruppen wie RelativeLayout oder LinearLayout, um Ansichten anzuordnen. So kann das System die Position der Ansichten an die Größe, Ausrichtung, das Seitenverhältnis und die Pixeldichte eines Fernsehbildschirms anpassen.
Fügen Sie zwischen den Layout-Steuerelementen ausreichend Ränder ein, um eine überladene Benutzeroberfläche zu vermeiden.

Overscan

Für Layouts für Fernseher gelten aufgrund der Entwicklung von TV-Standards zur Darstellung eines Vollbilds für Zuschauer einige besondere Anforderungen. Aus diesem Grund kann es bei TV-Geräten vorkommen, dass der äußere Rand eines App-Layouts abgeschnitten wird, damit das gesamte Display ausgefüllt wird. Dieses Verhalten wird allgemein als Overscan bezeichnet.

Positionieren Sie Bildschirmelemente, die für den Nutzer jederzeit sichtbar sein müssen, im Overscan-sicheren Bereich. Wenn Sie einem Layout einen Rand von 5% mit 48 dp an den linken und rechten Kanten und 27 dp an den oberen und unteren Kanten hinzufügen, befinden sich die Bildschirmelemente im Layout im Overscan-sicheren Bereich.

Passen Sie keine Elemente des Hintergrundbildschirms an, mit denen der Nutzer nicht direkt interagiert, und schneiden Sie die Elemente nicht auf den Overscan-sicheren Bereich zu. So wird sichergestellt, dass die Elemente des Hintergrundbildschirms auf allen Bildschirmen korrekt aussehen.

Das folgende Beispiel zeigt ein Stammlayout, das Hintergrundelemente und ein verschachteltes untergeordnetes Layout mit einem Rand von 5% enthalten kann und Elemente im Overscan-sicheren Bereich 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 keine Overscan-Ränder auf Ihr Layout an, wenn Sie die AndroidX Leanback-Klassen wie BrowseSupportFragment oder zugehörige Widgets verwenden, da diese Layouts bereits Overscan-sichere Ränder enthalten.

Nutzerfreundliche Texte und Steuerelemente erstellen

Mit diesen Tipps können Sie dafür sorgen, dass Text und Steuerelemente in Ihrer TV-App auch aus der Ferne gut zu sehen sind:

Teilen Sie Text in kleine Abschnitte auf, die Nutzer schnell überfliegen können.
Verwenden Sie hellen Text auf dunklem Hintergrund. Dieser Stil ist auf einem Fernseher besser lesbar.
Vermeiden Sie dünne Schriftarten oder Schriftarten mit sehr schmalen und sehr breiten Strichen. Verwenden Sie einfache serifenlose Schriftarten und Anti-Aliasing, um die Lesbarkeit zu verbessern.

Standard-Schriftgrößen von Android verwenden:

<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"/>

Alle Ansichtswidgets müssen groß genug sein, damit sie für Personen, die 3 Meter vom Bildschirm entfernt sitzen, gut sichtbar sind. Am besten verwenden Sie dazu layoutbezogene Größen anstelle von absoluten Größen und dichteunabhängige Pixel (dp) anstelle von absoluten Pixeln. Wenn Sie beispielsweise die Breite eines Widgets festlegen möchten, verwenden Sie wrap_content anstelle einer Pixelmessung. Wenn Sie den Rand eines Widgets festlegen möchten, verwenden Sie dp-Werte anstelle von px-Werten.

Weitere Informationen zu dichteunabhängigen Pixeln und zum Erstellen von Layouts für größere Displays finden Sie unter Übersicht zur Bildschirmkompatibilität.

Layoutressourcen für TV verwalten

Wie alle anderen Android-Geräte haben auch Fernseher unterschiedliche Bildschirmgrößen und unterstützen unterschiedliche Auflösungen, darunter 720p, 1080p und 4K. Achten Sie darauf, dass Ihre App verschiedene Bildschirmgrößen unterstützt.

Bei unterschiedlichen Bildschirmgrößen und Auflösungen sind die Pixeldichten unterschiedlich. Damit die Benutzeroberfläche auf allen Bildschirmgrößen, Auflösungen und Pixeldichten gleich aussieht, sollten Sie die UI-Abmessungen in dichteunabhängigen Pixeln (dp) statt in Pixeln definieren. Die Pixeldichte des Bildschirms für verschiedene Auflösungen von TV-Panels ist unten aufgeführt.

Auflösung des Displays	Pixeldichte des Displays
720p	`tvdpi`
1080	`xhdpi`
4K	`xxxhdpi`

Weitere Informationen

Weitere Informationen zum Optimieren von Layouts und Ressourcen für große Displays finden Sie unter Bildschirmkompatibilität – Übersicht.

Zu vermeidende Layoutmuster

Es gibt einige Ansätze zum Erstellen von Layouts, die auf Fernsehern nicht gut funktionieren. Im Folgenden finden Sie einige Ansätze für die Benutzeroberfläche, die Sie bei der Entwicklung eines Layouts für den Fernseher vermeiden sollten.

Layouts von Smartphones oder Tablets wiederverwenden:Layouts aus einer Smartphone- oder Tablet-App dürfen nicht ohne Änderungen wiederverwendet werden. Layouts, die für andere Android-Geräteformfaktoren entwickelt wurden, eignen sich nicht gut für Fernseher und müssen für die Bedienung auf einem Fernseher vereinfacht werden.
Verwendung von ActionBar:Aktionsleisten werden für Smartphones und Tablets empfohlen, sind aber für eine TV-Benutzeroberfläche nicht geeignet. Die Verwendung eines Optionsmenüs in der Aktionsleiste oder eines beliebigen Drop-down-Menüs wird für TV-Apps dringend abgeraten, da die Navigation in einem solchen Menü mit einer Fernbedienung schwierig ist.
ViewPager verwenden:Das Wischen zwischen Bildschirmen kann auf einem Smartphone oder Tablet gut funktionieren, aber versuche es nicht auf einem Fernseher.

Weitere Informationen zum Entwerfen von Layouts für Fernseher findest du im Leitfaden zum TV-Design.

Große Bitmaps verarbeiten

Fernseher haben wie andere Android-Geräte nur eine begrenzte Menge an Speicherplatz. Wenn Sie das App-Layout mit Bildern mit sehr hoher Auflösung erstellen oder viele Bilder mit hoher Auflösung in der App verwenden, kann es schnell zu Speicherbegrenzungen und Speichermangel kommen. In den meisten Fällen empfehlen wir, die Glide-Bibliothek zu verwenden, um Bitmaps in Ihrer App abzurufen, zu decodieren und darzustellen. Weitere Informationen zur optimalen Leistung bei der Arbeit mit Bitmaps finden Sie in unseren allgemeinen Best Practices für Android-Grafiken.

Effektive Werbung

Für die Nutzung im Wohnzimmer empfehlen wir Videoanzeigenlösungen, die im Vollbildmodus präsentiert und innerhalb von 30 Sekunden geschlossen werden können. Funktionen für Werbung auf Android TV, z. B. Schaltflächen zum Schließen und Clickthroughs, müssen über das Steuerkreuz und nicht per Touchscreen zugänglich sein.

Android TV bietet keinen Webbrowser. Ihre Anzeigen dürfen nicht versuchen, einen Webbrowser zu starten oder zu Google Play Store-Inhalten weiterzuleiten, die nicht für Android TV-Geräte zugelassen sind.

Hinweis:Sie können die Klasse WebView für Anmeldungen bei Social-Media-Diensten verwenden.