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