ホーム > プログラミング > Android動画再生アプリを作る ( ExoPlayer + PlayerView ) > 04.フルスクリーン表示をできるようにする

04.フルスクリーン表示をできるようにする



フルスクリーン表示をできるようにします。

解説

画面いっぱいに動画が表示されるように、動画を横長画面で表示する「フルスクリーン再生モード」を作成します。

また、画面の動画以外の表示要素を非表示にします。具体的には、画面上部に表示される「タイトルバー」「ステータスバー」、画面下部に表示される「ナビゲーションバー」を非表示にします。

本項で実施している内容は、以下です。

実装

プロジェクトを開く

03.一時停止、再開、10秒スキップをできるようにする」で作成したプロジェクトを開きます。

Vector Assetの追加

「フルスクリーン」「フルスクリーンの終了」のイメージボタンのイメージを作成します。

まず、「フルスクリーン」のイメージを作成します。

「プロジェクト」ペインの「app > res > drawable」を右クリックします。
右クリックメニュー「New > Vector Asset」を選択します。


「Name」を「ic_fullscreen」とします。
「Clip Art」のアイコンをクリックし「fullscreen」を選択します。
「Size」を「32」dp x 「32」dp とします。
「Color」を「888888」とします。
「Next」ボタンを押します。


(何も変更せず)
「Finish」ボタンを押します。
「プロジェクト」ペインの「app > res > drawable」に「ic_fullscreen.xml」が出来ます。

「フルスクリーン」のイメージの作成と同様の方法で、「フルスクリーンの終了」のイメージを作成します。

「フルスクリーンの終了」のVector Assetの設定

「Name」を「ic_fullscreen_exit」とします。
「Clip Art」のアイコンをクリックし「fullscreen exit」を選択します。
「Size」を「32」dp x 「32」dp とします。
「Color」を「FFFF00」とします。

カスタムコントロールレイアウトの編集

「フルスクリーン」「フルスクリーンの終了」のイメージボタンを、ImageViewとして設置します。

「Project」ペインの「app > res > layout > custom_controller.xml」を開きます。

custom_controller.xml に以下の変更を行います。

変更部分


custom_controller.xml 全体としては、以下のようにします。

メインアクティビティクラスの編集(動画を横長画面で表示する「フルスクリーン再生モード」)

メインアクティビティクラスの、メンバー変数として、以下を追加します。

メインアクティビティクラスの、onCreate 関数内に、以下の処理を追加します。

  1. 画面の向きのを縦向きに設定 (これにより、スマホを回転しても画面が回転しなくなります。)
  2. フルスクリーンかどうかフラグを倒す
  3. フルスクリーンボタンのビューの取得
  4. フルスクリーンボタンのビューのクリックリスナーの設定

「Project」ペインの「app > java > ドメイン.アプリ名 > MainActivity」を開きます。

メインアクティビティクラス全体としては、以下のようにします。


「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

マニフェストファイルの編集

画面の向きを変更した場合の再起動を回避するため、メインアクティビティの設定に、configChanges属性の記述を追加し、以下のようにします。



「Project」ペインの「app > manifests > AndroidManifest.xml」を開きます。

「AndroidManifest.xml」全体としては、以下のようにします。

メインアクティビティクラスの編集(動画以外の表示要素を非表示)

メインアクティビティクラスの、onResume 関数内に、「タイトルバー、ステータスバー、ナビゲーションバーの非表示」処理として、以下の処理を追加します。

メインアクティビティの、onResume 関数全体としては、以下のようにします。


「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

実行

Android端末にて、動作確認。

アプリを起動すると、動画が再生、表示されます。

「タイトルバー」「ステータスバー」「ナビゲーションバー」は表示されません。
「ナビゲーションバー」は、Android端末下部の領域を下からスワイプすると表示されます。しばらく放っておくと、再度非表示となります。



画面右下の「フルスクリーン」ボタンをクリックすると、動画の表示の向きが横向きに変わります。


Android端末を横向きに変えて、動画を鑑賞します。


「再生」「一時停止」「10秒前スキップ」「10秒後スキップ」のボタン、再生位置テキスト、再生位置バーは、しばらく放っておくと非表示となり、画面をタップすると再表示されます。

ダウンロード

サンプルコード

github.com上のリポジトリページ

関連ページ

前項目:03.一時停止、再開、10秒スキップをできるようにする

後項目:05.バッファリング中の対応、画面をONのままにする対応


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.