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版
PullViewが使えるWidget
Alloy-PullToRefresh
こちらなかなか良さそうなので、今度使ってみたいです。
iOS・Android両方で使えます。
Alloy Pull to Refresh Widget
こっちはTableViewのWigetになります。
Future workでListViewと書かれてるので、いつか対応してくれるはずです。
どうやって作るか
pull、pullendイベントはAndroidでは取得できないため、touchmoveとtouchendを使ってpull、pullendっぽいことをやります。
listviewのscroll・touchstartイベントを取得するのを諦める
※こちらlistviewのtouchstratは取得できないのですが、その親Viewからは取得できます。touchmoveイベントで最初に触った開始点を決める
touchmoveイベント2回目以降でY軸が下に動いた分、親Viewを下にずらす
touchendで閾値を超えていた場合に、更新処理をする
touchmove部分
var scrollableView_top = 50; //scrollableViewのデフォルトの高さ
var y = 0; //現在のscrollableViewの高さ
//スクロールした分scrollableViewの位置をずらす
$.scrollableView.addEventListener('touchmove', function(e)
{
//yが0以外の場合は2回目以降の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
//スクロールが終了した際の高さが閾値以上だった場合に更新sy
$.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もくもく勉強会21回でもお話した内容です。
そのときのスライドはこちら
AndroidのPullViewのサンプルは以外と少ないので、
まだまだListViewが使われてないのかな〜と思いました。
早くTitanium側でAndroidでもpullViewが使えるようになればいいな〜と思ってます。
Author And Source
この問題について(TitaniumのListViewにAndroid対応のPullViewがなかったので作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/ganezasan/items/70219afe26f99405e16a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .