タッチ可能なコンポーネントのプロパティ

タッチ可能なコンポーネントのプロパティ

タッチ可能なコンポーネントは、タッチまたはポインターイベントからの入力を受け取り、カスタムのタッチ動作をサポートするハンドラーを呼び出します。

タッチ可能なコンポーネント

タッチ可能なコンポーネントは、次のとおりです。

プロパティ

すべてのタッチ可能なコンポーネントには、次のプロパティがあります。

プロパティ 型 デフォルト スタイル設定 動的 説明
gesture, gestures ジェスチャーハンドラーの配列 [] ✕ ✕ 実行するジェスチャーハンドラーの配列です。
onCancel コマンドの配列 [] ✕ ✕ ジェスチャーがポインターを引き継ぐときに実行するコマンドです。
onDown コマンドの配列 [] ✕ ✕ ポインターダウンのイベントが発生したときに実行するコマンドです。
onMove コマンドの配列 [] ✕ ✕ ポインターの移動時に実行するコマンドです。
onPress コマンドの配列 [] ✕ ✕ ポインターのdownに続いてupが行われた場合に実行するコマンドです。
onUp コマンドの配列 [] ✕ ✕ ポインターを放したときに実行するコマンドです。

gesture、gestures

ジェスチャーハンドラーの配列です。

ポインターイベントが発生すると、Alexaはジェスチャーハンドラーのリストを（順に）チェックし、イベントがサポートされているジェスチャーかどうかを判断します。該当するジェスチャーハンドラーがあった場合、AlexaはonCancelハンドラーを実行します。次に、適用されるジェスチャーハンドラーが、ポインターイベントを処理します。

ポインターイベントに該当するジェスチャーハンドラーがない場合、Alexaはイベントを適用可能なonDown、onMove、onUpのハンドラーに渡します。

onCancel

ジェスチャーハンドラーがポインターの制御を引き継ぐときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapperやVectorGraphicなど）        
    "handler": "Cancel",
    ...                     // コンポーネントのソースプロパティ  
  },
  "component": {
    "x": Number,            // コンポーネントのdownイベントのX位置（dp）        
    "y": Number,            // コンポーネントのdownイベントのY位置（dp）        
    "width": Number,        // コンポーネントのdp単位での横幅     
    "height": Number,       // コンポーネントのdp単位での縦幅     
  }
}

event.sourceの詳細についてはイベントソースを参照してください。

onCancelハンドラーはコマンドを高速モードで実行します。

onDown

ポインターダウンのイベントが発生したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）     ,  
    "handler": "Down",
    ...                     // コンポーネントのソースプロパティ  
  },
  "component": {
    "x": Number,            // コンポーネントのdownイベントのX位置（dp）        
    "y": Number,            // コンポーネントのdownイベントのY位置（dp）        
    "width": Number,        // コンポーネントのdp単位での横幅     
    "height": Number,       // コンポーネントのdp単位での縦幅     
  }
}

event.sourceの詳細についてはイベントソースを参照してください。

onDownハンドラーはコマンドを高速モードで実行します。

VectorGraphicコンポーネントは、このイベントに追加のviewportプロパティを追加します。

onMove

ポインタの位置が移動したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）     ,  
    "handler": "Move",
    ...                     // コンポーネントのソースプロパティ  
  },
  "component": {
    "x": Number,            // コンポーネントのmoveイベントのX位置（dp）        
    "y": Number,            // コンポーネントのmoveイベントのY位置（dp）        
    "width": Number,        // コンポーネントのdp単位での横幅     
    "height": Number,       // コンポーネントのdp単位での縦幅     
  },
  "inBounds": Boolean       // ポインターがコンポーネントの範囲内にある場合はTrue        
}

ポインター位置のinBounds計算では、重なり合ったコンポーネントが考慮されません。

event.sourceの詳細についてはイベントソースを参照してください。

onMoveハンドラーはコマンドを高速モードで実行します。

VectorGraphicコンポーネントは、このイベントに追加のviewportプロパティを追加します。

onPress

押下イベントが発生したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）     ,  
    "handler": "Press",
    ...                     // コンポーネントのソースプロパティ  
  }
}

event.sourceの詳細についてはイベントソースを参照してください。

onPressハンドラーは通常モードで実行されます。

onUp

ポインターアップのイベントが発生したときに実行するコマンドです。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": COMPONENT_TYPE, // コンポーネントの型（TouchWrapper、VectorGraphicなど）     ,  
    "handler": "Up",
    ...                     // コンポーネントのソースプロパティ  
  },
  "component": {
    "x": Number,            // コンポーネントのupイベントのX位置（dp）        
    "y": Number,            // コンポーネントのupイベントのY位置（dp）        
    "width": Number,        // コンポーネントのdp単位での横幅     
    "height": Number,       // コンポーネントのdp単位での縦幅     
  }
  "inBounds": Boolean       // ポインターがコンポーネントの範囲内にある場合はTrue        
}

ポインター位置のinBounds計算では、重なり合ったコンポーネントが考慮されません。

event.sourceの詳細についてはイベントソースを参照してください。

onUpハンドラーはコマンドを高速モードで実行します。

VectorGraphicコンポーネントは、このイベントに追加のviewportプロパティを追加します。

イベントハンドラーのルール

ユーザーがタッチ可能なコンポーネントの範囲内で開始したり、実行したりしたマウスやタップのイベントにより、そのコンポーネントのポインターイベントハンドラーがトリガーされます。Alexaは、次のルールを使ってこれらのハンドラーを実行します。

  1. 最上部のタッチ可能なコンポーネントの範囲内でdownポインターが発生すると、onDownハンドラーが実行されます。

  2. downポインターがアクティブな間、元のdownイベントが同じコンポーネントで発生した場合には、ポインター位置の変更に応じてonMoveハンドラーが実行されます。

    たとえば、componentA、componentBの2つのコンポーネントがあるとします。

    • ユーザーがcomponentBをタッチして、ポインターを移動します。componentBのonMoveハンドラーが実行されます。
    • ユーザーがcomponentAをタッチして、componentBの範囲内にポインターを移動します。componentBのonMoveハンドラーは実行されません。

  3. downポインターが解放されると、元のdownイベントが同じコンポーネントで発生している場合にはonUpハンドラーが実行されます。

    • ユーザーがcomponentBをタッチして、ポインターを放します。componentBのonUpハンドラーが実行されます。
    • ユーザーがcomponentAをタッチし、ポインターをcomponentBの範囲内に移動してから、ポインターを放します。componentBのonUpハンドラーは実行されません。

  4. downポインターがコンポーネントの範囲内で解放されると、元のdownイベントが同じコンポーネントで発生した場合はonPressハンドラーが実行されます。

    • ユーザーがcomponentBをタッチし、ポインターをcomponentBの範囲内にとどめてから、ポインターを放します。componentBのonPressハンドラーが実行されます。
    • ユーザーがcomponentBをタッチし、ポインターをcomponentBの範囲外に移動して、ポインターを放します。componentBのonPressハンドラーは実行されません。
  5. onPressハンドラーは、常にonUpハンドラーの後に実行されます。

2つ以上のタッチ可能なコンポーネントが最初のポインターdownイベントの位置に重なっている場合、最上部のコンポーネントがdownイベント、および後続するすべてのmove、up、pressイベントを受け取ります。下部のコンポーネントはイベントを受け取りません。

ジェスチャーは、スワイプやダブルタップなど、特定の動きやポインターアクションを解釈する特別な用途のハンドラーです。ジェスチャーハンドラーはジェスチャーの開始を認識すると、onCancelハンドラーを実行します。onCancelハンドラーが完了すると、ジェスチャーハンドラーがすべてのポインターイベントをキャプチャーします。onUpおよびonMoveハンドラーは無視されます。

onCancelハンドラーは、APLがポインターの制御を失った場合にも実行されます。これは、別のアプリが画面を引き継いだ場合に発生する可能性があります。

タッチ可能なコンポーネントはアクション可能なコンポーネントの1つであり、コンポーネントにonPressハンドラーがある場合に「Enter」キーの押下に応答します。コンポーネントにonPressハンドラーがない場合、コンポーネントは何もしません。

コンポーネントにonPressハンドラーがある場合、「Enter」キーを押すと次の動作が実行されます。

  1. ユーザーがEnterキーを押すと、pressedコンポーネント状態をtrueに設定します。
  2. ユーザーがEnterキーを放すと、pressedコンポーネント状態をfalseに戻します。
  3. onPressハンドラーを実行します。

EnterとNumpadEnterのキーボードcodeイベントをキャプチャーし、イベントのプロパゲートをブロックすることにより、この動作を上書きできます。

このページは役に立ちましたか？

最終更新日: 2020 年 08 月 21 日