Posted at

[小ネタ] 反応エリアを拡大する


細い所にある UI

主にデザイン的な理由で、細い所にボタンを置かなくてはならない場合があります(下図参照)。

image.png


ボタンの見た目の範囲しか押せないと誰が決めた?

先の画像のボタンは 16x15 [pixel]1 ですが、この見た目の範囲より大きい反応範囲を設定できます。

それが

TouchTargetExpansion プロパティ

です。

TouchTargetExpansion プロパティを使うと押せる範囲を広げられます。

下図は DocWiki から拝借したものです。

TouchTarget.png

TouchTargetExpansion は TBounds 型のプロパティでオブジェクトインスペクタで見ると下図のようになります。

ここに適切な値、たとえば全てに 4 を設定すると上下左右に 4 [pixel] ずつ押せる範囲が広がります。

image.png


まとめ

モバイル向けアプリケーションはマウスではなく指で操作するため、TouchTargetExpansion を適切に設定して快適な UX に仕上げたい所です。





  1. FireMonkey は仮想解像度で動作するため、ここでいう 1 [pixel] が実際の画素で 1 [pixel] になるわけではありません。