Android と ChromeOS には、卓越したタッチペン エクスペリエンスを提供するアプリを構築するためのさまざまな API が用意されています。MotionEvent クラスは、タッチペンの圧力、向き、傾斜、ホバー、手のひら検出など、画面でのタッチペン操作に関する情報を公開します。低レイテンシのグラフィックスとモーション予測ライブラリにより、画面上のタッチペンのレンダリングが強化されて、ペンと紙のように自然に操作できます。
MotionEvent
MotionEvent クラスは、画面上のタッチポインタの位置や移動など、ユーザー入力操作を表します。タッチペン入力の場合、MotionEvent は圧力、向き、傾斜、ホバーのデータも表します。
イベントデータ
MotionEvent データにアクセスするには、コンポーネントに pointerInput 修飾子を追加します。
@Composable
fun Greeting() {
Text(
text = "Hello, Android!", textAlign = TextAlign.Center, style = TextStyle(fontSize = 5.em),
modifier = Modifier
.pointerInput(Unit) {
awaitEachGesture {
while (true) {
val event = awaitPointerEvent()
event.changes.forEach { println(it) }
}
}
},
)
}
MotionEvent オブジェクトは、UI イベントの次の要素に関連するデータを提供します。
- アクション: デバイスの物理的操作 - 画面をタップする、画面上でポインタを移動する、画面上でホバーする
- ポインタ: 画面を操作するオブジェクトの識別子（指、タッチペン、マウス）
- 軸: データの種類 - x 座標と y 座標、圧力、傾斜、向き、ホバー（距離）
アクション
タッチペンのサポートを実装するには、ユーザーが実行しているアクションを把握する必要があります。
MotionEvent には、モーション イベントを定義するさまざまな ACTION 定数が用意されています。タッチペンで最も重要なアクションには次のようなものがあります。
| アクション | 説明 |
|---|---|
| ACTION_DOWN ACTION_POINTER_DOWN |
ポインタが画面と接触しました。 |
| ACTION_MOVE | 画面上でポインタが動いています。 |
| ACTION_UP ACTION_POINTER_UP |
ポインタが画面に接触しなくなりました。 |
| ACTION_CANCEL | 前回または現在のモーション セットをキャンセルする必要があるとき。 |
アプリは、ACTION_DOWN が発生したときに新しいストロークを開始する、ACTION_MOVE, でストロークを描画する、ACTION_UP がトリガーされたときにストロークを終了するなどのタスクを実行できます。
特定のポインタの ACTION_DOWN から ACTION_UP までの MotionEvent アクションのセットは、モーション セットと呼ばれます。
ポインタ
ほとんどの画面はマルチタッチです。システムは、画面を操作する各指、タッチペン、マウス、その他のポインティング オブジェクトにポインタを割り当てます。ポインタ インデックスを使用すると、1 本目の指の画面に接触する指や 2 本目の指の位置など、特定のポインタの軸情報を取得できます。
ポインタ インデックスの範囲は、0 から MotionEvent#pointerCount() によって返されるポインタの数から 1 を引いた値になります。
ポインタの軸の値にアクセスするには、getAxisValue(axis,
pointerIndex) メソッドを使用します。ポインタ インデックスを省略すると、最初のポインタであるポインタ 0 の値が返されます。
MotionEvent オブジェクトには、使用中のポインタの種類に関する情報が含まれています。ポインタの種類を取得するには、ポインタ インデックスに対して反復処理を行い、getToolType(pointerIndex) メソッドを呼び出します。
ポインタについて詳しくは、マルチタッチ ジェスチャーの処理をご覧ください。
タッチペン入力
TOOL_TYPE_STYLUS を使用すると、タッチペン入力をフィルタできます。
val isStylus = TOOL_TYPE_STYLUS == event.getToolType(pointerIndex)
TOOL_TYPE_ERASER を使用すると、タッチペンが消しゴムとして使用されていることも報告できます。
val isEraser = TOOL_TYPE_ERASER == event.getToolType(pointerIndex)
タッチペンの軸データ
ACTION_DOWN と ACTION_MOVE は、タッチペンに関する軸データ、つまり x 座標と y 座標、圧力、向き、傾斜、ホバーデータを提供します。
このデータへのアクセスを可能にするために、MotionEvent API には getAxisValue(int) が用意されています。ここで、パラメータは次のいずれかの軸 ID です。
| 軸 | getAxisValue() の戻り値 |
|---|---|
AXIS_X |
モーション イベントの x 座標。 |
AXIS_Y |
モーション イベントの y 座標。 |
AXIS_PRESSURE |
タッチスクリーンまたはタッチパッドの場合は、指やタッチペンなどのポインタでかかる圧力。マウスまたはトラックボールの場合は、メインボタンが押された場合は 1、それ以外の場合は 0 になります。 |
AXIS_ORIENTATION |
タッチスクリーンやタッチパッドの場合は、デバイスの垂直面を基準とした指やタッチペンなどのポインタの向き。 |
AXIS_TILT |
タッチペンの傾斜角度（ラジアン単位）。 |
AXIS_DISTANCE |
画面からタッチペンまでの距離。 |
たとえば、MotionEvent.getAxisValue(AXIS_X) は最初のポインタの x 座標を返します。
マルチタッチ ジェスチャーの処理もご覧ください。
職位
次の呼び出しを使用して、ポインタの x 座標と y 座標を取得できます。
MotionEvent#getAxisValue(AXIS_X)またはMotionEvent#getX()MotionEvent#getAxisValue(AXIS_Y)またはMotionEvent#getY()
気圧
ポインタの圧力を取得するには、MotionEvent#getAxisValue(AXIS_PRESSURE) を使用します。最初のポインタの場合は、MotionEvent#getPressure() を使用します。
タッチスクリーンまたはタッチパッドの圧力値は 0（圧力なし）～ 1 の範囲ですが、画面調整によっては高い値が返される場合があります。
向き
方向とは、タッチペンが向いている方向を示します。
ポインタの向きは、getAxisValue(AXIS_ORIENTATION) または getOrientation()（最初のポインタ）を使用して取得できます。
タッチペンの場合、向きは 0 ～ pi（時計回り）または 0 ～-pi 反時計回りのラジアン値として返されます。
向きを使用すると、実際のブラシを実装できます。たとえば、タッチペンがフラットブラシを表す場合、フラットブラシの幅はタッチペンの向きによって異なります。
傾斜
傾斜は、画面に対するタッチペンの傾きを測定したものです。
傾斜は、タッチペンの正の角度をラジアンで返します。ここで、0 は画面に対して垂直、pi/2 は表面上での平坦な角度です。
傾斜角度は getAxisValue(AXIS_TILT) を使用して取得できます（最初のポインタのショートカットはありません）。
傾斜を使用すると、現実のツールをできるだけ近くで再現できます。たとえば、傾けた鉛筆で陰影を付けることができます。
カーソルを合わせる
画面からタッチペンまでの距離は getAxisValue(AXIS_DISTANCE) で取得できます。このメソッドは、0.0（画面に接触）の範囲から、タッチペンが画面から離れるほど高い値を返します。画面とタッチペンのペン先（先端）の間のホバー距離は、画面とタッチペンの両方のメーカーによって異なります。実装はさまざまであるため、アプリに不可欠な機能は正確な値に依存しないでください。
タッチペンのホバーを使用して、ブラシのサイズをプレビューしたり、ボタンが選択されることを示したりできます。
注: Compose には、UI 要素のインタラクティブな状態に影響を与える修飾子が用意されています。
hoverable: ポインタの開始イベントと終了イベントを使用してホバーできるように、コンポーネントを構成します。indication: インタラクションが発生したときに、このコンポーネントの視覚効果を描画します。
パーム リジェクション、ナビゲーション、不要な入力
マルチタッチ スクリーンでは、手書き入力中にサポートのためにユーザーが手を置いた場合などに、不要なタップが登録されることがあります。パーム リジェクションは、この動作を検出するメカニズムであり、最後の MotionEvent セットをキャンセルする必要があることを通知します。
そのため、ユーザー入力の履歴を保持して、画面から不要なタップを取り除き、正当なユーザー入力を再レンダリングできるようにする必要があります。
ACTION_CANCELED と FLAG_CANCELED
ACTION_CANCEL と FLAG_CANCELED はどちらも、以前の MotionEvent セットを最後の ACTION_DOWN からキャンセルする必要があることを通知するように設計されています。たとえば、特定のポインタの描画アプリの最後のストロークを元に戻すことができます。
ACTION_CANCEL
Android 1.0（API レベル 1）で追加
ACTION_CANCEL は、前のモーション イベントのセットをキャンセルする必要があることを示します。
ACTION_CANCEL は、次のいずれかが検出されるとトリガーされます。
- ナビゲーション ジェスチャー
- パーム リジェクション
ACTION_CANCEL がトリガーされたら、getPointerId(getActionIndex()) でアクティブなポインタを特定する必要があります。次に、そのポインタで作成したストロークを入力履歴から削除し、シーンを再レンダリングします。
FLAG_CANCELED
Android 13（API レベル 33）で追加
FLAG_CANCELED は、ポインタの上移動がユーザーによる意図しないタップであることを示します。このフラグは通常、ユーザーが誤って画面に触れたときに設定されます。たとえば、ユーザーがデバイスをつかんだり、手のひらを画面に置いたりした場合などです。
フラグの値には、次の方法でアクセスできます。
val cancel = (event.flags and FLAG_CANCELED) == FLAG_CANCELED
このフラグが設定されている場合、このポインタの最後の ACTION_DOWN から、最後の MotionEvent セットを元に戻す必要があります。
ACTION_CANCEL と同様に、ポインタは getPointerId(actionIndex) で見つけることができます。
MotionEvent セットが作成されます。手のひらでのタップはキャンセルされ、ディスプレイが再レンダリングされます。全画面表示、エッジ ツー エッジ、ナビゲーション ジェスチャー
アプリが全画面表示で、描画アプリやメモ作成アプリのキャンバスなどの操作可能な要素が端付近にある場合、画面の下からスワイプしてナビゲーションを表示したり、アプリをバックグラウンドに移動したりすると、キャンバスが意図せずタップされることがあります。
アプリでの操作によって不要なタップがトリガーされないようにするには、インセットと ACTION_CANCEL を使用します。
パーム リジェクション、ナビゲーション、不要な入力もご覧ください。
WindowInsetsController の setSystemBarsBehavior() メソッドと BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE を使用して、ナビゲーション操作によって不要なタッチイベントが発生しないようにします。
// Configure the behavior of the hidden system bars.
windowInsetsController.systemBarsBehavior =
WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
インセットとジェスチャー管理について詳しくは、以下をご覧ください。
低遅延
レイテンシとは、ハードウェア、システム、アプリケーションがユーザー入力を処理してレンダリングするのに必要な時間です。
レイテンシ = ハードウェアと OS の入力処理 + アプリ処理 + システム合成
- ハードウェア レンダリング
レイテンシの原因
- タッチスクリーン（ハードウェア）へのタッチペンの登録: タッチペンと OS が通信して登録および同期する際の最初のワイヤレス接続。
- タッチのサンプリング レート（ハードウェア）: ポインタが表面に接触しているかどうかをタッチスクリーンが 1 秒あたりにチェックする回数（60 ～ 1, 000 Hz）。
- 入力処理（アプリ）: ユーザー入力への色、グラフィック エフェクト、変換の適用。
- グラフィック レンダリング（OS + ハードウェア）: バッファ スワップ、ハードウェア処理。
低レイテンシのグラフィックス
Jetpack 低レイテンシ グラフィック ライブラリは、ユーザー入力から画面上のレンダリングまでの処理時間を短縮します。
このライブラリは、マルチバッファ レンダリングを回避し、画面に直接書き込むフロントバッファ レンダリング手法を利用することで、処理時間を短縮します。
フロントバッファ レンダリング
フロント バッファは、画面がレンダリングに使用するメモリです。最も近いアプリが画面に直接描画できます。低レイテンシ ライブラリにより、アプリはフロント バッファに直接レンダリングできます。これにより、通常のマルチバッファ レンダリングやダブルバッファ レンダリング（最も一般的なケース）でバッファ スワップが防止され、パフォーマンスが向上します。
フロントバッファ レンダリングは、画面の小さな領域をレンダリングする優れた手法ですが、画面全体を更新するためのものではありません。フロント バッファ レンダリングでは、アプリはディスプレイが読み取っているバッファにコンテンツをレンダリングします。その結果、アーティファクトのレンダリングやテアリング が発生する可能性があります（下記を参照）。
低レイテンシ ライブラリは、Android 10（API レベル 29）以降と、Android 10（API レベル 29）以降を搭載した ChromeOS デバイスで利用できます。
依存関係
低レイテンシ ライブラリは、フロントバッファ レンダリングを実装するためのコンポーネントを提供します。このライブラリは、アプリのモジュール build.gradle ファイルに依存関係として追加されています。
dependencies {
implementation "androidx.graphics:graphics-core:1.0.0-alpha03"
}
GLFrontBufferRenderer のコールバック
低レイテンシ ライブラリには、次のメソッドを定義する GLFrontBufferRenderer.Callback インターフェースが含まれています。
低レイテンシ ライブラリは、GLFrontBufferRenderer で使用するデータの種類を独自に決定しません。
ただし、ライブラリはデータを数百のデータポイントのストリームとして処理するため、メモリ使用量と割り当てを最適化するようにデータを設計してください。
コールバック
レンダリング コールバックを有効にするには、GLFrontBufferedRenderer.Callback を実装し、onDrawFrontBufferedLayer() と onDrawDoubleBufferedLayer() をオーバーライドします。GLFrontBufferedRenderer はコールバックを使用して、可能な限り最適化された方法でデータをレンダリングします。
val callback = object: GLFrontBufferedRenderer.Callback<DATA_TYPE> {
override fun onDrawFrontBufferedLayer(
eglManager: EGLManager,
bufferInfo: BufferInfo,
transform: FloatArray,
param: DATA_TYPE
) {
// OpenGL for front buffer, short, affecting small area of the screen.
}
override fun onDrawMultiDoubleBufferedLayer(
eglManager: EGLManager,
bufferInfo: BufferInfo,
transform: FloatArray,
params: Collection<DATA_TYPE>
) {
// OpenGL full scene rendering.
}
}
GLFrontBufferedRenderer のインスタンスを宣言する
前に作成した SurfaceView とコールバックを指定して、GLFrontBufferedRenderer を準備します。GLFrontBufferedRenderer は、コールバックを使用してフロントバッファとダブルバッファへのレンダリングを最適化します。
var glFrontBufferRenderer = GLFrontBufferedRenderer<DATA_TYPE>(surfaceView, callbacks)
レンダリング
フロントバッファ レンダリングは renderFrontBufferedLayer() メソッドを呼び出すと開始され、これにより onDrawFrontBufferedLayer() コールバックがトリガーされます。
commit() 関数を呼び出すと、ダブルバッファ レンダリングが再開され、これにより onDrawMultiDoubleBufferedLayer() コールバックがトリガーされます。
以下の例では、ユーザーが画面上で描画を開始し（ACTION_DOWN）、ポインタを動かすと（ACTION_MOVE）、プロセスはフロント バッファにレンダリングされます（高速レンダリング）。ポインタが画面の表面を離れると、プロセスはダブルバッファにレンダリングされます（ACTION_UP）。
requestUnbufferedDispatch() を使用すると、入力システムがモーション イベントをバッチ処理するのではなく、利用可能になり次第すぐに配信するように指示できます。
when (motionEvent.action) {
MotionEvent.ACTION_DOWN -> {
// Deliver input events as soon as they arrive.
view.requestUnbufferedDispatch(motionEvent)
// Pointer is in contact with the screen.
glFrontBufferRenderer.renderFrontBufferedLayer(DATA_TYPE)
}
MotionEvent.ACTION_MOVE -> {
// Pointer is moving.
glFrontBufferRenderer.renderFrontBufferedLayer(DATA_TYPE)
}
MotionEvent.ACTION_UP -> {
// Pointer is not in contact in the screen.
glFrontBufferRenderer.commit()
}
MotionEvent.CANCEL -> {
// Cancel front buffer; remove last motion set from the screen.
glFrontBufferRenderer.cancel()
}
}
レンダリングですべきこと、すべきでないこと
画面の小さな部分、手書き、描画、スケッチ。
全画面表示の更新、パン、ズーム。テアリングが発生する場合があります。
テアリング
テアリングは、画面の更新と画面バッファの変更が同時に行われると発生します。画面の一部に新しいデータが表示され、別の部分には古いデータが表示されます。
モーション予測
Jetpack モーション予測ライブラリは、ユーザーのストロークパスを推定し、一時的な人為的なポイントをレンダラに提供することで、認識されるレイテンシを短縮します。
モーション予測ライブラリは、実際のユーザー入力を MotionEvent オブジェクトとして取得します。このオブジェクトには、x 座標、y 座標、圧力、時間に関する情報が含まれます。これらの情報は、モーション 予測器で将来の MotionEvent オブジェクトを予測するために使用されます。
予測された MotionEvent オブジェクトはあくまで推定です。予測イベントを使用すると、認識されるレイテンシを短縮できますが、受信した予測データは実際の MotionEvent データに置き換える必要があります。
モーション予測ライブラリは、Android 4.4（API レベル 19）以降と、Android 9（API レベル 28）以降を搭載した ChromeOS デバイスで利用できます。
依存関係
モーション予測ライブラリにより、予測の実装が提供されます。このライブラリは、アプリのモジュール build.gradle ファイルに依存関係として追加されています。
dependencies {
implementation "androidx.input:input-motionprediction:1.0.0-beta01"
}
実装
モーション予測ライブラリには、次のメソッドを定義する MotionEventPredictor インターフェースが含まれています。
MotionEventPredictor インスタンスを宣言する
var motionEventPredictor = MotionEventPredictor.newInstance(view)
予測子にデータをフィードする
motionEventPredictor.record(motionEvent)
予測
when (motionEvent.action) {
MotionEvent.ACTION_MOVE -> {
val predictedMotionEvent = motionEventPredictor?.predict()
if(predictedMotionEvent != null) {
// use predicted MotionEvent to inject a new artificial point
}
}
}
モーション予測ですべきこととすべきでないこと
新しい予測ポイントが追加された時点で、予測ポイントを削除する。
最終的なレンダリングに予測ポイントを使用しない。
メモ作成アプリ
ChromeOS では、アプリでのメモ作成アクションを宣言できます。
ChromeOS でアプリをメモ作成アプリとして登録するには、入力の互換性をご覧ください。
Android でアプリをメモ作成アプリとして登録するには、メモ作成アプリを作成するをご覧ください。
Android 14（API レベル 34）では、ロック画面でメモ作成アクティビティを開始できる ACTION_CREATE_NOTE インテントが導入されました。
ML Kit によるデジタルインク認識
ML Kit のデジタルインク認識を使用すると、アプリは数百もの言語のデジタル サーフェス上の手書きテキストを認識できます。スケッチを分類することもできます。
ML Kit には、ML モデルが手書き入力をテキストに変換できる Ink オブジェクトを作成するための Ink.Stroke.Builder クラスが用意されています。
このモデルは、手書き入力の認識に加えて、削除や円などの操作を認識できます。
詳しくは、デジタルインク認識をご覧ください。