*

TitaniumのTableViewを試してみる【何故か後編】

公開日: : 最終更新日:2014/05/12 Titanium , ,


スポンサードリンク



「TitaniumのTableViewを試してみる【何故か前編】」では、予想に反してiOSシュミレータでステータスバーと1つ目のテーブルセクションのヘッダーが被って表示されるとの所で終わりましたのでTitaniumのTableViewを試してみる【何故か後編】となります。

以下が今回の内容となります。

  1. 前回の課題を解決
  2. 動的にTableViewRowの追加(非Alloy)
  3. TableViewRowの行データをカスタマイズ(非Alloy)
  4. TableViewRowの行データをカスタマイズ(Alloy)

1 前回の課題を解決

原因が分かりました。iOS7からスターバスバーの位置にもコンポーネントを配置できるようになったそうです。
「ステータスバーが原則的にルートビューに重ねて表示される」とも言い換えることができます。

通常の場合はcontentInsetが自動調整されるため実装者が意識する必要はありませんが、PullToRefresh(ListView を下に引っ張って離すと内容が更新)などを自前で実装している場合に自動調整がうまくいかなくなります。Titaniumでも何かしているのでしょう。

対処方法としてはY座標の値を20ずらせばOKです。
と言うことで、contentInsetのtopに20をセットするのですが
TitaniumのTableViewではsetContentInsetsを利用します。
なおこの処理はiOS7の時のみ実行するようにしました。

Ti.Platformの詳細は公式HPを参照ください。

 

iOSエミュレータでの実行時も思ったような結果になりました。良かった良かった。
スクリーンショット 2013-11-20 14.47.51

2 動的にTableViewRowの追加(非Alloy)

実際にDBやTi.App.Propertiesを利用して動的に行を表示しようと思ったのですが、とりあえず配列で行データを宣言しておきそれを読み込むことを実現してみます。実装的には先に読み込んでデータを作成すれば同じ処理にデータを流し込めばOKです。
1つの行に表示するのは時計の画像+ラベルとしています。

clockDataListの各データに対してTi.UI.createImageViewで時計のイメージを作成し、Ti.UI.createLabelでイメージの右に表示するラベルを作成し
Ti.UI.createTableViewRowで作成したTableViewRowに順番に追加しておき
index.xmlで定義したtableViewのdataにTableViewRowをセットするとの処理内容となっております。
作成したtableViewRowListを$.tableView.data = tableViewRowListとセットするとtableViewに情報が表示されます。

視覚的に表現すると以下のようになると思います。
スクリーンショット 2013-11-21 10.56.43

index.coffeeを以下のように変更しました。

index.xmlから余分な部分を取り除きました。

 

iOSでの実行時の画面は以下のようになりました。
スクリーンショット 2013-11-20 17.18.09

画像がデフォルト(指定した画像が無かったor読み込み中)になっています。
あ!、画像ファイルをResourcesフォルダに配置していないと思い、配置後に実行するも同じ画面が表示されます。実行後にResourcesを確認すると画像ファイルが無くなっていました・・・

ああそうなんですね、Resourcesもコンパイル結果のファイルが格納される場所なんですね。だから画像ファイル削除されたんだ。
app/assets/に画像ファイルを配置して実行してみました。

スクリーンショット 2013-11-20 17.54.58
見事に被ってますね、.NETのtableLayoutPanelみたいなコンポーネントないものでしょうか・・・

Ti.UI.createImageViewとTi.UI.createLabelの引数にleftを追加しました。

 

iOSでの実行結果は以下の通りです。
スクリーンショット 2013-11-20 18.04.24

androidでの実行結果は以下の通りです。
スクリーンショット 2013-11-20 19.24.26

あれれ、時計のイメージが表示されていません。
と色々調べたのですが、image:”black-clock.png”の指定方法が駄目でした。
正しくはimage:”/black-clock.png”と先頭に’/’が必要でした。リソースは相対ではなくResourcesをルートパスとしての絶対パスなんですね・・・、iOSでは’/’の有無に関わらず正しく動作します。

 

修正後の実行結果は以下の通りです。
スクリーンショット 2013-11-20 19.18.02

3 tableViewRowの行データをカスタマイズ(非Alloy)

前節では、イメージとラベルを表示していましたが、今度はイメージとラベルとラベルを表示します。
先頭にイメージ、その後ろの領域にラベルを上下に並べます。

視覚的に表現すると以下のようになると思います。
スクリーンショット 2013-11-21 17.05.41

詳細はindex.coffeeを見て頂いた方が分かりやすいと思いますが
Ti.UI.createViewをでviewを作成し、作成したviewにTi.UI.createLabelで作成されたオブジェクト(textとdescの2つ)をaddし、Ti.UI.createTableViewRowで作成したオブジェクトにImageView、作成したviewを追加との処理となります。

なおlayout属性については
Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】をご覧ください。

簡単に説明すると、コンポーネントを縦や横に並べたい時に指定するとtopやleftの指定が簡単になる物と思ってください。
詳細は「Titaniumのlayout属性について」で説明させていただきます。

修正後のindex.coffeは以下のようになりました。
修正したポイントはコメントとしてソースに記載しております。

iOSエミュレータでの実行結果は以下のようになります。
スクリーンショット 2013-11-20 20.52.59

androidシュミレーターでの実行結果は以下のようになります。
スクリーンショット 2013-11-20 21.00.28
説明が少し小さくて見にくいですね・・・

4 tableViewRowの行データをカスタマイズ(Alloy)

このままだとせっかくのAlloyというMVCフレームワークが台無しですのでAlloy対応をしたいと思います。

TableViewの個々の行(TableViewRow)を別controller(別ファイル)で定義するようにし、index.coffeeでゴリゴリ記載していたViewに関する記述をViewのxmlやtssに移動します。

少し作業が複雑になるので手順を明確にしたいと思います。

  • controllerの生成
  • controllerとxmlの実装
  • 1回目の動作確認
  • tssにView関連の設定を移動
  • 2回目の動作確認

4.1 controllerの生成

生成するcontrollerはtableViewRow.coffeeとします。
ターミナルを起動し、プロジェクトのルートに移動してください。

controllerを生成するコマンドを実行します。

app/controllers/tableViewRow.jsが生成されているはずです。coffeeが生成される設定にはなってないです・・・、中身は空なのでtableViewRow.coffeeにリネームします。

4.2 controllerとxmlの実装

app/views/tableViewRow.xmlを以下の内容に変更します。

Viewの構成は「3 tableViewRowの行データをカスタマイズ(非Alloy)」の構成をAlloyに変更しただけです。

app/controllers/tableViewRow.coffeeもindex.coffeeで記述していた内容(tableViewRow.xmlの内容以外)を転記するだけです。なおcontrollerからは、$ + ‘id’ + ‘.’ + 属性名で対応するViewの要素にアクセスできます。

tableViewRow.jsで
$.imageView.imageと記載すれば、tableViewRow.xmlの要素のid=’imageView’の属性=’image’にアクセス可能です。

修正後のindex.xmlは以下のようになりました。

次はindex.coffeeの修正です
注目するポイントとしては、tableViewRow.jsをAlloy.createControllerで呼び出すようになったところです。
Alloy.createControllerの詳細は公式HPを参照ください。

簡単に説明すると
Alloy.createController(‘呼び出したいコントローラ名’,引数として渡すハッシュ)でControllerが作成され、Controllerに対してgetViewを呼び出すと対応するViewが取得できます。
対応するViewとはなに?と思いますよね、これは後ほど。

修正後のindex.coffeeは以下のようになりました。

修正後のindex.xmlは以下のようになりました。

4.3 1回目の動作確認

一通り変更しましたので一度実行してみます。

スクリーンショット 2013-11-21 15.17.44

結果は真っ白のテーブルビューが表示されるだけです。
なんでやねん!と色々調べてみたのですが、getViewが戻すViewってなんやねん!?から答えがでました。
公式HPでgetViewの動きを調べてみると

If no id is specified, returns the first top-level view.

との記載がありましたのでTableViewRowのidを指定してgetViewを呼び出すように変更しました。

変更前:getView → 変更後:getView(‘tableViewRow’)

変更後の実行結果は以下のようになりました。
スクリーンショット 2013-11-21 15.24.33

見事に全部が重なってます。確かに細かい位置情報の設定を反映していませんので納得です。

4.4 tssにView関連の設定を移動

tssファイルにイメージやラベル等の位置情報を記載します。
対象はtableViewRow.xmlのidが’imageView’、’labelView’,’titleLabel’、’descLabel’の各要素です。

id指定でtss(alloyフレームワークのスタイルシート定義ファイル)を定義する例は以下の通りです。
(id=rootViewIdの横幅をTi.UI.FILL、高さをTi.UI.SIZE、レイアウトを”vertical”に指定)

 

app/styles/tableViewRow.tssを以下のように変更しました。

4.5 2回目の動作確認

tssへ過去にindex.coffeeに記載していた各種設定を追加したので実行してみます。
スクリーンショット 2013-11-21 15.50.41

なぜかまたステータスバーと被ります。
tableViewRow.coffeeの$.tableView.setData(tableViewRowList)の後で
$.tableView.setContentInsetsを呼び出すように変更したところうまく動作しました。
コントローラから取得したviewをTableViewに設定することでcontentInsetが上書きされるとしか考えられません。気になりますが・・・
androidの方の実行をしばらくしてませんでしたが問題なく表示されました。

以上でTitaniumのTableViewを試してみる【何故か後編】は終了です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

no image

Titanium Mobile入門【TiShadow活用編】

「Titanium Mobile入門【TiShadow導入編】」ではTiShadowの導入と接続用の

記事を読む

no image

Titanium mobileでiPhoneのNavigationBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

no image

Titanium mobileでAndroidのActionBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

Titanium Mobile入門【CLI激闘編】

Titanium Studioの環境できたので、次はCLI!、と思いCLIでビルドするとうまくいかな

記事を読む

Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】 に引き続き T

記事を読む

no image

Titanium Mobile応用【JasmineとTiShadowでBDD編:テストが時々失敗する理由】

前回の最後に残った問題点の解決方法が分かりましたので 「BDD編その5」として記載させていただきま

記事を読む

TitaniumのTableViewを試してみる【何故か前編】

Mac miniの環境が完成したので、新たなTitaniumを利用したBDDシリーズを開始する予定で

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:15桁入力処理】

前回の続きで、「BDD編その3」です。 「BDD編その1」 「BDD編その2」をまずはご参照くだ

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:対象アプリ説明】

本格的にTitanium Mobile CLIを利用してBDDを行いたいと思います。 まずは、計算

記事を読む

Titanium Mobile入門【TiShadow導入編】

Androidだと格段に作業が早くなる。 複数のエミューレータで同時にテストを実行できる

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑