ユーザーインターフェイス / ジェスチャー

ユーザーインターフェイスジェスチャ

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

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

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

タップ

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

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.tap, function (args) {
    console.log("Tap");
});
import { GestureTypes, GestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.tap, function (args: GestureEventData) {
    console.log("Tap");
});

ダブルタップ

アクション:すばやく2回タップします。

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.doubleTap, function (args) {
    console.log("Double Tap");
});
import { GestureTypes, GestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.doubleTap, function (args: GestureEventData) {
    console.log("Double Tap");
});

可能な実装:

長押し

アクション:指をしばらく画面に押し付けます。

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.longPress, function (args) {
    console.log("Long Press");
});
import { GestureTypes, GestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.longPress, function (args: GestureEventData) {
    console.log("Long Press");
});

可能な実装:ビューで1つ以上のアイテムを選択し、コンテキストアクションバーを使用してデータに基づいて行動します。 データ選択モードに入ります。 コンテキストメニューの表示に長押しを使用しないでください。

スワイプ

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

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.swipe, function (args) {
    console.log("Swipe Direction: " + args.direction);
});
import { GestureTypes, SwipeGestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.swipe, function (args: SwipeGestureEventData) {
    console.log("Swipe Direction: " + args.direction);
});

可能な実装:同じ階層内のビュー間を移動します。

パン

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

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.pan, function (args) {
    console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});
import { GestureTypes, PanGestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
label.on(GestureTypes.pan, function (args: PanGestureEventData) {
    console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});

ピンチ

アクション:2本の指で画面に触れてから、互いに近づけたり離したりします。

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.pinch, function (args) {
    console.log("Pinch Scale: " + args.scale);
});
import { GestureTypes, PinchGestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.pinch, function (args: PinchGestureEventData) {
    console.log("Pinch Scale: " + args.scale);
});

可能な実装:コンテンツを拡大または縮小します。

回転

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

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.rotation, function (args) {
    console.log("Rotation: " + args.rotation);
});
import { GestureTypes, RotationGestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.rotation, function (args: RotationGestureEventData) {
    console.log("Rotation: " + args.rotation);
});

タッチ

アクション:指のアクションの汎用ジェスチャーです。

これは、ポインター(通常は指)がタッチアクション(上、下、移動、またはキャンセル)を実行するたびにトリガーされる汎用ジェスチャーです。 TouchGestureEventDataは、現在画面上にあるすべてのポインターと、イベントをトリガーしたビュー内の位置に関する情報を提供します。

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.touch, function (args) {
    console.log("Touch: x: " + args.getX() + " y: " + args.getY());
});
import { GestureTypes, TouchGestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.touch, function (args: TouchGestureEventData) {
    console.log("Touch: x: " + args.getX() + " y: " + args.getY());
});

複数のジェスチャーとイベントの登録

NativeScript 1.3のリリース以降、引数にジェスチャ名、カンマ区切りのジェスチャ名、イベントとの混合を使用できます。

var gestures = require("tns-core-modules/ui/gestures");
var labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on("loaded, tap, doubleTap, longPress", function (args) {
    console.log("Event: " + args.eventName + ", sender: " + args.object);
});
import { GestureEventData } from "tns-core-modules/ui/gestures";
import labelModule = require("tns-core-modules/ui/label");
var label = new labelModule.Label();
label.on("loaded, tap, doubleTap, longPress", function (args: GestureEventData) {
    console.log("Event: " + args.eventName + ", sender: " + args.object);
});

ジェスチャー操作

一部のシナリオでは、ユーザーの操作を無効にするか、一部のジェスチャーが実際の対話的UIゾーンの親を通過する、より複雑なUIを作成します。 NativeScriptは、次のような類似のケースを処理するための特定のプロパティを提供します。

注釈: isEnabledがAndroidとiOSで動作する方法には概念的な違いがあります。 Androidでは、(例えばButtonに対して)isEnabledfalseに設定されている場合、 その親に対してisPassThroughParentEnabledtrueに設定されていても、いかなるイベントも発生しません。 一方、iOSでは、同じ設定でもイベントを親に渡します。

3つのプロパティの使用方法を示すプレイグラウンドアプリケーションは、 ここにあります 。

入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick