このページは Cloud Translation API によって翻訳されました。

操作について理解する

理解しておくべき用語と概念がいくつかあります。いくつか紹介しますこのページでは、用語について説明します。ポインタ、ポインタイベント、ジェスチャーなどがサポートされており、設定できます。また、イベント消費とイベント消費について掘り下げて、あります。

定義

このページのさまざまなコンセプトを理解するには、いくつかの用語の意味は次のとおりです。

ポインタ: アプリの操作に使用できる物理オブジェクト。モバイルデバイスの場合、最も一般的なポインタは、操作する指です。操作できます。また、指の代わりにタッチペンを使用することもできます。大画面の場合は、マウスまたはトラックパッドを使用して間接的に操作できます。クリックします。入力デバイスは、となる座標でポインタとみなされるため、キーボードなどは、あります。Compose では、 PointerType。
ポインタイベント: 1 つ以上のポインタの下位レベルのインタラクションを表します。同時に実行することもできます。すべてのポインタの操作（例: 画面上で指を押したりマウスをドラッグしたりすると、イベントがトリガーされます。イン Compose では、そのようなイベントに関連するすべての情報が PointerEvent クラス。
操作: 単一の操作として解釈できる一連のポインタイベントのできます。たとえば、タップ操作は、下向きまたは下向きのイベントの発生後に UP イベントで発生します多くのユーザーが使用する一般的な操作はタップ、ドラッグ、変形などのカスタムアプリを作成できますが、独自のカスタム操作することもできます。

さまざまなレベルの抽象化

Jetpack Compose には、操作を処理するためのさまざまなレベルの抽象化が用意されています。最上位レベルはコンポーネントのサポートです。Button などのコンポーザブル自動的にジェスチャーをサポートします。カスタム絵文字にジェスチャーのサポートを追加するには、使用する場合は、clickable などのジェスチャー修飾子を任意のコマンドに作成します。最後に、カスタム操作が必要な場合は、 pointerInput 修飾子。

原則として、優れたパフォーマンスを実現する最高レベルの抽象化を必要な機能だけを提供します。これにより、Google Cloud Platform で提供されるあります。たとえば、Button には、より多くのセマンティック情報が含まれています。未加工の情報よりも多くの情報が含まれている clickable よりもアクセシビリティが高い pointerInput の実装。

コンポーネントのサポート

Compose のすぐに使用できるコンポーネントの多くには、なんらかの内部操作が含まれています。考えてみましょうたとえば、LazyColumn はドラッグ操作に対してコンテンツをスクロールすると、Button を押すと波紋が表示され、 SwipeToDismiss コンポーネントには、スワイプで閉じる操作のロジックが要素です。このタイプのジェスチャー処理は自動的に機能します。

内部ジェスチャー処理の他に、多くのコンポーネントでは、呼び出し元が処理します。たとえば、Button はタップを自動的に検出します。クリックイベントをトリガーします。onClick ラムダを Button に渡して、操作に反応します。同様に、onValueChange ラムダを Slider: ユーザーによるスライダーハンドルのドラッグ操作に反応します。

ユースケースに適している場合は、コンポーネントに含まれるジェスチャーを使用することをおすすめします。フォーカスとユーザー補助の特別なサポートが最初から組み込まれています十分にテストされていますたとえば、Button は特別な方法でマークされており、ユーザー補助サービスによって、ボタンとして正しく記述されています。クリック可能な要素:

// Talkback: "Click me!, Button, double tap to activate"
Button(onClick = { /* TODO */ }) { Text("Click me!") }
// Talkback: "Click me!, double tap to activate"
Box(Modifier.clickable { /* TODO */ }) { Text("Click me!") }UnderstandGesturesSnippets.kt

Compose のユーザー補助について詳しくは、ユーザー補助機能の Compose にあります。

修飾子を使用して任意のコンポーザブルに特定の操作を追加する

任意のコンポーザブルにジェスチャー修飾子を適用して、操作をリッスンします。たとえば、汎用の Box に、タップ操作を処理できるよう clickable にするか、Column にします。 verticalScroll を適用して縦スクロールを処理する。

さまざまな種類のジェスチャーを処理するために、多くの修飾子があります。

clickable でタップや押下を処理する。 combinedClickable、selectable、toggleable、 triStateToggleable 修飾子。
horizontalScroll でスクロールを処理する。 verticalScroll などの一般的な修飾子 scrollable を使用します。
draggable と swipeable でドラッグを処理する修飾子を使用します。
パン、回転、ズームなどのマルチタッチジェスチャーの処理。 transformable 修飾子

原則として、カスタムジェスチャー処理よりも、すぐに使えるジェスチャー修飾子を優先します。修飾子は、純粋なポインタイベント処理に加えて、より多くの機能を追加します。たとえば、clickable 修飾子は、押された状態とセマンティック情報、インタラクションの視覚的な表示、マウスオーバー、フォーカス、キーボードのサポートです[ソースコード] で、の clickable を使用して、この機能がどのように機能するかをご確認ください。を追加します。

`pointerInput` 修飾子を使用して任意のコンポーザブルにカスタムジェスチャーを追加する

すべての操作に、すぐに使用できるジェスチャー修飾子が実装されているわけではありません。対象たとえば、長押し、 Ctrl+クリック、3 本の指でタップできます代わりに、独自のジェスチャーを記述して使用してこれらのカスタム操作を識別します。ジェスチャーハンドラは、 pointerInput 修飾子。未加工のポインタにアクセスできます。できます。

次のコードは、未加工のポインタイベントをリッスンします。

@Composable
private fun LogPointerEvents(filter: PointerEventType? = null) {
    var log by remember { mutableStateOf("") }
    Column {
        Text(log)
        Box(
            Modifier
                .size(100.dp)
                .background(Color.Red)
                .pointerInput(filter) {
                    awaitPointerEventScope {
                        while (true) {
                            val event = awaitPointerEvent()
                            // handle pointer event
                            if (filter == null || event.type == filter) {
                                log = "${event.type}, ${event.changes.first().position}"
                            }
                        }
                    }
                }
        )
    }
}UnderstandGesturesSnippets.kt

このスニペットを分割すると、コアコンポーネントは次のようになります。

pointerInput 修飾子。1 つ以上の鍵を渡します。リリースを変更すると、修飾子のコンテンツラムダが再実行します。サンプルは、オプションのフィルタをコンポーザブルに渡します。条件そのフィルタの値が変更された場合、ポインタイベントハンドラは正しいイベントがログに記録されるようにします。
awaitPointerEventScope は、以下に使用できるコルーチンスコープを作成します。ポインタイベントを待機します。
awaitPointerEvent は、次のポインタイベントまでコルーチンを一時停止します。発生します。

未加工の入力イベントのリッスンは便利ですが、作成も複雑です。カスタムジェスチャーを作成します。カスタムバックエンドを多くのユーティリティメソッドが利用できます。

完全な操作を検出する

未加工のポインタイベントを処理する代わりに、特定のジェスチャーをリッスンできます。適切に対応する必要がありますAwaitPointerEventScope により、リッスンするメソッド:

長押し、タップ、ダブルタップ、長押し: detectTapGestures
ドラッグ: detectHorizontalDragGestures、 detectVerticalDragGestures、detectDragGestures、 detectDragGesturesAfterLongPress
変換: detectTransformGestures

これらは最上位の検出項目であるため、1 つの検出項目に複数の検出項目を追加することはできません。 pointerInput 修飾子。次のスニペットはタップのみを検出し、ドラァグ:

var log by remember { mutableStateOf("") }
Column {
    Text(log)
    Box(
        Modifier
            .size(100.dp)
            .background(Color.Red)
            .pointerInput(Unit) {
                detectTapGestures { log = "Tap!" }
                // Never reached
                detectDragGestures { _, _ -> log = "Dragging" }
            }
    )
}UnderstandGesturesSnippets.kt

内部的には、detectTapGestures メソッドがコルーチンをブロックし、2 番目のメソッドがコルーチンをブロックします。検出器に到達しません。複数のジェスチャーリスナーを代わりに個別の pointerInput 修飾子インスタンスを使用します。

var log by remember { mutableStateOf("") }
Column {
    Text(log)
    Box(
        Modifier
            .size(100.dp)
            .background(Color.Red)
            .pointerInput(Unit) {
                detectTapGestures { log = "Tap!" }
            }
            .pointerInput(Unit) {
                // These drag events will correctly be triggered
                detectDragGestures { _, _ -> log = "Dragging" }
            }
    )
}UnderstandGesturesSnippets.kt

操作ごとにイベントを処理する

定義上、ジェスチャーはポインタダウンイベントから始まります。こちらの while(true) ループの代わりに awaitEachGesture ヘルパーメソッドを使用する通過します。awaitEachGesture メソッドは、すべてのポインタが解放されると、その操作が完了:

@Composable
private fun SimpleClickable(onClick: () -> Unit) {
    Box(
        Modifier
            .size(100.dp)
            .pointerInput(onClick) {
                awaitEachGesture {
                    awaitFirstDown().also { it.consume() }
                    val up = waitForUpOrCancellation()
                    if (up != null) {
                        up.consume()
                        onClick()
                    }
                }
            }
    )
}UnderstandGesturesSnippets.kt

実際には、ほとんどの場合、awaitEachGesture を使用するのは、操作を識別せずにポインタイベントに応答する。たとえば hoverable: ポインタの上下イベントには反応せず、ポインタが境界を出入りするタイミングを知る必要があります。

特定のアクティビティやサブジェスチャーを待つ

ジェスチャーの一般的な部分を識別するためのメソッドは、以下のとおりです。

awaitFirstDown でポインタが下がるまで一時停止するか、すべて待機する waitForUpOrCancellation で上に移動するポインタ。
awaitTouchSlopOrCancellation を使用して低レベルのドラッグリスナーを作成するおよび awaitDragOrCancellation。ジェスチャーハンドラは、まず次の時点まで一時停止します。ポインタがタッチスロップに到達した後、最初のドラッグイベントまで一時停止する発生します。1 つの軸に沿ったドラッグのみに関心がある場合は、 awaitHorizontalTouchSlopOrCancellation 以上 awaitHorizontalDragOrCancellation、または awaitVerticalTouchSlopOrCancellation 以上 awaitVerticalDragOrCancellation。
awaitLongPressOrCancellation で長押しが発生するまで一時停止する。
drag メソッドを使用して、ドラッグイベントを継続的にリッスンする。 horizontalDrag または verticalDrag（ドラッグイベントをリッスンする）表示されます。

マルチタッチイベントの計算を適用する

ユーザーが複数のポインタを使用してマルチタッチジェスチャーを行っている場合、未加工の値に基づいて必要な変換を理解するのは複雑です。 transformable 修飾子または detectTransformGestures の場合ユースケースをきめ細かく制御できない場合は、未加工のイベントをリッスンして計算しますこれらのヘルパーメソッドには、 calculateCentroid、calculateCentroidSize、 calculatePan、calculateRotation、calculateZoom。

イベントのディスパッチとヒットテスト

すべてのポインタイベントがすべての pointerInput 修飾子に送信されるわけではありません。イベントディスパッチは次のように機能します。

ポインタイベントは、コンポーザブルの階層にディスパッチされます。ユーザーが新しいポインタが最初のポインタイベントをトリガーすると、システムがヒットテストを開始します。対象の作成できます。コンポーザブルは、次の場合、適格と見なされます。ポインタ入力処理機能。UI の上部からのヒットテストフロー一番下に移動しますコンポーザブルが「ヒット」するポインタイベントが発生したときそのコンポーザブルの境界内に収めます。このプロセスの結果 コンポーズ可能な関数をご覧ください。
デフォルトでは、同じレベルに適格なコンポーザブルが複数存在する場合は、 Z-Index が最も高いコンポーザブルのみが「ヒット」となります。対象たとえば、重複する 2 つの Button コンポーザブルを Box に追加すると、上に描画されたものはポインタイベントを受け取ります。理論的には、この動作をオーバーライドするには、独自の PointerInputModifierNode を sharePointerInputWithSiblings を true に設定します。
同じポインタに対する以降のイベントは、同じポインタのチェーンにディスパッチされます。コンポーザブルであり、イベント伝播ロジックに従ってフローします。システムはこれ以上、このポインタのヒットテストを実行しません。つまりチェーン内のコンポーザブルは、そのポインタのすべてのイベントを受け取ります。これは、そのコンポーザブルの境界外で発生します。コンポーザブルは、Terraform でポインタがリンクされていても、決定します

マウスまたはタッチペンのホバーによってトリガーされるホバーイベントは、定義します。ホバーイベントは、ヒットしたすべてのコンポーザブルに送信されます。まずユーザーがコンポーザブルの境界から次のコンポーザブルにポインタを合わせると、最初のコンポーザブルにイベントを送信する代わりに作成します。

イベントの使用

複数のコンポーザブルにジェスチャーハンドラが割り当てられている場合、競合しないようにする必要があります。例として、次の UI をご覧ください。

画像、2 つのテキストを含む列、ボタンを含むリストアイテム。

ユーザーがブックマークボタンをタップすると、ボタンの onClick ラムダがそれを処理行います。ユーザーがリストアイテムの他の部分をタップすると、ListItem そのジェスチャーを処理して記事に移動しますポインタ入力に関してはボタンはこのイベントを消費し、親がそれを認識しないようにするもう反応しない。すぐに使えるコンポーネントに組み込まれているジェスチャーと、一般的な操作修飾子には、この消費動作が含まれていますが、イベントを手動で消費する必要があります。操作 PointerInputChange.consume メソッドに置き換えます。

Modifier.pointerInput(Unit) {

    awaitEachGesture {
        while (true) {
            val event = awaitPointerEvent()
            // consume all changes
            event.changes.forEach { it.consume() }
        }
    }
}UnderstandGesturesSnippets.kt

イベントを使用しても、他のコンポーザブルへのイベント伝播は停止しません。コンポーザブルは、使用されたイベントを明示的に無視する必要があります。文章作成時イベントがすでに別のイベントによって消費されているかどうかを確認する必要があります。要素:

Modifier.pointerInput(Unit) {
    awaitEachGesture {
        while (true) {
            val event = awaitPointerEvent()
            if (event.changes.any { it.isConsumed }) {
                // A pointer is consumed by another gesture handler
            } else {
                // Handle unconsumed event
            }
        }
    }
}UnderstandGesturesSnippets.kt

イベントの伝播

前述のように、ポインタの変更はヒットする各コンポーザブルに渡されます。しかし、そのようなコンポーザブルが複数存在する場合、イベントは伝播するか前のセクションの例を参考にすると、この UI は次の UI ツリーでは、ListItem と Button のみが応答します。ポインタイベント:

ツリー構造。一番上のレイヤは ListItem で、2 番目のレイヤには Image、Column、Button があり、Column は 2 つのテキストに分割されています。ListItem と Button がハイライト表示されています。

ポインタイベントは、各コンポーザブルを 3 回通過します。 "passes":

初期パスでは、イベントは UI ツリーの最上部から下に表示されます。このフローにより、子がイベントをインターセプトする前に、親は消費します。たとえば、ツールチップでは長押しして渡します。Google のたとえば、ListItem は Button の前にイベントを受信します。
メインパスでは、イベントは UI ツリーのリーフノードからルートノードです。このフェーズでは、通常、ジェスチャーを使用します。イベントをリッスンする際のデフォルトのパス。このパスでのジェスチャー処理つまり、リーフノードはその親ノードよりも優先されます。動作するように構成されています。この例では、Button が受け取る ListItemより前に表示されます。
最終パスでは、UI の上部からイベントがもう一度フローします。リーフノードに移動します。このフローにより、スタックの上位にある要素が親によるイベント消費に反応しますたとえば、ボタンをタップすると、押下がスクロール可能な親のドラッグに変わったときにリップルインジケータを表示します。

イベントフローを視覚的に表すと、次のようになります。

入力の変更が使用されると、この情報はその変更から示されます。

コードでは、必要なパスを指定できます。

Modifier.pointerInput(Unit) {
    awaitPointerEventScope {
        val eventOnInitialPass = awaitPointerEvent(PointerEventPass.Initial)
        val eventOnMainPass = awaitPointerEvent(PointerEventPass.Main) // default
        val eventOnFinalPass = awaitPointerEvent(PointerEventPass.Final)
    }
}UnderstandGesturesSnippets.kt

このコードスニペットでは、同じイベントがこれらはメソッド呼び出しを待機しますが、消費に関するデータには変更されました。

ジェスチャーをテストする

テストメソッドでは、 performTouchInput メソッドを使用します。これにより完全な操作（ピンチ操作や長押しクリックなど）または低レベルの操作（カーソルを一定のピクセル数だけ動かします）。

composeTestRule.onNodeWithTag("MyList").performTouchInput {
    swipeUp()
    swipeDown()
    click()
}UnderstandGesturesSnippets.kt

その他の例については、performTouchInput のドキュメントをご覧ください。

詳細

Jetpack Compose でのジェスチャーについて詳しくは、以下をご覧ください。リソース:

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose のユーザー補助
スクロール
タップして押す

概要

タップして押す