キーボードの Space キーによるメディア再生の一時停止と再開

4 つ星の評価アイコン

大画面向けの最適化には、外部キーボード入力を処理する機能が含まれています。たとえば、Space キーが押された場合には、動画などのメディアの再生が一時停止または再開されます。外部キーボードに接続されることが多いタブレットや、通常は外部キーボードが付属しておりタブレット モードでも使用できる Chromebook で特に便利な機能です。

メディアがウィンドウの唯一の要素（フルスクリーン動画再生など）である場合、Jetpack Compose では画面レベルでキー操作イベントに対応します。

ベスト プラクティス

アプリでメディア ファイルを再生する場合は、物理キーボードの Space キーを押すと、再生を一時停止または再開できるようにします。

要素

  • KEYCODE_SPACE: Space キーのキーコード定数。
  • onPreviewKeyEvent: コンポーネント（またはその子の一つ）がフォーカスされたときにコンポーネントがハードウェア キーイベントをインターセプトできるようにする Modifier。
  • onKeyEvent: onPreviewKeyEvent と同様に、コンポーネント（またはその子の一つ）がフォーカスされたときにコンポーネントがハードウェア キーイベントをインターセプトできるようにするModifier。

手順

Jetpack Compose でキーボードのキーが押された場合に対応するには、アプリはキー操作イベントをリッスンして、イベントをフィルタし、Space キーなどの選択したキー操作に応答する必要があります。

1. キーボードのイベントをリッスンする

Jetpack Compose では、キー入力を管理するコンポーネント内の onPreviewKeyEvent 修飾子または onKeyEvent 修飾子を利用できます。

2 つの修飾子の主な違いは、修飾子がイベントを利用しない場合にイベントがディスパッチされる先です。

  • onPreviewKeyEvent - イベントを最初の子にディスパッチします。
  • onKeyEvent - イベントをコンポーザブルの親にディスパッチします。

2. Space キーの押下をフィルタして処理する

onPreviewKeyEvent または onKeyEvent 修飾子ラムダ内で、キーリリース（KeyEventType.KeyUp）が Space キー（Key.Spacebar）と一致するキーイベントをフィルタします。

コードでイベントを処理しており、イベントがそれ以上伝播されないようにするには、true を返します。他のコンポーネントがイベントを処理できるようにするには、false を返します。

  • オプション A: onPreviewKeyEvent を使用する

    Column(
    modifier = Modifier.onPreviewKeyEvent { event ->
        if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
            // Handle spacebar keypress to pause/resume playback.
            true
        } else {
            false
        }
    }
) {
    // Content
}

  • オプション B: onKeyEvent を使用する

    Column(
    modifier = Modifier.onKeyEvent { event ->
        if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
            // Handle spacebar keypress to pause/resume playback.
            true
        } else {
            false
        }
    }
) {
    // Content
}

結果

これでアプリは Space キーが押された場合に対応して、動画などのメディアを一時停止したり再開したりできるようになります。

参考情報

キーボード イベントとその管理方法について詳しくは、キーボード入力を処理するをご覧ください。