目次
- はじめに
- 実装方法
3. widgetの用意
4. コーディング
5. Actionの紐付け
5. ソースコード全体 - まとめ
- 参考
はじめに
今回はWidgetを自分の任意の場所に動かす実装方法について紹介します！
完成イメージ
— Kony (@Kony12763790) December 22, 2020
実装方法
1. widgetの用意
まず動かす対象のWidgetを用意します。
今回は、flxMoveという名前で作成しています。
今回は、flxMoveを固定の位置ではなくドラック&ドロップして任意の場所に動かしたいので、
Widgetの位置(Left/Right/Top/Bottom)は、defaultに設定するようにしてください。
Widgetの位置は、このあとそれぞれのアクション設定の説明で、
ユーザーが動かした位置に移動するように設定していきます。
2. コーディング
次にWidgetを任意の場所に移動させるコードをFormMainControllerに書きます。
ユーザーが対象のものに触れた時、動かす時、動かし終わった後に
それぞれ座標が決まるように設定をしていきましょう。
アクションは以下を使っていきます。
| アクション名 | 説明 |
|---|---|
| onTouchStart | 対象のものに触れた時に呼び出されるアクション |
| onTouchMove | 対象のものを動かすときに呼び出されるアクション |
| onTouchEnd | 対象のものから指を離すときに呼び出されるアクション |
x: null,
y: null,
isMove: false,
onTouchStart:function(eventobject, x, y){
this.x = x;
this.y = y;
this.isMove = true;
},
まず、onTouchStartではflxMoveに触れた時の座標を保存します。
その他のコードについて説明します。
isMoveは、対象物が動いたかどうかわかるよう設定している値です。
デフォルトは、falseとし、アクションがスタートしたらisMoveフラグをtrueにします。
eventobjectは、触れている対象widgetの情報で、xとyは対象widgetの座標となります。
（Konyでは左上から位置を設定しており、左からの距離をx、上からの距離をyとして設定します。）
onTouchStartが呼ばれたら、座標を保存するように設定しています。
eventobjectの取得方法については、
アクション設定の際に返却する値を指定できますので、3.Actionの紐付けでご説明します。
onTouchMove:function(eventobject, x, y){
if(this.isMove){
// 移動距離
var moveX = x - this.x;
var moveY = y - this.y;
// flxMoveの座標に加算
eventobject.left+=moveX;
eventobject.top+=moveY;
// レイアウトを更新する
this.view.forceLayout();
}
},
onTouchMoveでは、isMoveフラグがtrueの時、flxMoveの座標を移動させます。
保存したxとy(元の位置)から移動した距離を求め、
flxMoveのleftとtopにそれぞれの距離を加算します。
最後にthis.view.forceLayout();で変更を更新します。
onTouchEnd: function(eventobject, x, y){
this.isMove = false;
},
onTouchEndでisMoveフラグをfalseにして、flxMoveの移動を終了させます。
3. Actionの紐付け
関数の準備ができたらActionと紐づけていきます。
今回は、onTouchStart、onTouchMove、onTouchEndを使用してflxMoveを任意の場所に動かせるようにします。
対象のwidget(flxMove)を選択した状態で、Actionタブを開いてください。
まず、onTouchStartのEditをクリックしてActionの紐づけを行います。
先ほどコントローラーに設定したeventobjectは、
Input ParametersのValue列にあるEditをクリックすることで、設定することができます。
onTouchMoveとonTouchEndも同様にActionを紐づけていきましょう！
4. ソースコード全体
define({
x: null,
y: null,
isMove: false,
onTouchStart:function(eventobject, x, y){
this.x = x;
this.y = y;
this.isMove = true;
},
onTouchMove:function(eventobject, x, y){
if(this.isMove){
var moveX = x - this.x;
var moveY = y - this.y;
eventobject.left+=moveX;
eventobject.top+=moveY;
this.view.forceLayout();
}
},
onTouchEnd: function(eventobject, x, y){
this.isMove = false;
},
});
最後に、実際に動作を見てみましょう。
— Kony (@Kony12763790) December 22, 2020
flxMoveを好きな場所に移動できていると思います。
まとめ
今回はWidgetを任意の場所に自由に移動させる実装方法についてご紹介しました。
簡単な画像加工アプリやパズルゲームアプリなどに活用できるかと思います！
Konyでしたら簡単に実装できるので、ぜひ試してみてください！
参考
ActionProperties：
https://qiita.com/Kony_Team/items/2239d4bcb1d4bace8da3#5action%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3