05．再生コントローラーを非表示にできるようにする

再生位置の表示や変更を可能とする「再生コントローラー」を非表示にできるようにします。

解説

画面をタップすることで、「動画再生用のビューに対して、オーバーレイ表示している、再生コントローラービュー」を非表示になるようにします。

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

動画再生用のビューに対してオーバーレイ表示している「再生コントローラービュー」にid名を付与します。
「再生コントローラービュー」を取得する処理を追加します。
アクティビティをタッチしたときの処理として、「再生コントローラービュー」を、表示／非表示する処理を追加します。

実装

プロジェクトを開く

メインアクティビティのレイアウトの編集

動画再生用のビューに対してオーバーレイ表示している「再生コントローラービュー」にid名を付与します。

メインアクティビティのレイアウトの、再生位置の表示や変更を可能とする「再生コントローラー」の親要素にid名「viewgropu_playercontroller」を付与します。

<RelativeLayout android:id="@+id/viewgroup_playercontroller" android:layout_width="match_parent" android:layout_height="match_parent">

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

activity_main.xml 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <SurfaceView android:id="@+id/surfaceview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> </RelativeLayout> <RelativeLayout android:id="@+id/viewgroup_playercontroller" android:layout_width="match_parent" android:layout_height="match_parent"> （・・・略・・・） </RelativeLayout> </FrameLayout>

メインアクティビティクラスの編集（ビューの取得）

「再生コントローラービュー」を取得する処理を追加します。

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

再生位置の表示や変更を可能とする「再生コントローラー」の親要素のオブジェクト

メインアクティビティクラスの、onCreate関数に、再生位置の表示や変更を可能とする「再生コントローラー」の親要素を取得する処理を追加します。

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

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private boolean m_bNowSeekBarTouching; private ViewGroup m_viewgroupPlayerController; （・・・略・・・） @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // Viewの取得 m_textviewPosition = findViewById( R.id.textview_position ); m_textviewDuration = findViewById( R.id.textview_duration ); m_seekbar = findViewById( R.id.seekbar ); m_viewgroupPlayerController = findViewById( R.id.viewgroup_playercontroller ); // リスナーの設定（・・・略・・・） } （・・・略・・・） }

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

メインアクティビティクラスの編集（画面タッチ処理）

アクティビティをタッチしたときの処理として、「再生コントローラービュー」を、表示／非表示する処理を追加します。

メインアクティビティクラスに、以下のコードを追加します。

「タッチした時」に呼ばれる関数である onTouchEvent 関数を追加します。
タッチダウン時の処理として、再生コントローラーの親要素が、「表示されていれば、非表示にし、表示されていなければ、表示にする」処理を記述します。

メインアクティビティクラス全体としては、以下のようにします。
@Override public boolean onTouchEvent( MotionEvent event ) { super.onTouchEvent( event ); switch( event.getAction() ) { case MotionEvent.ACTION_DOWN: int iVisibility = m_viewgroupPlayerController.getVisibility(); if( View.VISIBLE == iVisibility ) { // Visible ⇒ Invisible m_viewgroupPlayerController.setVisibility( View.INVISIBLE ); } else { // Invisible ⇒ Visible m_viewgroupPlayerController.setVisibility( View.VISIBLE ); } return true; } return false; }

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

実行

Android端末にて、動作確認。

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

画面下部に、再生位置テキスト、再生位置バーが表示されます。

画面をタップすると、再生位置テキスト、再生位置バーが非表示になります。再度画面をタップすると、再表示されます。

ダウンロード

サンプルコード