SwipeAwayジェスチャー

SwipeAwayジェスチャー

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

プロパティ

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

プロパティ 型 デフォルト 説明
type "SwipeAway" 必須 "SwipeAway"のみ指定できます。
action string slide スワイプジェスチャー中に、元のコンポーネントと子コンポーネントを表示する方法を指定します。reveal、slide、coverのいずれかです。
direction string 必須 ユーザーがスワイプしてジェスチャーをアクティブにする方向です。left、right、up、down、forward、backwardのいずれかです。
item、items コンポーネントとレイアウトの配列 [] スワイプジェスチャー中およびジェスチャー後に表示する新しい項目です。この項目で元の項目を置き換えます。
onSwipeMove コマンドの配列 [] スワイプ位置が変化するときに実行するコマンドです。
onSwipeDone コマンドの配列 [] スワイプが完了したときに実行するコマンドです。

action

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

タイプ 元のコンポーネント 子コンポーネント
cover 固定位置にとどまります。 元のコンポーネントの上にスライドし、元のコンポーネントを覆います。
reveal 画面の外にスライドします。 元のコンポーネントの背後の固定位置に現れ、元のコンポーネントがスライドして画面の外に消えると全体が表示されます。
slide 画面の外にスライドします。 画面の中にスライドします。子コンポーネントの先端が元のコンポーネントの後端に付きます。

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

direction

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

タイプ 説明
down コンポーネントの上から下へスワイプします。
left コンポーネントの右から左へスワイプします。
right コンポーネントの左から右へスワイプします。
up コンポーネントの下から上へスワイプします。
forward コンポーネントで設定されているlayoutDirectionプロパティで指定された順方向にスワイプします。
backward コンポーネントで設定されているlayoutDirectionプロパティで指定された逆方向にスワイプします。

forwardとbackwardの値は、コンポーネントのlayoutDirectionプロパティの値によって異なります。

プロパティ値 左から右（"LTR"） 右から左（"RTL"）

forward

rightに相当。ユーザーは左から右にスワイプします。

leftに相当。ユーザーは右から左にスワイプします。

backward

leftに相当。ユーザーは右から左にスワイプします。

rightに相当。ユーザーは左から右にスワイプします。

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": "アイテムがスワイプされました！"
      }
    }
  ]
}

SwipeAwayの例

以下は、SwipeAwayジェスチャーの例です。タッチ可能な各コンポーネントハンドラーは、コンポーネントのIDと実行したハンドラーの名前を表示するコマンドを実行します。スワイプモーションを実行すると、onSwipeMoveハンドラーが実行され、スワイプが終了すると、onSwipeDoneが実行されます。スワイプが完了すると、SwipeAwayジェスチャーを使用した元のコンポーネントは表示されなくなり、Textコンポーネントに置き換えられます。

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

最終更新日: 2025 年 12 月 12 日