タップして押す

多くのコンポーザブルには、タップまたはクリックのサポートが組み込まれており、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 の動作を調整する代わりに、抽象化レベルを下げて、pointerInput 修飾子を detectTapGestures メソッドと組み合わせて直接使用できます。

@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