タップして押す

多くのコンポーザブルには、タップやクリックのサポートが組み込まれており、onClick ラムダが含まれています。たとえば、サーフェスとのインタラクションに適したすべてのマテリアル デザインの動作を含む、クリック可能な Surface を作成できます。

Surface(onClick = { /* handle click */ }) {
    Text("Click me!", Modifier.padding(24.dp))
}
TapAndPress.kt

ただし、ユーザーがコンポーザブルを操作する方法はクリックだけではありません。このページでは、1 つのポインタが関与するジェスチャーについて説明します。この場合、そのポインタの位置はイベントの処理に重要ではありません。次の表に、これらの種類のジェスチャーを示します。

ジェスチャー

説明

タップ（またはクリック）

ポインタが下に移動してから上に移動する

ダブルタップ

ポインタが下、上、下、上の順に移動する

長押し

ポインタが下がり、長時間保持される

プレス

ポインタが下がる

タップまたはクリックに応答する

clickable は、タップやクリックにコンポーザブルを反応させるためによく使用される修飾子です。この修飾子には、フォーカス、マウスやタッチペンのホバー、押下時のカスタマイズ可能な視覚的な表示のサポートなど、追加機能も含まれています。この修飾子は、広い意味での「クリック」に反応します。マウスや指によるクリックだけでなく、キーボード入力によるクリック イベントやユーザー補助サービス使用時のクリック イベントにも反応します。

画像のグリッドを想像してみてください。ユーザーが画像をクリックすると、その画像が全画面表示されます。

この動作を実装するには、グリッド内の各アイテムに clickable 修飾子を追加します。

@Composable
private fun ImageGrid(photos: List<Photo>) {
    var activePhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
    LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
        items(photos, { it.id }) { photo ->
            ImageItem(
                photo,
                Modifier.clickable { activePhotoId = photo.id }
            )
        }
    }
    if (activePhotoId != null) {
        FullScreenImage(
            photo = photos.first { it.id == activePhotoId },
            onDismiss = { activePhotoId = null }
        )
    }
}
TapAndPress.kt

clickable 修飾子を使用すると、追加の動作も追加されます。

  • interactionSource と indication。ユーザーがコンポーザブルをタップすると、デフォルトでリップルが描画されます。これらのカスタマイズ方法については、ユーザー操作の処理をご覧ください。
  • ユーザー補助サービスがセマンティクス情報を設定して要素を操作できるようにします。
  • キーボードまたはジョイスティックによる操作をサポートします。フォーカスを設定したり、Enter キーまたは D-pad の中央を押したりすることで操作できます。
  • 要素をホバー可能にして、マウスやタッチペンがホバーしたときに応答するようにします。

長押ししてコンテキスト メニューを表示する

combinedClickable を使用すると、通常のクリック動作に加えて、ダブルタップや長押しの動作を追加できます。combinedClickable を使用すると、ユーザーがグリッド画像を長押ししたときにコンテキスト メニューを表示できます。

var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
val haptics = LocalHapticFeedback.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
    items(photos, { it.id }) { photo ->
        ImageItem(
            photo,
            Modifier
                .combinedClickable(
                    onClick = { activePhotoId = photo.id },
                    onLongClick = {
                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
                        contextMenuPhotoId = photo.id
                    },
                    onLongClickLabel = stringResource(R.string.open_context_menu)
                )
        )
    }
}
if (contextMenuPhotoId != null) {
    PhotoActionsSheet(
        photo = photos.first { it.id == contextMenuPhotoId },
        onDismissSheet = { contextMenuPhotoId = null }
    )
}
TapAndPress.kt

ユーザーが要素を長押ししたときに触覚フィードバックを追加することをおすすめします。そのため、このスニペットには performHapticFeedback 呼び出しが含まれています。

スクリムをタップしてコンポーザブルを閉じる

上記の例では、clickable と combinedClickable はコンポーザブルに便利な機能を追加します。操作時に視覚的なインジケーターを表示し、ホバーに応答します。また、フォーカス、キーボード、ユーザー補助のサポートも含まれています。ただし、この追加動作が望ましいとは限りません。

画像の詳細画面を見てみましょう。背景は半透明にする必要があります。また、ユーザーがその背景をタップして詳細画面を閉じられる必要があります。

この場合、その背景にはインタラクションに関する視覚的な表示がなく、ホバーに応答せず、フォーカス可能ではなく、キーボード イベントとユーザー補助イベントに対するレスポンスは一般的なコンポーザブルとは異なります。clickable の動作を適応させる代わりに、抽象化レベルを下げて、detectTapGestures メソッドと組み合わせて pointerInput 修飾子を直接使用できます。

@Composable
private fun Scrim(onClose: () -> Unit, modifier: Modifier = Modifier) {
    val strClose = stringResource(R.string.close)
    Box(
        modifier
            // handle pointer input
            .pointerInput(onClose) { detectTapGestures { onClose() } }
            // handle accessibility services
            .semantics(mergeDescendants = true) {
                contentDescription = strClose
                onClick {
                    onClose()
                    true
                }
            }
            // handle physical keyboard input
            .onKeyEvent {
                if (it.key == Key.Escape) {
                    onClose()
                    true
                } else {
                    false
                }
            }
            // draw scrim
            .background(Color.DarkGray.copy(alpha = 0.75f))
    )
}
TapAndPress.kt

pointerInput 修飾子のキーとして、onClose ラムダを渡します。これにより、ラムダが自動的に再実行され、ユーザーがスクリームをタップしたときに適切なコールバックが呼び出されます。

ダブルタップしてズーム

clickable と combinedClickable に、インタラクションに正しく応答するのに十分な情報が含まれていない場合があります。たとえば、コンポーザブルは、コンポーザブルの境界内でインタラクションが発生した位置にアクセスする必要がある場合があります。

画像の詳細画面をもう一度見てみましょう。ダブルタップして画像を拡大できるようにすることをおすすめします。

動画でわかるように、タップ イベントの位置を中心にズームインします。画像の左側と右側をズームインした場合の結果は異なります。pointerInput 修飾子と detectTapGestures を組み合わせて、タップ位置を計算に組み込むことができます。

var zoomed by remember { mutableStateOf(false) }
var zoomOffset by remember { mutableStateOf(Offset.Zero) }
Image(
    painter = rememberAsyncImagePainter(model = photo.highResUrl),
    contentDescription = null,
    modifier = modifier
        .pointerInput(Unit) {
            detectTapGestures(
                onDoubleTap = { tapOffset ->
                    zoomOffset = if (zoomed) Offset.Zero else
                        calculateOffset(tapOffset, size)
                    zoomed = !zoomed
                }
            )
        }
        .graphicsLayer {
            scaleX = if (zoomed) 2f else 1f
            scaleY = if (zoomed) 2f else 1f
            translationX = zoomOffset.x
            translationY = zoomOffset.y
        }
)
TapAndPress.kt

前へ
操作について理解する
次へ
スクロール