QA@IT

Titanium Mobile (iOS) の TableView で無限個の cell をあつかいたい

3700 PV

Titanium Mobile (iOS) の TableView つまり、たて方向に同一形式 view を並べてスクロールさせるもの、たとえば Twitter の timeline みたいなものを実装しているのですが、views の上限・下限を考えない、あるいは環状にループさせたい場合、どのように実装すればよいでしょうか。

特に view の中で画像データなど、メモリを逼迫しかねないものをあつかうときに、どのようにこれらのオブジェクトを生成・解放してやればよいのかが解っていません。できれば、表示中のときだけ view の中のオブジェクトを生成して、表示から外れたときには不要なものとして削除してゆくような形をとるべきかと思っているのですが、しらべているところでは、そのようなイベントのハンドリングをしたり、cell の再利用をするようなインターフェースが見つかっておりません。

TableView のほか、横方向の ScrollableView などについても、やはり同じような実装でつまづいております。

よろしくお願いいたします。

  • タグがtitaniumのtypoなので直すといいですよ -
  • はい。ありがとうございます。直しました。 -

回答

scrollEndイベントで取得できる値を利用すれば画面に表示されなくなった行かどうかを判定することができます。スクロールが完了した際に取得出来るプロパティは下の通りです:

[INFO] {

    contentOffset =     {

        x = 0;

        y = 50;

    };

    contentSize =     {

        height = 5050;

        width = 320;

    };

    size =     {

        height = 367;

        width = 320;

    };

    source = "[object TiUITableView]";

    type = scrollEnd;

}

テーブル全体の高さがcontentSize.heightで、contentOffset.yが縦方向のオフセットになります。縦方向のオフセット値が行の高さちょうど1つ分になっているのがわかります。つまりこの状態では一番上の行だけが画面の外に隠れている状態になります。

このイベントを利用して、画面外になった行を削除することができます。

var win = Ti.UI.createWindow();
var rowHeight = 50;

function createRow(i){
  return Ti.UI.createTableViewRow({id:i,title:'test' + i.toString(), height:rowHeight});
}

var data = [];
for(var i = 0; i <= 100; i++){
  data.push(createRow(i));
}

var table = Ti.UI.createTableView({data:data});
table.addEventListener('scrollEnd', function(e){
  //見えなくなった行が即時に消される恐ろしい実装
  if(e.contentOffset.y > rowHeight){
    var rows = Math.floor(e.contentOffset.y / rowHeight);
    for(var i = 0; i < rows; i++){
      table.deleteRow(table.data[i], {animated:true});
    }
    table.scrollToTop();
  }
})
win.add(table);
win.open();

また、削除した行をまた閲覧したい場合は遡れるようにKitchen SinkのResources/examples/table_view_pull_to_refresh.jsを参考に最下部、最上部をスクロールすると行が追加されるようにするといいでしょう。

編集 履歴 (0)
  • なるほど。ありがとうございます。
    試してみようと思います。
    -

無限スクロールするようなViewは、UIKitには用意されていません。
UIViewのサブクラスを作って、イベント処理からグラフィック描画まで、全てを自分で作るしかないと思います。

単純に、100万行のテーブルを作って、初期位置を50万行目付近に設定し、簡単に上限や下限にたどり着けないようにするだけなら、UITableViewを利用できるかもしれませんが。

編集 履歴 (0)
  • すみません。どうやら的外れな回答でしたね。 -
  • この回答に-1しておいてください。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。