SwipeAwayジェスチャー



SwipeAwayジェスチャーは、タッチ可能なコンポーネントのスワイプをサポートして、さまざまなコンポーネントを表示できます。ユーザーは、特定の方向にコンポーネントをスワイプすることで、SwipeAwayをトリガーします。SwipeAwayを使用すると、「スワイプして消去」操作を作成できます。

プロパティ

ジェスチャーには次のプロパティがあります。

action

actionプロパティは、元のコンポーネントがviewportを終了する方法、および新しいコンポーネントが画面上に現れる方法を制御します。actionプロパティは、次の値を取ることができます。

coverとrevealのスワイプアクションには、クリッピング領域が設定されません。重なるコンポーネントの背景が透過的な場合は、下のコンポーネントが表示されます。

direction

ユーザーがスワイプジェスチャーをトリガーするためにスワイプする方向です。directionプロパティは、次の値を取ることができます。

items

元のコンポーネントを置き換える子コンポーネントまたはレイアウトです。itemsに複数項目の配列が含まれる場合、whenプロパティで選択された最初の項目（1つの子のインフレート）が使用されます。

子コンポーネントのサイズと位置は、元のコンポーネントと同じです。itemsに子コンポーネントを指定しない場合でも、スワイプは発生します。ただし、スワイプアクションがcoverの場合、ユーザーにはスワイプが完了するまでスワイプの効果が見えません。

onSwipeMove

スワイプ位置の移動時に実行するコマンドです。このコマンドは、スワイプの位置が変わるたびに実行されます。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型    
    "handler": "SwipeMove",
    ...                     // コンポーネントのソースプロパティ  
  },
  "position": NUMBER,   // スワイプ距離の割合（%）を表す0～1の間の数値            
  "direction": "STRING"   // "left"、"right"、"up"、"down"のいずれかに一致するスワイプ方向          
}

positionプロパティは、現在のスワイプ距離を表す、0～1の間の数値です。値0はスワイプなし（元のコンポーネントのみが表示されている）、値1はスワイプ完了（子コンポーネントのみが表示されている）を表します。

directionプロパティは、ジェスチャーで定義されたdirectionプロパティです。

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

onSwipeMoveハンドラーは、高速モードで実行されます。

onSwipeDone

スワイプが完了したときに実行するコマンドです。スワイプジェスチャーが完了すると、このコマンドが実行されます。ユーザーがスワイプを止めるとコマンドは実行されず、元のコンポーネントが表示されたままになります。生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "COMPONENT_TYPE", // コンポーネントの型    
    "handler": "SwipeDone",
    ...                     // コンポーネントのソースプロパティ  
  },
  "direction": "STRING"   // "left"、"right"、"up"、"down"のいずれかに一致するスワイプ方向          
}

directionプロパティは、ジェスチャーで定義されたdirectionプロパティです。

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

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

SwipeAwayジェスチャーのイベントシーケンス

ユーザーがSwipeAwayジェスチャーを開始すると、SwipeAwayジェスチャーされたコンポーネントはスワイプで画面外に移動し、itemsプロパティで定義された新しいコンポーネントが表示されます。スワイプジェスチャーでは、左／右ジェスチャーでのコンポーネント幅分の移動、上／下ジェスチャーでのコンポーネント高さ分の移動が制限されます。

SwipeAwayイベントは、次のハンドラーをトリガーします。

1. onDown
2. onMove
3. onCancel（スワイプジェスチャーを識別）
4. onSwipeMove（スワイプ位置が変わるたびに繰り返し）
5. onSwipeDone（ユーザーがスワイプを終了し、アニメーションが完了した後）

SwipeAwayジェスチャーは、ユーザーがコンポーネントをタップして、スワイプ方向（direction）にドラッグすると発生します。

SwipeAwayジェスチャーでは、「フリング」がサポートされます。 つまり、ユーザーは、コンポーネント全体をスワイプしなくても、ジェスチャーを完了できます。代わりに、ジェスチャーが2つのシナリオでスワイプの完了をアニメーション化します。

• ユーザーが、50%を超える位置までドラッグした後でコンポーネントから手を放したとき。
• ユーザーが、50%を超える位置に到達するのに十分な時間、コンポーネントをスワイプしたとき。

スワイプが完了しない場合、コンポーネントが元のコンポーネントに戻るアニメーションが表示されます。

スワイプが最後まで完了すると、元のコンポーネントが削除されます。子コンポーネントが、その場所に表示されます。最後までスワイプされたコンポーネントを最初の状態に戻すことはできません。

子コンポーネントの選択

スワイプジェスチャーが開始すると、itemsの子配列にあるwhenがtrueの最初の項目が、1つの子のインフレートルールに従ってインフレートされます。子項目の位置とサイズは、元のタッチ可能なコンポーネントのディメンションと位置に合わせて更新されます。スワイプ動作中、元のコンポーネントと子コンポーネントのtransformが、元のコンポーネントの後端と子コンポーネントの先端が現在のスワイプ位置に一致するよう更新されます。これにより、子コンポーネントが画面に現れる位置が、画面から消えるコンポーネントの端に接するような効果が生まれます。

スワイプして消去する例

以下は、スワイプ位置に応じて右または左にチェックマークを配置する「スワイプして消去」ジェスチャーハンドラーの例です。

{
  "type": "TouchWrapper",
  "item": {
    "type": "Text",
    "text": "Lorem ipsum dolor",
    "fontSize": "50"
  },
  "gestures": [
    {
      "type": "SwipeAway",
      "direction": "left",
      "items": {
        "type": "Frame",
        "backgroundColor": "purple",
        "items": {
          "componentId": "MyCheck",
          "type": "Text",
          "text": "✓",
          "fontSize": 60,
          "color": "white",
          "width": 60,
          "height": "100%",
          "textAlign": "center",
          "textVerticalAlign": "center"
        }
      },
      "onSwipeMove": {
        "type": "SetValue",
        "componentId": "MyCheck",
        "property": "transformX",
        "value": "${event.position * event.source.width < event.target.width || event.position > 0.5 ? 0 : event.position * event.source.width - event.target.width}"
      },
      "onSwipeDone": {
        "type": "SendEvent",
        "arguments": "アイテムがスワイプされました！"
      }
    }
  ]
}

関連トピック

• ジェスチャー
• タッチ可能なコンポーネントのプロパティ