コンテンツに移動

よくアクセスするページ

最近アクセスしたページ

navigation

TV 向けレイアウトをビルドする

TV スクリーンは 10 フィートほど離れて見ることが通常であり、他の Android 端末のディスプレイよりもはるかに大きいことが多く、小型の端末と同レベルの精度と色を再現できません。便利で楽しいユーザー エクスペリエンスを作成する上で、これらの要素を配慮して TV 端末向けアプリのレイアウトを作成する必要があります。

このレッスンでは、TV アプリ用の効果的なレイアウトをビルドするための最低限の要件と実装の詳細を説明します。

TV 向けのレイアウト テーマを使用する

Android のテーマは、TV アプリのレイアウトの基礎を提供しています。TV 端末上で動作するよう設計されたアプリのアクティビティに関しては、テーマを使用して表示を変更する必要があります。このセクションでは、どのテーマを使用したらよいかについて説明します。

Leanback テーマ

TV ユーザー インターフェースのサポート ライブラリである v17 leanback ライブラリ は、Theme.Leanback という TV アクティビティに関する標準的なテーマを提供しています。このテーマは、TV アプリに一貫性のある視覚的なスタイルを与えます。ほとんどの TV アプリにはこのテーマをお勧めします。このテーマは v17 leanback クラスを使用するすべての TV アプリに最適です。次のコード例では、アプリ内にあるアクティビティにこのテーマを適用する方法を示します。

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

NoTitleBar テーマ

タイトル バーは、携帯電話やタブレットの Android アプリにとっては標準的なユーザー インターフェース エレメントですが、TV アプリには適していません。v17 leanback クラスを使用していない場合は、TV アクティビティにこのテーマを適用してタイトル バーの表示を控える必要があります。TV アプリのマニフェストに関する次のコード例では、このテーマを適用してタイトル バーの表示を削除する方法を示します。

<application>
  ...

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

  </activity>
</application>

基本的な TV レイアウトをビルドする

TV 端末用のレイアウトが、大きなスクリーンでも使いやすく効果的になるように、参考となるガイドラインがいくつかあります。次のヒントに従って、TV スクリーン用に最適化された横長のレイアウトをビルドします。

オーバースキャン

TV 向けのレイアウトには、TV 規格の進化と、常に視聴者にフルスクリーン表示を提供したいという開発者側の意図に伴い、いくつかの特殊な要件があります。このため、TV 端末ではフルスクリーン表示の際にディスプレイ全体を埋められるように、アプリのレイアウト周囲がクリッピングされる場合があります。この動作を、一般にオーバースキャンと呼びます。

レイアウト周囲には 10%のマージンを与え、スクリーン エレメントがオーバースキャンによりクリッピングされないようにします。具体的には、アクティビティのベース レイアウトの左右には 27dp、上下には 48dp のマージンを設定します。次のレイアウト例では、TV アプリのルート レイアウト内でこれらのマージンを設定する方法を示します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/base_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:layout_marginTop="27dp"
  android:layout_marginLeft="48dp"
  android:layout_marginRight="48dp"
  android:layout_marginBottom="27dp" >
</LinearLayout>

警告:BrowseFragment や関連ウィジェットなどの v17 leanback クラスを使用している場合、レイアウトには既にオーバースキャン用のマージンが設定されているため、重複して設定しないようにします。

使用可能なテキストとコントロールをビルドする

TV アプリのレイアウト内のテキストやコントロールは、遠くからでも見やすく、操作内容を理解できるようにする必要があります。次のヒントに従って、遠くから見ても簡単に判別可能なユーザー インターフェース エレメントを作成します。

密度に依存しないピクセルと、スクリーン サイズが大きな場合のレイアウトのビルドについては、複数のスクリーンをサポートするを参照してください。

TV のレイアウト リソースを管理する

一般的なハイビジョン TV ディスプレイの解像度は 720p、1080i、1080p です。TV のレイアウトが 1920×1080 ピクセルのスクリーン サイズになるようにして、Android のシステムが必要に応じてアプリのレイアウト エレメントを 720p にダウンスケールできるようにします。通常は、ダウンスケーリング(ピクセル削除)してもレイアウトのプレゼンテーション品質が低下することはありません。ただし、アップスケーリングはレイアウトの品質を劣化させ、アプリのユーザー エクスペリエンスに悪影響を与えるアーチファクトを引き起こす可能性があります。

画像を最適な状態にスケーリングするには、可能であれば 9patch 画像のエレメントとして配置します。レイアウト内に低品質な画像や小さな画像を配置した場合、ピクセル化され、ぼやけた、粗い表示になり、ユーザー エクスペリエンスの低下につながります。それを避けるには、高品質の画像を使用します。

大きなスクリーン向けのレイアウトやリソースの最適化については、複数のスクリーンをデザインするを参照してください。

レイアウトのアンチパターンを回避する

TV 端末には不向きでユーザー エクスペリエンスの低下につながるため、レイアウトのビルドに際して避けたほうがよいアプローチがいくつかあります。ここでは、TV のレイアウト開発の際に特に使用しないほうがよい、ユーザー インターフェースに関するアプローチをいくつか説明します。

TV に適したレイアウトのデザインについては、TV 向けデザインガイドを参照してください。

大容量のビットマップを処理する

他の Android 端末と同様に、TV 端末ではメモリ容量が限られています。超高解像度の画像を使用してアプリのレイアウトをビルドしたり、アプリの動作に多くの高解像度の画像を使用した場合、すぐにメモリの上限に達し、メモリ不足エラーが発生する可能性があります。次のヒントに従って、このタイプの問題を回避します。

画像処理の際に最高のパフォーマンスを得るには、ビットマップを効率的に表示するを参照してください。

このサイトでは、ユーザーが選択したサイトの言語と表示設定を保存する目的で Cookie を使用しています。

Android デベロッパー向けの最新情報やヒントを入手して、Google Play での成功を手に入れましょう。

* 必須

送信しました

WeChat で Google Developers をフォローする

このサイトをで表示しますか?

ページの表示言語としてを選択しましたが、このサイトの言語はに設定されています。

言語設定を変更してこのサイトをで表示しますか?言語設定を変更する場合は、各ページの下にある言語メニューを使用してください。

このクラスには、API レベル 以上が必要です。

API レベル が選択されているため、このドキュメントは非表示になっています。左のナビゲーションの上にあるセレクタを使って、ドキュメントの API レベルを変更できます。

アプリに必要な API レベルを指定する方法について、詳しくは異なるプラットフォーム バージョンのサポートをご覧ください。

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)