既存デザインを変更せずにタップ領域を広げる方法

Shibuya.apk #53 - 20/06/2025
https://shibuya-apk.connpass.com/event/356435/

アニメーションが動かないため、分かりにくいところはグーグルスライドでご確認ください：
https://docs.google.com/presentation/d/1Q_mhqa9oBdkWimUa1jA1t3k0EJOsaK40zZKSY9slwVE/

TouchDelegateの全容：https://gist.github.com/tahia910/4631bf763408c8623854258aaed17cb1

Transcript

1. 1 既存デザインを変更せずに タップ領域を広げる方法 a Shibuya.apk #53 2025.06.20 Tiphaine
2. 2 ティフェン Tiphaine • Androidエンジニア @ DeNA (Pococha) • DroidKaigiスタッフ • Mobile Dev Japan運営
3. 3 Androidエンジニアとして、 野望がある a
4. 4 最高に使いやすい アプリを 作りたい！！ ！a 🔥🔥🔥
5. 5 どうすればいい？ a 🤔
6. 6 • 最新版：マテリアルデザイン3 • ガイドラインに沿った実装をすれば、 大抵のアクセシビリティ問題は解決できる 公式ガイドラインを読もう 参考：マテリアルデザイン３
7. 7 • タップ可能領域を最小48dpにすべき タップしやすさに関して 参考：マテリアルデザイン３、Pixel8のユーザー補助設定
8. 8 通常の広げ方 • paddingを追加する 参考：マテリアルデザイン２
9. 9 通常の広げ方 • minHeight/minWidthに48dpを設定する android:minHeight="48dp" android:minWidth="48dp" Modifier .widthIn(min = 48.dp) .heightIn(min = 48.dp)
10. 10 でも見た目の都合 で、 この方法が使えない場合もある ... a 🥺
11. 11 例えば... • ボタンに背景やborderがある
12. 12 例えば... • 隣の要素が近すぎる 18dp 例：テキストが すぐ下にある
13. 13 もうしょうがないか ... a 😞
14. 14 ちょっと待った まだなんとかできるかも！ a 🤚
15. 1. With View System 15 👉 TouchDelegate a
16. 16 例：背景がついているボタン
17. 17 fun View.addTouchDelegate() { // タップ領域は最小48dpにする // const val MIN_TOUCH_TARGET_DP = 48 val minTouchTargetPx = MIN_TOUCH_TARGET_DP * context.resources.displayMetrics.density } 参考：Trackr(Google)、Tamás Kozmér
18. 18 fun View.addTouchDelegate() { // TouchDelegateはタップ領域を広げたいViewの親に設定する val parent = parent as View parent.post { } } 参考：Trackr(Google)、Tamás Kozmér
19. 19 fun View.addTouchDelegate() { //... val parent = parent as View parent.post { // Viewのタップ領域を取得する（表示されているサイズ） val delegateArea = Rect() getHitRect(delegateArea) val heightPx = delegateArea.height() val widthPx = delegateArea.width() } } 参考：Trackr(Google)、Tamás Kozmér
20. 20 val parent = parent as View parent.post { // ... // 現在のタップ領域の高さが48dp以下の場合、広げる if (heightPx < minTouchTargetPx) { // 実際の差分を計算して、左右に均等に追加する val extraSpace = ceil( (minTouchTargetPx - heightPx) / 2 ) delegateArea.top -= extraSpace.toInt() delegateArea.bottom += extraSpace.toInt() } } 参考：Trackr(Google)、Tamás Kozmér
21. 21 val parent = parent as View parent.post { // ... 　　 // 幅も同様の処理が必要 if (widthPx < minTouchTargetPx) { // Float計算のため、結果をceilで繰り上げする val extraSpace = ceil( (minTouchTargetPx - widthPx) / 2 ) delegateArea.left -= extraSpace.toInt() delegateArea.right += extraSpace.toInt() } } 参考：Trackr(Google)、Tamás Kozmér
22. 22 val parent = parent as View parent.post { // ... // 親に「この範囲なら私のイベントにしてね」と伝える parent.touchDelegate = TouchDelegate(delegateArea, this) } } 参考：Trackr(Google)、Tamás Kozmér
23. 23 • 同じ親を持つViewに複数 設定するとうまく行かない • 親のbound以上に領域を 広げられない ⚠ 注意点
24. 2. With Compose 24 👉 sizeIn & wrapContentSize a
25. 25 例：隣の要素が近い場合 A a
26. 26 Image( painter = painterResource(R.drawable.ic_close_small), contentDescription = "close", modifier = Modifier .sizeIn(18.dp) .wrapContentSize(Alignment.Center) .size(18.dp) .background(Color.Green) .align(Alignment.End) .clickable { }, )
27. 27 Image( painter = painterResource(R.drawable.ic_close_small), contentDescription = "close", modifier = Modifier .sizeIn(18.dp) .wrapContentSize(Alignment.Center) .size(18.dp) .background(Color.Green) .align(Alignment.End) .clickable { }, )
28. 28 🎉
29. 29 Composeで 親を超えて広げる方法は また別の機会で説明 A a 🥲
30. 3. おまけ 30
31. 31 • Viewが被っても困らないConstraintLayoutや FrameLayoutなどで書き直す • 画面全体のonTouchEvent処理でViewの座標を 使って計算する（マジで？） ガチ勢向け
32. 32 ところで...a
33. 33 隣にタップ可能な要素が ある場合は ....？a
34. 34 GAME OVER a 🥲
35. Thanks! Special Thanks: • Hidenari Tajima • Shogo Takasaki 35 テーマ: SlidesCarnival tahia910