Slide 1
Slide 1 text
タッチイベントの仕組みを理解して
ジェスチャーを使いこなそう
2024年9⽉13⽇
DroidKaigi 2024
usuiat
1
Composeの
Slide 2
Slide 2 text
⾅井 篤志 / @usuiat / うっすぃー
Androidエンジニア
Jetpack Composeが好き
サイボウズ / Garoon モバイル
個⼈開発 / Zoomable
著書「詳解 Jetpack Compose ── 基礎から学ぶAndroidアプリの宣⾔的UI」
2024年11⽉末ごろ 技術評論社より発売予定
2
Slide 3
Slide 3 text
このセッションのねらい
3
Composeのジェスチャーを
あまり知らない⼈には
ジェスチャーの
⾯⽩さと奥深さを
知ってほしい
基本を知っている⼈には
トラブル解決のための
実例やノウハウを
持ち帰ってほしい
Slide 4
Slide 4 text
ジェスチャーの例
4
クリック ダブルクリック ⻑押し ドラッグ (パン)
ズーム (ピンチ) 回転 その他
Slide 5
Slide 5 text
このセッションの内容
• 2種類のジェスチャーAPIの使い⽅
• ⾃分でジェスチャーを実装する⽅法
• 実装時に気をつけたいポイント
• 実例から学ぶジェスチャー競合の回避策
5
Slide 6
Slide 6 text
• 2種類のジェスチャーAPIの使い⽅
• ⾃分でジェスチャーを実装する⽅法
• 実装時に気をつけたいポイント
• 実例から学ぶジェスチャー競合の回避策
6
Slide 7
Slide 7 text
2種類のジェスチャーAPI
7
Modifier.〜able detect〜Gestures
Slide 8
Slide 8 text
Modifier.〜able
clickable クリック
combinedClickable クリック、ダブルクリック、⻑押し
draggable 上下または左右のドラッグ
draggable2D 任意の⽅向のドラッグ
anchoredDraggable 指を離した後に定位置に⽌まるドラッグ
transformable ズーム、パン、回転
8
ジェスチャー検出 ＋
エフェクトによる演出
トークバックによるアクセシビリティ
Slide 9
Slide 9 text
combinedClickable
9
Image(modifier = Modifier
.combinedClickable(
onClickLabel = "clickの動作を確認する",
role = Role.Button,
onLongClick = { logger.log("LongClick") },
onDoubleClick = { logger.log("DoubleClick") },
onClick = { logger.log("Click") },
)
)
クリック時のリップルエフェクト
トークバックの内容を設定
Slide 10
Slide 10 text
detect〜Gestures
detectTapGestures タップ、ダブルタップ、⻑押し
detectDragGestures 任意の⽅向のドラッグ
detectVerticalDragGestures 上下⽅向のドラッグ
detectHorizontalDragGestures 左右⽅向のドラッグ
detectDragGesturesAfterLongPress ⻑押し後のドラッグ
detectTransformGestures ズーム、パン、回転
10
ジェスチャー検出のみ
Modifier.〜ableよりも詳細な情報を取得できるものもある
Slide 11
Slide 11 text
detectTapGestures
11
Image(modifier = Modifier
.pointerInput(Unit) {
detectTapGestures(
onDoubleTap = { offset ->
logger.log("Double tap at $offset")
},
onLongPress = { offset ->
logger.log("Long press at $offset”)
},
onTap = { offset ->
logger.log("Tap at $offset")
}
)
}
)
エフェクトやトークバックの機能はない
ジェスチャーの位置を
取得できる
Slide 12
Slide 12 text
⽐較
Modifier.〜able detect〜Gestures
クリック
ダブルクリック
⻑押し
clickable
combinedClickable
detectTapGestures
ドラッグ draggable2D
draggable
detectDragGestures
detectHorizontalDragGestures
detectVerticalDragGestures
パン、ズーム
回転
transformable detectTransformGestures
その他 anchoredDraggable
scrollable
hoverable etc.
detectDragGesturesAfterLongPress
12
トークバック
エフェクト
位置取得
位置取得
トークバック
エフェクト
位置取得
Slide 13
Slide 13 text
標準APIではできないこと
• 独⾃のジェスチャーの定義
• タップとドラッグを組み合わせたジェスチャー
• 複数の指の位置を利⽤したジェスチャー
• ジェスチャー競合の調整
• 重なったコンポーザブルがそれぞれジェスチャーを実装している場合
の細かい制御
⾃分でジェスチャーを実装する必要がある
13
Slide 14
Slide 14 text
• 2種類のジェスチャーAPIの使い⽅
• ⾃分でジェスチャーを実装する⽅法
• 実装時に気をつけたいポイント
• 実例から学ぶジェスチャー競合の回避策
14
Slide 15
Slide 15 text
あらためて、ジェスチャーって何？
？
15
Slide 16
Slide 16 text
ジェスチャーとは
16
※厳密には指だけではなくマウスカーソルなども扱いますが、
このセッションではタッチパネルを指で操作している前提で説明します。
タッチの状態の変化を
画⾯に触れている指について
連続的に取得したもの
？
Slide 17
Slide 17 text
ジェスチャーとは
17
タッチの状態の変化を
画⾯に触れている指について
連続的に取得したもの
Slide 18
Slide 18 text
タッチ状態の変化は
PointerInputChangeで表される
18
※コードはイメージです
class PointerInputChange {
}
Slide 19
Slide 19 text
タッチ状態の変化は
PointerInputChangeで表される
19
タッチ位置
position
previousPosition
class PointerInputChange {
val position: Offset
val previousPosition: Offset
}
※コードはイメージです
Slide 20
Slide 20 text
タッチ状態の変化は
PointerInputChangeで表される
20
タッチ位置
イベント発⽣時刻
position
previousPosition
class PointerInputChange {
val position: Offset
val previousPosition: Offset
val uptimeMillis: Long
val previousUptimeMillis: Long
}
※コードはイメージです
Slide 21
Slide 21 text
タッチ状態の変化は
PointerInputChangeで表される
21
タッチ位置
イベント発⽣時刻
接触状態
position
previousPosition
class PointerInputChange {
val position: Offset
val previousPosition: Offset
val uptimeMillis: Long
val previousUptimeMillis: Long
val pressed: Boolean
val previousPressed: Boolean
}
※コードはイメージです
Slide 22
Slide 22 text
タッチ状態の変化は
PointerInputChangeで表される
22
class PointerInputChange {
fun changedToDown(): Boolean
fun changedToUp(): Boolean
fun positionChanged(): Boolean
fun positionChange(): Offset
}
指が画⾯に触れたかどうか
指が画⾯から離れたかどうか
指の位置が変化したかどうか
指の位置の変化量
※コードはイメージです
Slide 23
Slide 23 text
ジェスチャーとは？
23
タッチの状態の変化を
画⾯に触れている指について
連続的に取得したもの
Slide 24
Slide 24 text
画⾯に触れている指のリストは
PointerEventで表される
24
class PointerEvent {
val changes: List
}
※コードはイメージです
画⾯に触れている指の数だけ
PointerInputChangeを保持
Slide 25
Slide 25 text
画⾯に触れている指のリストは
PointerEventで表される
25
class PointerEvent {
val changes: List
val type: PointerEventType
}
画⾯に触れている指の数だけ
PointerInputChangeを保持
イベントの概要
（Press / Move / Releaseなど）
※コードはイメージです
Slide 26
Slide 26 text
class PointerEvent {
fun calculateCentroid(): Offset
fun calculateCentroidSize(): Float
fun calculatePan(): Offset
fun calculateRotation(): Float
fun calculateZoom(): Float
}
重⼼
広がり
移動量
回転量
ズーム
PointerInputChange
のリストから算出
している
画⾯に触れている指のリストは
PointerEventで表される
26
※コードはイメージです
Slide 27
Slide 27 text
ジェスチャーとは？
27
タッチの状態の変化を
画⾯に触れているすべての指について
連続的に取得したもの
Slide 28
Slide 28 text
awaitPointerEventを繰り返し呼び出して、
PointerEventを連続的に取得する
28
val pointerEvent = awaitPointerEvent() イベントを⼀つ取得
Slide 29
Slide 29 text
awaitPointerEventを繰り返し呼び出して、
PointerEventを連続的に取得する
29
do {
val pointerEvent = awaitPointerEvent()
} while (pointerEvent.changes.any { it.pressed })
イベントを⼀つ取得
指が触れている間はループ
Slide 30
Slide 30 text
awaitPointerEventを繰り返し呼び出して、
PointerEventを連続的に取得する
30
do {
val pointerEvent = awaitPointerEvent()
// pointerEventの内容を調べる処理
} while (pointerEvent.changes.any { it.pressed })
イベントを⼀つ取得
指が触れている間はループ
Slide 31
Slide 31 text
awaitPointerEventを繰り返し呼び出して、
PointerEventを連続的に取得する
31
• ⼀般的には、最初の指が画⾯に触れたらジェスチャー
開始、最後の指が離れたら終了
• ただしダブルタップのように、指が触れて離れて、を
2回以上繰り返すジェスチャーも定義可能
PointerEvent
(Press)
PointerEvent
(Move)
PointerEvent
(Move)
PointerEvent
(Move)
PointerEvent
(Release)
Slide 32
Slide 32 text
ジェスチャー実装例
32
Modifier.pointerInput(Unit) {
}
pointerInputのラムダに記述
Slide 33
Slide 33 text
ジェスチャー実装例
33
Modifier.pointerInput(Unit) {
awaitEachGesture {
}
}
}
pointerInputのラムダに記述
1つのジェスチャーを記述
Slide 34
Slide 34 text
ジェスチャー実装例
34
Modifier.pointerInput(Unit) {
awaitEachGesture {
val event = awaitPointerEvent()
}
}
pointerInputのラムダに記述
1つのジェスチャーを記述
1つのイベントを取得
Slide 35
Slide 35 text
ジェスチャー実装例
35
Modifier.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
} while (event.changes.any { it.pressed })
}
}
pointerInputのラムダに記述
1つのジェスチャーを記述
1つのイベントを取得
指が離れるまでループ
Slide 36
Slide 36 text
ジェスチャー実装例
36
Modifier.pointerInput(Unit) {
awaitEachGesture {
var dx = 0f
do {
val event = awaitPointerEvent()
dx += event.calculatePan().x
} while (event.changes.any { it.pressed })
}
}
pointerInputのラムダに記述
1つのジェスチャーを記述
1つのイベントを取得
移動量を算出
指が離れるまでループ
Slide 37
Slide 37 text
ジェスチャー実装例
37
Modifier.pointerInput(Unit) {
awaitEachGesture {
var dx = 0f
do {
val event = awaitPointerEvent()
dx += event.calculatePan().x
} while (event.changes.any { it.pressed })
if (dx > 100) {
logger.log("Swipe Right")
} else if (dx < -100) {
logger.log("Swipe Left")
}
}
}
pointerInputのラムダに記述
1つのジェスチャーを記述
1つのイベントを取得
移動量を算出
指が離れるまでループ
条件を満たしたら処理を実⾏
Slide 38
Slide 38 text
ジェスチャー実装例
38
Modifier.pointerInput(Unit) {
awaitEachGesture {
var dx = 0f
do {
val event = awaitPointerEvent()
dx += event.calculatePan().x
} while (event.changes.any { it.pressed })
if (dx > 100) {
logger.log("Swipe Right")
} else if (dx < -100) {
logger.log("Swipe Left")
}
}
}
Slide 39
Slide 39 text
ジェスチャーとは
39
タッチの状態の変化を
画⾯に触れている指について
連続的に取得したもの
PointerInputChange
PointerEvent
awaitPointerEventを繰り返し呼ぶ
Slide 40
Slide 40 text
イベントの伝達順序
40
Box（親）
Box {
Image()
}
⼦から親へ
（指に近い側から）
順に伝わる
PointerEvent
Image（⼦）
PointerEvent
Slide 41
Slide 41 text
イベントの伝達順序
41
Box(modifier = Modifier
.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
logger.log("Box ${event.type}")
} while (event.changes.any { it.pressed })
}
}
) {
}
Box（親）のジェスチャー
Slide 42
Slide 42 text
イベントの伝達順序
42
Box(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Box ${event.type}")
...
) {
Image(modifier = Modifier
.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
logger.log("Image ${event.type}")
} while (event.changes.any { it.pressed })
}
}
)
}
Box（親）のジェスチャー
Image（⼦）のジェスチャー
Slide 43
Slide 43 text
イベントの伝達順序
43
Box(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Box ${event.type}")
...
) {
Image(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Image ${event.type}")
...
)
}
Box（親）のジェスチャー
Image（⼦）のジェスチャー
Slide 44
Slide 44 text
Box（親）
イベントの消費
44
isConsumed == true
Image（⼦）
consume()
Slide 45
Slide 45 text
イベントの消費
45
Box(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Box ${event.type}")
...
) {
Image(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Image ${event.type}")
...
)
}
Slide 46
Slide 46 text
イベントの消費
46
Box(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Box ${event.type}")
...
) {
Image(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Image ${event.type}")
event.changes.forEach { it.consume() }
...
)
}
イベントを消費
Slide 47
Slide 47 text
イベントの消費
47
Box(modifier = Modifier
...
val event = awaitPointerEvent()
if (event.changes.any { it.isConsumed.not() }) {
logger.log("Box ${event.type}")
}
...
) {
Image(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Image ${event.type}")
event.changes.forEach { it.consume() }
...
)
}
イベントを消費
消費済みのイベントを無視
Slide 48
Slide 48 text
イベントの消費
48
Box(modifier = Modifier
...
val event = awaitPointerEvent()
if (event.changes.any { it.isConsumed.not() }) {
logger.log("Box ${event.type}")
}
...
) {
Image(modifier = Modifier
...
val event = awaitPointerEvent()
logger.log("Image ${event.type}")
event.changes.forEach { it.consume() }
...
)
}
イベントを消費
消費済みのイベントを無視
Slide 49
Slide 49 text
• 2種類のジェスチャーAPIの使い⽅
• ⾃分でジェスチャーを実装する⽅法
• 実装時に気をつけたいポイント
• 実例から学ぶジェスチャー競合の回避策
49
Slide 50
Slide 50 text
私がライブラリ開発中に
実際にハマった落とし⽳を
3つ紹介します
50
Slide 51
Slide 51 text
pointerInputのkeyは忘れずに
51
.pointerInput(Unit) {
}
安易にUnitを設定しがちだが・・・
Slide 52
Slide 52 text
失敗例
52
var count by remember { mutableIntStateOf(1) }
val logger = remember(count) { Logger() }
Image(modifier = Modifier
.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
logger.log("${event.type}")
} while (event.changes.any { it.pressed })
}
}
)
Button(onClick = { count++ }) { Text("Reset Log") }
loggerが新しくなっても
古いloggerを参照し続ける
Slide 53
Slide 53 text
修正例
53
var count by remember { mutableIntStateOf(1) }
val logger = remember(count) { Logger() }
Image(modifier = Modifier
.pointerInput(key1 = logger) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
logger.log("${event.type}")
} while (event.changes.any { it.pressed })
}
}
)
Button(onClick = { count++ }) { Text("Reset Log") }
keyにloggerを指定
ラムダが更新されて最新のloggerを参照できる
Slide 54
Slide 54 text
pointerInputのkeyは忘れずに
54
pointerInputのラムダ内で参照しているオブジェクトが
作り直される場合は、keyに指定しましょう
Slide 55
Slide 55 text
タップのつもりでも指は動く
55
指の位置が少しでも動いたらドラッグ、
まったく動かなかったらタップ
・・・という実装は、誤検出が多くなる
Slide 56
Slide 56 text
失敗例
56
.pointerInput(Unit) {
awaitEachGesture {
var moved = false
do {
val event = awaitPointerEvent()
if (event.type == PointerEventType.Move) {
moved = true
}
} while (event.changes.any { it.pressed })
if (moved) {
logger.log("Drag")
} else {
logger.log("Tap")
}
}
}
Moveイベントを取得
⼀度でもMoveイベントが
発⽣したらドラッグ
Slide 57
Slide 57 text
タッチスロップ（TouchSlop）の判定
57
画⾯に触れた指の移動距離が閾値以下なら、
移動していないとみなす
閾値にはviewConfiguration.touchSlopをつかうとよい
（PointerInputScopeで利⽤可）
touchSlop閾値
Slide 58
Slide 58 text
修正例
58
.pointerInput(Unit) {
awaitEachGesture {
var distance = 0f
do {
val event = awaitPointerEvent()
distance += event.calculatePan().getDistance()
} while (event.changes.any { it.pressed })
if (distance > viewConfiguration.touchSlop) {
logger.log("Drag")
} else {
logger.log("Tap")
}
}
}
移動距離を算出
移動距離がtouchSlopより
⻑ければドラッグ
Slide 59
Slide 59 text
タップのつもりでも指は動く
59
指が移動したかどうかは
タッチスロップで判定しましょう
Slide 60
Slide 60 text
2本の指が同時に動くとは限らない
60
2本以上の指のジェスチャーでは、
すべての指が同時に画⾯に触れたり
離れたりするとは限らない
centroid（重⼼）は、
指の数が変わると⼤きく変化する
centroid
Release
centroid
Slide 61
Slide 61 text
失敗例
61
.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
val centroid = event.calculateCentroid()
val time = event.changes[0].uptimeMillis
scope.launch {
dragState.dragTo(centroid)
dragState.trackVelocity(centroid, time)
}
} while (event.changes.any { it.pressed })
scope.launch { dragState.doFling() }
}
}
centroidに基づいて速度を算出
速度に基づいてFling（慣性動作）
Slide 62
Slide 62 text
修正例
62
.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
val centroid = event.calculateCentroid()
val time = event.changes[0].uptimeMillis
scope.launch {
dragState.dragTo(centroid)
if (event.changes.size == 1) {
dragState.trackVelocity(centroid, time)
}
}
} while (event.changes.any { it.pressed })
scope.launch { dragState.doFling() }
}
}
指が1本の場合のみ
速度を算出
Slide 63
Slide 63 text
2本の指が同時に動くとは限らない
63
centroidは指の数が変化するときに⼤きく変化するので
使い⽅に注意しましょう
centroidよりもpanやpositionを利⽤する⽅が良い場合も
Slide 64
Slide 64 text
• 2種類のジェスチャーAPIの使い⽅
• ⾃分でジェスチャーを実装する⽅法
• 実装時に気をつけたいポイント
• 実例から学ぶジェスチャー競合の回避策
64
Slide 65
Slide 65 text
Zoomableというライブラリで直⾯した
ジェスチャー競合の問題と
その回避策を紹介します
65
Slide 66
Slide 66 text
Zoomableの紹介
66
• Imageなどのコンポーザブルを
ズームできる
• Pagerやスクロールする
コンポーザブルの上でも使える
https://github.com/usuiat/Zoomable
ピンチ ダブルタップ 1本指ズーム
Slide 67
Slide 67 text
ライブラリを作ったきっかけ
フォトビューアーアプリで、
HorizontalPagerの上に配置した写真を
ピンチジェスチャーでズームしたかった
67
Slide 68
Slide 68 text
なぜ標準APIではダメだったのか？
• Modifier.transformableやdetectTransformGesturesは内部でイベントを
消費する
• 親コンポーザブルのPagerにイベントが伝わらず、ページ送りできない
68
Image（⼦）
Pager（親）
detectTransformGestures
consume
Slide 69
Slide 69 text
基本的な考え⽅
• Zoomableが利⽤するジェスチャーは消費する
69
Image（⼦）
Pager（親）
zoomable
Zoom
consume
Slide 70
Slide 70 text
基本的な考え⽅
• Zoomableが利⽤しないジェスチャーは消費しない
70
Image（⼦）
Pager（親）
zoomable
Swipe
Slide 71
Slide 71 text
基本的な実装イメージ
71
class ZoomState {
var scale
fun canConsumeGesture(zoom: Float): Boolean {
return scale != 1f || zoom != 1f
}
}
ズームされている場合
または
ズームしようとしている場合
はイベントを消費する
Slide 72
Slide 72 text
基本的な実装イメージ
72
.pointerInput(Unit) {
awaitEachGesture {
do {
val event = awaitPointerEvent()
val zoom = event.calculateZoom()
if (zoomState.canConsumeGesture(zoom)) {
zoomState.applyZoom(zoom)
event.changes.forEach { it.consume() }
}
} while (event.changes.any { it.pressed })
}
}
イベントを利⽤する場合のみ
ズーム処理を呼び出し、
イベントを消費する
Slide 73
Slide 73 text
基本的な実装イメージ
73
HorizontalPager() {
val zoomState = remember { ZoomState() }
Image(modifier = Modifier
.scale(zoomState.scale)
.pointerInput(Unit) {
...
}
)
}
Slide 74
Slide 74 text
ジェスチャー競合との戦い
• ズームとページ送りが同時に発⽣する
場合がある
74
https://github.com/usuiat/Zoomable/issues/93
Slide 75
Slide 75 text
ピンチジェスチャー判定フロー
75
awaitPointerEvent
TouchSlop?
canConsume?
onGesture(zoom, pan)
Released?
consume
Y
N
N
N
Y
Y
Slide 76
Slide 76 text
原因はタッチスロップ判定
76
Zoomable
Pager
Press Move
Swipe
1 2
3
4 4
Press
Move
(TouchSlop判定中)
Move
(TouchSlop判定済)
Press
Move
Zoom
consume
Slide 77
Slide 77 text
PointerEventPassの利⽤
77
1 3
1つのPointerEventは
コンポーザブル階層を
3回伝わる
① Initial
② Main
③ Final
親
2 ⼦
Slide 78
Slide 78 text
PointerEventPassの利⽤
78
1
① Initialパス
Mainパスの前に実⾏される。
親がInitialでイベントを消費
することで、Mainで⼦がイ
ベントを利⽤するのを抑制
できる
親
⼦
Slide 79
Slide 79 text
PointerEventPassの利⽤
79
② Mainパス
通常はこのパスを利⽤する
親
⼦
2
Slide 80
Slide 80 text
PointerEventPassの利⽤
80
3
③ Finalパス
Mainパスの後に実⾏される。
親がMainパスでイベントを
消費したことを、⼦はFinal
パスで検知して処理をキャ
ンセルできる
親
⼦
Slide 81
Slide 81 text
PointerEventPassを利⽤した修正案
81
Zoomable
Pager
Press Move
Swipe
consume
https://github.com/usuiat/Zoomable/pull/143
Final
1 2
3
4 4
Press
Press
親のイベント消費を検知し
ズーム処理をキャンセル
Move
(TouchSlop判定中)
Slide 82
Slide 82 text
Zoomable
Pager
1 2
3
4 4
Press
Move
(TouchSlop判定中)
Press
Press Move
Swipe
consume
Finalパスで親のイベント
消費を検知しズーム処理
をキャンセル
https://github.com/usuiat/Zoomable/pull/143
PointerEventPassを利⽤した修正案
82
まだちょっと問題が！
Slide 83
Slide 83 text
PointerEventPassを利⽤した修正案の問題
83
Zoomable
Clickable
consume
Press /
Release
Click
Press /
Release
Finalパスで親のイベント消費を
検知しタップやダブルタップを
キャンセルしてしまう
https://github.com/usuiat/Zoomable/issues/238
Slide 84
Slide 84 text
PointerEventPassを利⽤した修正案（改）
84
Zoomable
Move
1 2 ３
Press
consume
Move
(TouchSlop判定中)
consume
Move
(TouchSlop判定済)
https://github.com/usuiat/Zoomable/pull/240
Slide 85
Slide 85 text
まだまだ問題が残っているかもしれません
Issue / PR歓迎です
85
https://github.com/usuiat/Zoomable/issues
Slide 86
Slide 86 text
• 2種類のジェスチャーAPIの使い⽅
• ⾃分でジェスチャーを実装する⽅法
• 実装時に気をつけたいポイント
• 実例から学ぶジェスチャー競合の回避策
86
Slide 87
Slide 87 text
まとめ
• 2種類のジェスチャーAPIの使い⽅の⽐較
• Modifier.〜ableはUI作成に便利。
• detect〜Gesturesはジェスチャー検出に特化
• ⾃分でジェスチャーを実装する⽅法
• PointerEventを取得し、タッチ状態の変化を調べて、条件を満たして
いたら処理を実⾏
• 実装時に気をつけたいポイント
• 3つの失敗例と修正例を紹介
• 実例から学ぶジェスチャー競合の回避策
• イベントの消費を細かく制御してズームジェスチャーとページ送りを
両⽴
87
Slide 88
Slide 88 text
参考
サンプルコード
https://github.com/usuiat/GesturePlayGround
88
Slide 89
Slide 89 text
ありがとうございました
89