0
Thumbsup

いい質問だ

0

Thumbsdown

うーん

ビューを下にドラッグすると更新ボタンのある裏のビューが表示される動きを実装したい

19
19 0

投稿日:2015-05-24 20:15:20

メールアプリの動作と似ている感じなのですが、画面を下にドラッグするとtopの位置が下にずれ、後ろにある画面(ビュー?)の上部が表示される(ボタンが見えるようになる)、という仕様を考えています。
現在作成中のものは、windowの上にview、さらにその上にtableviewを乗せてtableviewのdragendイベントでtopを調整するようにしているのですが、ドラッグの距離や方向を取得する方法がわからず、少しのドラッグでもtopがずれるようになっており、スマートとはいえない動きになっています。

どのようにしたら距離や方向を取得できるでしょうか?
そもそもdragendイベントではないのかもと思いました。
ご存知の方がいらっしゃいましたらどうかご教授ください。

・Titanium SDKのバージョン 3.1.3
・iOS? Android? iOS
・iOSまたはAndroidのバージョン sdk7.0



回答

yagi_
yagi_
2540
Tcad_icon Tcmd_icon Tce_icon

Thumbsup

いい回答

1

Thumbsdown

うーん



<Alloy>
  <Window layout="absolute">
    <View id="header" top="0" width="Ti.UI.FILL" height="Ti.UI.FILL">
      <Button>Push me!</Button>
    </View>
    <View id="container" top="0" width="Ti.UI.FILL" height="Ti.UI.FILL">
      <TableView id="table"  top="0" width="Ti.UI.FILL" height="Ti.UI.SIZE">
        <TableViewRow title="John Crawfish" />
        <TableViewRow title="Paul McCrawfish" />
        <TableViewRow title="George Crawfish" />
        <TableViewRow title="Ringo Starfish" />
      </TableView>
    </View>
  </Window>
</Alloy>

ざっくりこんな構成だとして、TableViewではなく下のViewのイベントを使うといいんじゃないかと思いました。良い子は寝る時間なので試していないのですが、JS側はこんな感じです。

var counter = 0;
var limit = 60; //TableViewが下にさがるときの上限のY座標
var touch_move_magic_number = 4;
$.container.addEventListener('touchmove', function(e){
  if(counter > touch_move_magic_number){
    counter = 0;
    var y = e.y >= limit ? limit : e.y;
    $.container.applyProperties({top: y});
  }
  counter++;
});

yagi_様 いただいたサンプルソースで後ろのビューを表示させることができました。 また、applyPropertiesというメソッドがあることを初めて知り、勉強になりました。 ご回答ありがとうございました。 欲を言いますと「びよ〜ん」とした動きにしたいので、もう少し色々やってみようと思います。 --- 19

ログインすると回答することができます。