テレビ画面は通常 3 メートルほど離れた場所から見るのが一般的で、ほとんどの画面よりはるかに大きいのが特徴です。 場合、テレビ画面は、他の Android 搭載デバイスと同じレベルを提供しません。 小さなデバイス画面ほどに 細部と色を表現できますこれらの要因から、アプリのレイアウトを 便利で楽しいユーザー エクスペリエンスを生み出します。
TV 向けのレイアウト テーマを使用する
Android テーマは、 カスタマイズすることもできます。テーマを使用して、アプリのアクティビティの表示を変更する テレビデバイス向けに設計されていますこのセクションでは、使用するテーマについて説明します。
Leanback テーマ
androidx.leanback ライブラリには、以下のテレビ アクティビティのテーマである Theme.Leanback が含まれています。
ビジュアル スタイルに一貫性があります。ビルドしたテレビアプリにこのテーマを使用できます
実装する方法を紹介します次のコードサンプルは、このテーマをスペースに適用する方法を示しています。
アクティビティ：
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
NoTitleBar テーマ
タイトルバーはスマートフォンやタブレットの Android アプリの標準的なユーザー インターフェース要素ですが、
テレビアプリには適していません。AndroidX Leanback クラスを使用していない場合は、
NoTitleBar テーマをテレビ アクティビティに追加して、タイトルバーの表示を抑制します。次のコード例
は、このテーマを適用してタイトルバーの表示を削除する方法を示しています。
<application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application>
AppCompat のテーマ
Android モバイルアプリでは、
AppCompatActivity
いずれかの Theme.AppCompat テーマを指定します。この組み合わせにより、
デバイスで実行されている Android のバージョンを気にすることなく、ドローアブルの色合いを調整できます。もし
Android TV でのみ動作するアプリを開発している場合は、
AppCompatActivity: 有効になっている機能は、
Android TV であるか、または無関係です。
Android モバイルと Android TV の間で共有コードベースを使用してアプリを作成する場合は、
いくつかの課題に直面しますAppCompatActivity と、
AppCompat ウィジェットでは Theme.AppCompat を使用する必要がありますが、
Leanback UI ツールキットのフラグメントでは、
FragmentActivity
および Theme.Leanback。
Android モバイルと Android TV で同じベース アクティビティを使用する必要がある場合や、
次のような AppCompat ウィジェットに基づくカスタムビュー
AppCompatImageView,
Theme.AppCompat.Leanback テーマを使用します。これらのテーマでは
AppCompat から取得し、Leanback 固有の値も指定します。
Theme.AppCompat.Leanback のテーマは、他のテーマと同様にカスタマイズできます
できます。たとえば、特定のエンティティに固有の値を変更する場合、
Leanback UI ツールキット
OnboardingSupportFragment,
次の操作を行います。
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
基本的な TV レイアウトをビルドする
TV デバイスのレイアウトは、使いやすく、使いやすくするために、いくつかの基本的なガイドラインに従う必要があります。 大きな画面でも効果的です以下のヒントを参考にして、テレビ画面に最適なレイアウトを作成します。
- 横向きでレイアウトをビルドします。TV スクリーンは常に横表示になります。
- 画面の左側または右側に画面上のナビゲーション コントロールを配置し、 コンテンツの縦方向のスペースを確保します。
- セクションに分割される UI は、フラグメントを使用して作成します。次のようなビューグループを使用します
GridView（ListViewの代わり） 横方向の画面スペースを有効に活用できます - 次のようなビューグループを使用します
RelativeLayoutまたはLinearLayoutビューを並べ替えることができますこの方法では、システムがビューの位置をサイズに合わせて調整し、 テレビ画面のアライメント、アスペクト比、ピクセル密度 - レイアウト コントロール間には十分なマージンを取り、UI が見やすくなるようにします。
オーバースキャン
テレビ向けのレイアウトには、 全画面表示されます。そのため、TV デバイスによってアプリの外側が切り取られることがあります。 レイアウトを調整する必要があります。この動作は一般に オーバースキャン。
常にユーザーに表示する必要がある画面要素をオーバースキャンセーフ内に配置する エリアです。左右の端に 48 dp、上下に 27 dp の 5% のマージンを追加する 境界をレイアウトに適用することで、レイアウト内の画面要素がオーバースキャンセーフ エリアです。
ユーザーが直接操作しない背景画面要素を調整したり、クリップしたりしないでください。 要素をオーバースキャンセーフ領域にドロップします。このアプローチにより、背景画面の要素が正しく表示される あらゆる画面に表示されます。
次の例は、背景要素とネストされた 5% のマージンがあり、オーバースキャンセーフ領域内に要素を含めることができる子レイアウトを次のように作成します。
<?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>
注意:
AndroidX Leanback クラス:
BrowseSupportFragment
これらのレイアウトにはすでにオーバースキャン用の余白が組み込まれているため、
使いやすいテキストとコントロールを作成する
以下のヒントを参考にして、TV アプリのテキストとコントロールを遠くから見やすくしてください。
- ユーザーがひと目でわかる小さな単位にテキストを分割します。
- 暗い背景に対して明るい色のテキストを使用します。これにより、TV スクリーン上のテキストが読みやすくなります。
- 軽量なフォントや、ストロークの幅が極めて狭いフォントと非常に広いフォントの両方は避けてください。 シンプルな Sans Serif フォントやアンチ エイリアスを使用して、さらに読みやすくします。
- 次の 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"/>
- すべてのビュー ウィジェットを、誰にでもはっきりと見えるサイズにする
画面から 3 メートルほど離します。「
そのための最善の方法は、絶対的なサイズ設定ではなく、レイアウトに連動したサイズ設定を使用することです。
絶対ピクセル単位ではなく、密度非依存ピクセル（dp）単位。たとえば、
使用する場合は、ピクセル測定ではなく
wrap_contentを使用し、 ウィジェットのマージンを調整する場合は、px 値ではなく dp 値を使用します。
密度非依存ピクセルと、よりサイズの大きな画像を処理するレイアウトのビルドに関する詳細 詳しくは、画面の互換性、 概要をご覧ください。
TV のレイアウト リソースを管理する
他のすべての Android デバイスと同様に、テレビも画面サイズとサポートレベルが異なります。 解像度（720p、1080p、4K などを含むがこれらに限定されない）アプリがさまざまな画面サイズをサポートしていることを確認します。
画面サイズや解像度が異なれば、ピクセル密度も異なります。元の画像の状態を さまざまな画面サイズ、解像度、ピクセル密度で UI を作成する際に、 ピクセルではなく密度非依存ピクセル（dp）を使用します。さまざまなテレビパネルの画面ピクセル密度 概要を以下に示します。
| パネルの解像度 | 画面のピクセル密度 |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
大画面向けのレイアウトとリソースの最適化について詳しくは、以下をご覧ください。 画面の互換性の概要
避けるべきレイアウト パターン
レイアウトのビルドに有効なアプローチは複数ある テレビデバイスにも最適ですこれが、ユーザー インターフェースから 注意すべき点がいくつかあります
- スマートフォンやタブレットのレイアウトの再利用: スマートフォンやタブレットのレイアウトを再利用しないでください。 そのまま使用できます。その他の Android デバイスのフォーム ファクタ向けに作成されたレイアウトは テレビデバイス向けとして適しており、テレビ上での操作に合わせてシンプルにする必要があります。
ActionBarの使用: アクションバーの使用が推奨されますが、 テレビのインターフェースには適していません。使用 アクションバーのオプション メニューやプルダウン メニューを TV アプリでは使用しないことを強くおすすめします。 リモコンでこのようなメニューを操作するのは大変です。ViewPagerの使用: 画面間をスライドさせる機能は、スマートフォンまたはタブレットに適しています。 テレビで試してはいけません。
TV に適したレイアウトのデザインについて詳しくは、 テレビ向けデザイン ガイドをご覧ください。
大容量のビットマップを処理する
TV デバイスは、他の Android デバイスと同様に、メモリ容量に限りがあります。独自の 非常に高解像度の画像を使用したアプリのレイアウトや、オペレーションで高解像度の画像が多数使用されている すぐにメモリの上限に達し、メモリ不足エラーが発生する可能性があります。ほとんどの Glide や アプリ内のビットマップを取得、デコード、表示するためのライブラリです。詳しくは、 最適なパフォーマンスを得るには、 Android のグラフィックに関するベスト プラクティスをご覧ください。
効果的な広告を提供する
リビングルーム環境では、動画広告ソリューションを使用することをおすすめします。 30 秒以内に閉じることができるようにします機能: 閉じるボタンやクリックスルーなどの Android TV 上の広告は、 タップではなく D-pad を使用してアクセスできるようになりました。
Android TV では、ウェブブラウザは提供されません。いかなる広告も、 ブラウザを起動する、または直接アクセスできない Google Play ストアのコンテンツ Android TV デバイスで承認されています。
注: WebView クラスを使用して、
ログインに使用できます。