ジェスチャーナビゲーションと狭額縁エクスペリエンス

Android バージョン 10 以上では、新しいモードとしてナビゲーションジェスチャーがサポートされています。これにより、アプリは画面全体を使用して、没入感の高いディスプレイエクスペリエンスを提供できます。ユーザーが画面の下端から上にスワイプすると、Android のホーム画面に移動します。左端または右端から内側にスワイプすると、前の画面に移動します。

これら 2 つのジェスチャーにより、アプリは画面の下部にある画面領域を利用できるようになります。ただし、アプリがジェスチャーを使用している場合や、アプリのコントロールがシステムジェスチャー領域に存在する場合は、システム全体のジェスチャーと競合する可能性があります。

この Codelab は、インセットを使用してジェスチャーの競合を回避する方法を学ぶことを目的としています。さらに、ジェスチャーゾーンに配置する必要があるドラッグハンドルなどのコントロールで Gesture Exclusion API を使用する方法を学ぶことも目的としています。

学習内容

ビューでのインセットリスナーの使用方法
Gesture Exclusion API の使用方法
ジェスチャーがアクティブになっている場合の没入モードの動作

この Codelab は、アプリでシステムジェスチャーとの互換性を確保することを目的としています。関連のない概念とコードブロックについては軽く触れるにとどめ、そのままコピーして貼り付けられるようにしています。

作成するアプリの概要

Universal Android Music Player（UAMP）は、Kotlin で記述された Android 用音楽プレーヤーアプリのサンプルです。この後、ジェスチャーナビゲーションを使用できるように UAMP をセットアップします。

インセットを使用して、コントロールをジェスチャー領域から引き離す
Gesture Exclusion API を使用して、競合しているコントロールの「戻る」ジェスチャーをオプトアウトする
ビルドを使用して、ジェスチャーナビゲーションによる没入モードの動作の変化を調べる

必要なもの

Android 10 以上を実行するデバイスまたはエミュレータ
Android Studio

Universal Android Music Player（UAMP）は、Kotlin で記述された Android 用音楽プレーヤーアプリのサンプルです。バックグラウンド再生、音声フォーカス処理、アシスタント統合などの機能と、Wear、TV、Auto といった複数のプラットフォームをサポートします。

図 1: UAMP のフロー

UAMP は、リモートサーバーから音楽カタログを読み込んで、ユーザーがアルバムと曲をブラウジングできるようにします。ユーザーが曲をタップしたら、接続されているスピーカーまたはヘッドフォンで曲を再生します。このアプリは、システムジェスチャーで動作するようには設計されていません。したがって、Android 10 以上を搭載したデバイスで UAMP を実行すると、最初にいくつかの問題が発生します。

サンプルアプリを入手するには、GitHub からリポジトリのクローンを作成し、starter ブランチに切り替えます。

$  git clone https://github.com/googlecodelabs/android-gestural-navigation/

または、リポジトリを ZIP ファイルとしてダウンロードし、Android Studio で開くこともできます。

ZIP をダウンロード

次の手順を行います。

Android Studio でアプリを開いてビルドします。
新しい仮想デバイスを作成して、API レベル 29 を選択します。または、API レベル 29 以上を搭載した実際のデバイスを接続することもできます。
アプリを実行します。[Recommended] と [Albums] が表示されます。いずれかを選択して、それぞれに含まれている曲をブラウジングできます。
[Recommended] をクリックして、曲のリストから曲を選択します。
アプリが曲の再生を開始します。

API レベル 29 の新しいエミュレータインスタンスを実行する場合、ジェスチャーナビゲーションがデフォルトでオンになっていないことがあります。ジェスチャーナビゲーションを有効にするには、[システム設定] > [システム] > [システムナビゲーション] > [ジェスチャーナビゲーション] を選択します。

ジェスチャーナビゲーションを有効にしてアプリを実行し、曲の再生を開始すると、プレーヤーコントロールが「ホーム」および「戻る」ジェスチャー領域に非常に近い場所にあることに気付くはずです。

狭額縁エクスペリエンスについて

Android 10 以上で実行されるアプリは、ナビゲーションでジェスチャーまたはボタンが有効になっているかどうかにかかわらず、完全な狭額縁ディスプレイエクスペリエンスを提供できます。アプリで狭額縁エクスペリエンスを提供するには、透明なナビゲーションバーとステータスバーの背後に描画する必要があります。

アプリがナビゲーションバーの背後にコンテンツをレンダリングするためには、最初にナビゲーションバーの背景を透明にする必要があります。次に、ステータスバーを透明にします。これにより、画面の高さ全体にアプリを表示できます。

ナビゲーションバーとステータスバーの色を変更するには、次の手順を行います。

ナビゲーションバー: res/values-29/styles.xml を開き、navigationBarColor を color/transparent に設定します。
ステータスバー: 同様に、statusBarColor を color/transparent に設定します。

res/values-29/styles.xml の以下のコードサンプルを確認してください。

<!-- change navigation bar color -->
<item name="android:navigationBarColor">
    @android:color/transparent
</item>

<!-- change status bar color -->
<item name="android:statusBarColor">
    @android:color/transparent
</item>

システム UI 表示フラグ

また、システム UI 表示フラグを設定して、システムバーの背後にアプリを配置するようシステムに指示する必要があります。View クラスの systemUiVisibility API を使用して、さまざまなフラグを設定できます。次の手順を行います。

MainActivity.kt クラスを開き、onCreate() メソッドを見つけます。fragmentContainer のインスタンスを取得します。
以下のフラグを content.systemUiVisibility に設定します。

MainActivity.kt の以下のコードサンプルを確認してください。

  val content: FrameLayout = findViewById(R.id.fragmentContainer)
  content.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
            View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

これらのフラグをまとめて設定すると、ナビゲーションバーとステータスバーが存在しないかのように、アプリを全画面表示するようシステムに指示できます。次の手順を行います。

アプリを実行し、プレーヤー画面に移動して、再生する曲を選択します。
プレーヤーコントロールがナビゲーションバーの下に描画され、アクセスしづらくなったことを確認します。

[システム設定] に移動し、3 ボタンナビゲーションモードに戻してから、アプリに戻ります。
3 ボタンナビゲーションバーのためにコントロールがさらに使いづらくなったことを確認します。SeekBar がナビゲーションバーの背後に隠れ、再生と一時停止がナビゲーションバーでほとんど覆い隠されていることに注目してください。
少し操作を試します。試し終わったら、[システム設定] に移動して [ジェスチャーナビゲーション] に戻します。

これで、アプリは端の余白がない狭額縁の状態で描画されるようになりましたが、使いづらさの問題と、アプリコントロールの競合と重なりという問題が存在します。これらを解決する必要があります。

WindowInsets は、システム UI がコンテンツを覆って表示される場所と、システムジェスチャーがアプリ内ジェスチャーよりも優先される画面領域をアプリに通知します。インセットは、Jetpack の WindowInsets クラスと WindowInsetsCompat クラスで表現されます。WindowInsetsCompat を使用して、すべての API レベルで一貫した動作を実現することを強くおすすめします。

システムインセットと必須システムインセット

以下のインセット API は、最もよく使用されるインセットタイプの API です。

システムウィンドウインセット: システム UI がアプリを覆って表示される場所を示します。システムインセットを使用してコントロールをシステムバーから引き離す方法については、後で説明します。
システムジェスチャーインセット: すべてのジェスチャー領域を返します。これらの領域のアプリ内スワイプコントロールは、誤ってシステムジェスチャーをトリガーする可能性があります。
必須ジェスチャーインセット: これはシステムジェスチャーインセットのサブセットであり、オーバーライドできません。システムジェスチャーの動作が常にアプリ内ジェスチャーよりも優先される画面領域を示します。

インセットを使用してアプリコントロールを移動する

インセット API について詳しく学んだところで、以下の手順に沿ってアプリコントロールを修正します。

view オブジェクトインスタンスから playerLayout のインスタンスを取得します。
OnApplyWindowInsetsListener を playerView に追加します。
ジェスチャー領域からビューを引き離します。下部を表すシステムインセット値を見つけて、その分だけビューのパディングを増やします。ビューのパディングを「アプリの下部パディングに関連付けられた値」に適切に更新するには、「システムのインセットの下部の値に関連付けられた値」を加算します。

NowPlayingFragment.kt の以下のコードサンプルを確認してください。

playerView = view.findViewById(R.id.playerLayout)
playerView.setOnApplyWindowInsetsListener { view, insets ->
   view.updatePadding(
      bottom = insets.systemWindowInsetBottom + view.paddingBottom
   )
   insets
}

アプリを実行し、曲を選択します。プレーヤーコントロールは何の変化もないように見えます。ブレークポイントを追加し、デバッグモードでアプリを実行すると、リスナーが呼び出されていないことがわかります。
これを修正するには、FragmentContainerView に切り替えます。そうすれば、この問題は自動的に処理されます。activity_main.xml を開き、FrameLayout を FragmentContainerView に変更します。

activity_main.xml の以下のコードサンプルを確認してください。

<androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fragmentContainer"
    tools:context="com.example.android.uamp.MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

アプリを再度実行し、プレーヤー画面に移動します。下部のプレーヤーコントロールが下部のジェスチャー領域から移動されています。

これで、アプリコントロールがジェスチャーナビゲーションで動作するようになりましたが、予想以上に大きくコントロールが移動されています。これを解決する必要があります。

現在のパディングと余白を維持する

アプリを閉じずに他のアプリに切り替えたりホーム画面に移動してアプリに戻ったりすると、そのたびにプレーヤーコントロールが上に移動することに注目してください。

これは、アクティビティが開始されるたびにアプリが requestApplyInsets() をトリガーするためです。この呼び出しがなくても、ビューのライフサイクル中に随時 WindowInsets が複数回ディスパッチされる可能性があります。

playerView の現在の InsetListener は、activity_main.xml で宣言されたアプリの下部パディング値にインセットの下部の量を初めて加算したときには、正しく機能します。しかし、その後の呼び出しでは、インセットの下部の値が、すでに更新済みのビューの下部パディングに引き続き加算されます。

これを修正するには、次の手順を行います。

ビューのパディングの初期値を記録します。新しい val を作成して、リスナーコードのすぐ前に playerView のビューのパディングの初期値を保存します。

NowPlayingFragment.kt の以下のコードサンプルを確認してください。

   val initialPadding = playerView.paddingBottom

この初期値を使ってビューの下部パディングを更新します。これにより、アプリの現在の下部パディング値が使用されることを回避できます。

NowPlayingFragment.kt の以下のコードサンプルを確認してください。

   playerView.setOnApplyWindowInsetsListener { view, insets ->
            view.updatePadding(bottom = insets.systemWindowInsetBottom + initialPadding)
            insets
        }

アプリを再度実行します。複数のアプリ間を移動して、ホーム画面に移動します。アプリに戻ると、プレーヤーコントロールがジェスチャー領域のすぐ上に表示されています。

アプリコントロールを再デザインする

プレーヤーのシークバーが下部のジェスチャー領域に近すぎるため、ユーザーが左右のスワイプを完了すると、誤って「ホーム」ジェスチャーがトリガーされる可能性があります。パディングをさらに増やせばこの問題を解決できますが、プレーヤーが思ったより高い位置に配置される可能性もあります。

インセットを使用してジェスチャーの競合を修正することもできますが、場合によっては、デザインを少し変更するだけでジェスチャーの競合を完全に回避できます。ジェスチャーの競合が回避されるようにプレーヤーコントロールを再デザインするには、次の手順を行います。

fragment_nowplaying.xml を開きます。デザインビューに切り替えて、一番下の SeekBar を選択します。

コードビューに切り替えます。
SeekBar を playerLayout の一番上に移動するには、SeekBar の layout_constraintTop_toBottomOf を parent に変更します。
playerView 内の他のアイテムを SeekBar の下部に制限するには、media_button、title、position の layout_constraintTop_toTopOf を parent から @+id/seekBar に変更します。

fragment_nowplaying.xml の以下のコードサンプルを確認してください。

<androidx.constraintlayout.widget.ConstraintLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:padding="8dp"
   android:layout_gravity="bottom"
   android:background="@drawable/media_overlay_background"
   android:id="@+id/playerLayout">

   <ImageButton
       android:id="@+id/media_button"
       android:layout_width="@dimen/exo_media_button_width"
       android:layout_height="@dimen/exo_media_button_height"
       android:background="?attr/selectableItemBackground"
       android:scaleType="centerInside"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintTop_toTopOf="@+id/seekBar"
       app:srcCompat="@drawable/ic_play_arrow_black_24dp"
       tools:ignore="ContentDescription" />

   <TextView
       android:id="@+id/title"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginTop="8dp"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Title"
       app:layout_constraintTop_toTopOf="@+id/seekBar"
       app:layout_constraintLeft_toRightOf="@id/media_button"
       app:layout_constraintRight_toLeftOf="@id/position"
       tools:text="Song Title" />

   <TextView
       android:id="@+id/subtitle"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Subtitle"
       app:layout_constraintTop_toBottomOf="@+id/title"
       app:layout_constraintLeft_toRightOf="@id/media_button"
       app:layout_constraintRight_toLeftOf="@id/position"
       tools:text="Artist" />

   <TextView
       android:id="@+id/position"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginTop="8dp"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Title"
       app:layout_constraintTop_toTopOf="@+id/seekBar"
       app:layout_constraintRight_toRightOf="parent"
       tools:text="0:00" />

   <TextView
       android:id="@+id/duration"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="@dimen/text_margin"
       android:layout_marginEnd="@dimen/text_margin"
       android:ellipsize="end"
       android:maxLines="1"
       android:textAppearance="@style/TextAppearance.Uamp.Subtitle"
       app:layout_constraintTop_toBottomOf="@id/position"
       app:layout_constraintRight_toRightOf="parent"
       tools:text="0:00" />

   <SeekBar
       android:id="@+id/seekBar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

アプリを実行し、プレーヤーとシークバーを操作します。

このわずかなデザインの変更により、アプリが大幅に改善されます。

「ホーム」ジェスチャー領域については、プレーヤーコントロールのジェスチャーが競合する問題が解決しました。「戻る」ジェスチャー領域についても、アプリコントロールとの競合が発生する可能性があります。以下のスクリーンショットは、現在プレーヤーのシークバーが左右両方の「戻る」ジェスチャー領域に存在することを示しています。

SeekBar は、ジェスチャーの競合を自動的に処理します。ただし、ジェスチャーの競合を引き起こす他の UI コンポーネントを使用しなければならない場合があります。そのような場合は、Gesture Exclusion API を使用して、「戻る」ジェスチャーを部分的にオプトアウトできます。

Gesture Exclusion API を使用する

ジェスチャー除外ゾーンを作成するには、rect オブジェクトのリストを使用して、ビューで setSystemGestureExclusionRects() を呼び出します。これらの rect オブジェクトは、除外される長方形領域の座標にマッピングされます。この呼び出しは、ビューの onLayout() または onDraw() メソッドで実行する必要があります。そのためには、次の手順を行います。

view という名前の新しいパッケージを作成します。
この API を呼び出すには、MySeekBar という名前の新しいクラスを作成し、AppCompatSeekBar を拡張します。