前回作成したテーブルビューは起動時にデータを取得し、そのデータを表示するだけでしたが、今回はテーブルビューの表示を動的に更新して切れ目なくリストが見られるようにします。動的な更新こういう動きを実装したい。コツがつかめない...。こんな時はキッチンシンクです。キッチンシンクはiPhoneアプリやAndroidアプリの基本的な動作をTitaniumで実装したサンプル集です。実際に動作させた上でソースも確認できるのが非常にありがたいですね。今回の動作を実現するにはどのサンプルが必要でしょうか。example/table_view_dynamic_scroll.jsがそのサンプルのようです。このサンプルの動作は、テーブルビューをスクロールさせる画面上のリスト(ROWデータ)が終わりそうになったら、テーブルビューに次のリストを追記する。この動きによって画面をスクロールさせるだけで、次々とリストが更新されます。直感的にもわかりやすく優れたUIの動作と思います。それでは該当ソースの部分を見てみましょう。2秒後にendUpdate()を起動。“読み込み中”のローを削除する。//スピナーを非表示に。テーブルに対するスクロールイベントハンドラを追加。距離が前回の距離より短くなっている=テーブルが上に向かってスクロールしている。更新中じゃなく、テーブルのサイズの75%以上までスクロールしたら。//現在の距離を保存する。});ここの動作のポイントとしては、スクロールイベントのハンドリング部分にあります。全体の75%の部分までスクロールしたらデータの更新を行うという一連の動作によりスムーズな操作を実現しています。ここの部分の動きは変更する必要がありません。変更するなら75%で判別している部分がテーブルのサイズが動的に大きくなることを考えると適切ではないと思われます。ここは固定のピクセル値に直してもよいかもしれません。紫の線で表現したのがテーブルビューの全体です。見えている部分と隠れている部分のサイズがどのように取得できるかがよくわかると思います。distance値がnピクセル以下になったら次のデータを取得する、という方法でも問題がないことがわかりますね。ひとつのポイントはソース内の文字色を変えた部分です。こちらはサンプルですので模擬的に2秒後にendUpdate()が発火するように書いてありますが、実際にはHTTPClientでサーバからデータを取得し、取得後のコールバック関数でendUpdate()を起動させる。いう風に書かないといけません。HTTPClientでのデータの取得も次のn件という風にページャ的に取得する必要があります。ここではいろんな実装方法があるかと思いますが、HTTPClientのリクエストを行うクラスを作成し、データを取得する関数を呼び出すたびにページャがインクリメントされていくようにしてみます。HTTPClientのステータスが変わったら。}}}このクラスを外部ファイルに保存します。名前はMovieData.jsにしましょう。titaniumで外部ソースを使う場合は次のようにします。MovieData(tableView);このようにソースの先頭の方でインクルードします。ファイルへのパスはカレントディレクトリからの相対パスで大丈夫です。最初の文字色の違う部分を以下のように差し替えます。md.getNext(endUpdate);2つめの文字色の違う部分を削除します。付け焼き刃的なコーディングになってしまった気がしますが、以上で動的なテーブルビューの更新を行うことが可能となりました。スクロールさせるたびに新たにデータが読み込まれるのはなかなか快感です。いったUIをいち早く取り入れたiPhoneはさすがですね。それでは次回はテーブルビューからの画面遷移についてご紹介します。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。