ユーザーインターフェイス / コンポーネント / ジェスチャー

ジェスチャー

タップ、スライド、ピンチなどのジェスチャーを使用すると、ユーザーは画面上のUI要素を操作してアプリを操作できます。

NativeScriptでは、View（すべてのNativeScript UI要素の基本クラス）に on および off メソッドがあり、UI要素によって認識されるすべてのイベントとジェスチャーを有効または無効にできます。

最初のパラメーターとして、on または off メソッドと、追跡するジェスチャのタイプを渡します。 2番目のパラメーターは、指定されたジェスチャが認識されるたびに呼び出される関数です。 関数の引数には、ジェスチャに関する追加情報が含まれます（該当する場合）。

NativeScriptでサポートされているジェスチャのリスト：

Tap

アクション：画面を短くタッチします。

<GridLayout tap="onTap" class="bg-primary p-15 m-15" width="200" height="200">
</GridLayout>
function onTap(args) {
	console.log("Tap!");
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
}
exports.onTap = onTap;
import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onTap(args: GestureEventData) {
	console.log("Tap!");
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
}

デモソース

Double Tap

アクション：連続して2回タップします。

function onDoubleTap(args) {
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
}
exports.onDoubleTap = onDoubleTap;
import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onDoubleTap(args: GestureEventData) {
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
}

デモソース

Touch

アクション：指によるタッチ

<GridLayout touch="onTouch" class="bg-primary p-15 m-15" width="200" height="200" ></GridLayout>
<Label text="{{'Box touched at X: ' + coordX}}" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"/>
<Label text="{{'Box touched at Y: ' + coordY}}" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"/>
function onTouch(args) {
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
	console.log(`Touch action (up, down, cancel or move) ${args.action}`);
	console.log(`Touch point: [ ${args.getX()} ,  ${args.getY()} ]`);
	console.log(`activePointers: ${args.getActivePointers().length}`);
}
exports.onTouch = onTouch;
import {
	TouchGestureEventData
} from "tns-core-modules/ui/gestures";

export function onTouch(args: TouchGestureEventData) {
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
	console.log("Touch action (up, down, cancel or move)" + args.action);
	console.log("Touch point: [" + args.getX() + ", " + args.getY() + "]");
	console.log("activePointers: " + args.getActivePointers().length);
}

デモソース

Swipe

アクション：画面上で指をすばやくスライドさせます。スワイプは高速で、指を画面から離した後でも画面に影響を与えます。

<GridLayout swipe="onSwipe" class="bg-primary p-15 m-15" width="200" height="200"></GridLayout>
function onSwipe(args) {
	console.log("Swipe!");
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
	console.log(`Swipe Direction: ${args.direction}`);
}
exports.onSwipe = onSwipe;
import { SwipeGestureEventData } from "tns-core-modules/ui/gestures";

export function onSwipe(args: SwipeGestureEventData) {
	console.log("Swipe!");
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
	console.log("Swipe Direction: " + args.direction);
}

デモソース

Long Press

アクション：画面に指をしばらく置きます。

<GridLayout class="bg-primary p-15 m-15" width="200" height="200" longPress="onLongPress">
</GridLayout>
function onLongPress(args) {
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
}
exports.onLongPress = onLongPress;
import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onLongPress(args: GestureEventData) {
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
}

デモソース

Pan

アクション：指を押し下げて、そのまま動かします。パンはよりゆっくり実行され、より正確になり、指を離すとすぐに画面が応答しなくなります。

<GridLayout pan="onPan" class="bg-primary p-15 m-15" width="200" height="200" ></GridLayout>
function onPan(args) {
	// args is of type PanGestureEventData
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
	console.log(`Pan delta: [ ${args.deltaX}, ${args.deltaY} ] state: ${args.state}`);

}
exports.onPan = onPan;
import { PanGestureEventData } from "tns-core-modules/ui/gestures";

export function onPan(args: PanGestureEventData) {
	// args is of type PanGestureEventData
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
	console.log("Pan delta: [" + args.deltaX + ", " + args.deltaY + "] state: " + args.state);

}

デモソース

Pinch

アクション：2本の指で画面をタッチしてから、互いを近づけたり離したりします。

<GridLayout pinch="onPinch" class="bg-primary p-15 m-15" width="200" height="200"></GridLayout>
function onPinch(args) {
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
	console.log(`Pinch scale: ${args.scale} state: ${args.state}`);
}
exports.onPinch = onPinch;
import { PinchGestureEventData } from "tns-core-modules/ui/gestures";

export function onPinch(args: PinchGestureEventData) {
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
	console.log("Pinch scale: " + args.scale + " state: " + args.state);
}

デモソース

Rotation

アクション：2本の指で画面をタッチし、左右に同時に回転させます。

<GridLayout rotation="onRotation" class="bg-primary p-15 m-15" width="200" height="200"></GridLayout>
function onRotation(args) {
	console.log(`Object that triggered the event: ${args.object}`);
	console.log(`View that triggered the event: ${args.view}`);
	console.log(`Event name: ${args.eventName}`);
	console.log(`Rotate angle: ${args.rotation} state: ${args.state}`);
}
exports.onRotation = onRotation;
import { RotationGestureEventData } from "tns-core-modules/ui/gestures";

export function onRotation(args: RotationGestureEventData) {
	console.log("Object that triggered the event: " + args.object);
	console.log("View that triggered the event: " + args.view);
	console.log("Event name: " + args.eventName);
	console.log("Rotate angle: " + args.rotation + " state: " + args.state);
}

デモソース

イベント

NativeScriptの相互に作用する各ビューは、ユーザー操作で発生するジェスチャイベントにアクセスできます。

名前 説明
tap ビューがタップされたときに生成されます。
doubleTap ビューがダブルタップされたときに生成されます。
touch ビューがタッチされたときに生成されます。"TouchGestureEventData"からのアクション状態を返します。
longPress ビューがタップされて保持されたときに生成されます。stateを返します。
pan ビューがパンされたときに生成されます。座標の移動量 deltaX および deltaY を数値で返します。
pinch ビューがピンチされたときに生成されます。scaleを返します。
swipe ビューを左右にスワイプすると発生します。"SwipeDirection"としてdirectionを返します。

APIリファレンス

名前 タイプ
tns-core-modules/ui/gestures Module
GestureTypes enum
GestureStateTypes enum
SwipeDirection enum
GestureEventData interface
GestureEventDataWithState interface
PanGestureEventData interface
PinchGestureEventData interface
RotationGestureEventData interface
SwipeGestureEventData interface
TouchGestureEventData interface
Pointer interface

ネイティブコンポーネント

ANDROID IOS
android.gesture.Gesture UIGestureRecognizer
入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス