TitaniumのListViewにAndroid対応のPullViewがなかったので作ってみた

PullViewというのはテーブルを下に引っ張って更新してるよというのが表示されるアレですね。
やっぱり更新処理は今どきPullView使わないとねっと思っていたのですが、
TitaniumのListViewにはAndroidではpullViewが使えないです。
今のところiOSオンリーです。

幾つかWidgetもあったのですが、今回は自分で作ってみました。
サンプルということでListViewにはQiitaから取得したjsonデータを表示しています。QiitaのAPIは認証なしで使えて便利ですね。

ソースはこちらになります。
https://github.com/ganezasan/Alloy-PullToRefresh-Android

Android版

iPhone版

一応iPhone版も動くように書きました。

PullViewが使えるWidget

Alloy-PullToRefresh

こちらなかなか良さそうなので、今度使ってみたいです。
iOS・Android両方で使えます。

Alloy Pull to Refresh Widget

こっちはTableViewのWigetになります。
Future workでListViewと書かれてるので、いつか対応してくれるはずです。

　どうやって作るか

pull、pullendイベントはAndroidでは取得できないため、touchmoveとtouchendを使ってpull、pullendっぽいことをやります。

1. listviewのscroll・touchstartイベントを取得するのを諦める
   ※こちらlistviewのtouchstratは取得できないのですが、その親Viewからは取得できます。

2. touchmoveイベントで最初に触った開始点を決める

3. touchmoveイベント２回目以降でY軸が下に動いた分、親Viewを下にずらす

4. touchendで閾値を超えていた場合に、更新処理をする

　touchmove部分

var scrollableView_top = 50; //scrollableViewのデフォルトの高さ
var y = 0; //現在のscrollableViewの高さ

//スクロールした分scrollableViewの位置をずらす
$.scrollableView.addEventListener('touchmove', function(e)
{
  //yが0以外の場合は２回目以降のtouchmoveイベント
  //scrollableViewのデフォルトの高さよりも下に触った位置が下か
  //前回触った位置よりも下なのかをチェック
  if(y != 0 && Number(e.y) > scrollableView_top &&  Number(y) <= Number(e.y)){
    var top = 0;
    top = (Number(e.y) - Number(y))*0.1+scrollableView_top;
    Ti.API.info("top:"+String(top));
    $.scrollableView.setTop(top);

  //開始点を記録
  }else if(Number(e.y) > scrollableView_top && Number(e.y) <300+scrollableView_top){
    y = e.y;
  }
});

　touchend部分

//PullView処理　Android
//スクロールが終了した際の高さが閾値以上だった場合に更新ｓｙ
$.scrollableView.addEventListener('touchend', function(e)
{
  //現在のscrollableViewの高さを初期化
  y = 0;
  var value = 'touchend fired x ' + e.x + ' y ' + e.y;
  Ti.API.info(value);
  var top = $.scrollableView.getTop();

  //現在のscrollableViewの高さが閾値より高い場合は更新処理
  if(top > 100 && Titanium.Network.online){
    infoUpdate("update");

  //それ以外の場合は何もしないで、元の位置に戻す
  }else{
    $.scrollableView.animate({top: scrollableView_top+"dp", duration: 100});
  }
});

まとめ

作ってみると簡単だったので、いろいろカスタマイズできると思います。
ソースはこちらになりますのでよかったら使ってみてください。
https://github.com/ganezasan/Alloy-PullToRefresh-Android

こちらの内容はつい先日Titaniumもくもく勉強会２１回でもお話した内容です。
そのときのスライドはこちら

AndroidのPullViewのサンプルは以外と少ないので、
まだまだListViewが使われてないのかな〜と思いました。

早くTitanium側でAndroidでもpullViewが使えるようになればいいな〜と思ってます。