*

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

公開日: : 最終更新日:2013/12/14 Titanium , ,


スポンサードリンク



Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをどこに配置したらよい?となりました。

前回のエントリーの「Titanium mobileでAndroidのActionBarを利用する。」ではAndroidをターゲットとしていました。

今回はiPhoneを対象としたエントリーとなります。

本エントリーは以下の内容で構成されます。

  1. iPhoneレベルでの利用コンポーネント
  2. Titanium mobileでの利用コンポーネント
  3. iPhoneを利用して思考錯誤

 

なお、Titanium Mobileのインストールや各種設定については
お使いの環境がWindowsの場合は「Titanium Mobile入門【導入編】」
Macの場合は「Titanium Mobile入門【導入編 on Mac】」
を参照ください。

1 iPhoneレベルでの利用コンポーネント

これは迷わずにUINavigationBarを利用したいと思います。だったら大きな見出し不要ですね・・・

 

2 Titanium mobileでの利用コンポーネント

Titaniumの参考書籍等ではほぼ「Titanium.UI.iPhone.NavigationGroup」を利用した例となっていますが

「公式HPのNavigationGroupの説明」を見ると

This class has been removed since 3.2.0

This class is now deprecated. Please use the Titanium.UI.iOS.NavigationWindow class instead.

だそうです。
と言うことで「Titanium.UI.iOS.NavigationWindow」を利用することに決定しました。

NavigationWindowの詳細は
「公式HPのNavigationWindowの説明」をご覧ください。

3 NavigationWindowを利用して思考錯誤

Titaniumの新規プロジェクトを作成

まずはTitanium Studioでプロジェクトを作成します。

Default Alloy projectでProject nameはscreenTransition、App idはcom.sample.screenTransitionを指定し、新規のプロジェクトを作成します。

「Titanium mobileでAndroidのActionBarを利用する。」をご覧いただいた方は既に同じProject nameでプロジェクトを作成済みですので作成する必要はございません。

NavigationWindowの利用方法

NavigationWindowをとりあえず表示する。

「公式HPのNavigationWindowの説明」のAlloy XML Markupのindex.xmlを参考(コピペ)してindex.xmlを変更してiPhoneシュミレータで実行してみたのですが、真っ黒で何も表示されませんorz

NavigationWindowノードをplatform=”ios”で定義しており
その配下にWindowを定義、さらにその下にButtonが1つ定義してあります。
index.xmlの内容

iPhoneエミュレータでの実行結果

スクリーンショット 2013-12-01 11.30.54

なんでやねん!、と色々試行錯誤してみたのですが、どうやらNavigationWindowがindex.xmlのルートWindow要素でないといけないようです。そうなるとindex.xmlが完全にplatform=”android”とplatform=”ios”で分岐していまうのですが・・・

具体的にはindex.xmlが以下のような構造になるとのことです。

Titaniumの公式ドキュメントを見ても情報ないです。
(見つけられないだけだったらすみません。)

この分岐を書くぐらいだったらindex.xmlを分割した方が可読性の向上に寄与しますよね・・・
と言う事で分割することにしました。

Titaniumはデバイス毎のソースのファイル自体の分岐を行える機構を提供しています。

androidフォルダとiosフォルダを作成しそれぞれに対象デバイスのソースファイルを格納することでTitaniumがコンパイル時にどのソースファイルを利用すれば良いかを認識してくれます。

Viewのindex.xmlを分割したい場合は
appフォルダの配下にあるviewsの配下にandroidフォルダとiosフォルダを作成し
androidフォルダにandroid用のindex.xml
iosフォルダにios用のindex.xml
を格納すればOKです。なおviewsの配下のindex.xmlのファイル自体は残しておく必要があります。

誰かが、いつかの日かに混乱しないためにviewsの配下のindex.xmlは空ファイルにしておくことをお勧めします。

スクリーンショット 2013-12-01 12.06.48

index.xml分割後の各ファイルの内容は以下のようになります。
各index.xmlのplatform属性はもはや必要ないですが、そのままにしております。

views/android/index.xml

views/ios/index.xml

 

index.js
8行はindexではなくrootWindowに対してopne()を呼び出しています。

index.tss(前回のエントリーから変更なしです)

実行結果の画面は以下のようになりました。

iPhone
スクリーンショット 2013-12-01 12.23.25

android(前回エントリーの最後の画面と同じです。)

スクリーンショット 2013-12-01 12.24.04

画面遷移後のNavigationWindowの確認

せっかくのNavigationBarなので画面遷移後の表示を確認してみます。
Titaniumの公式HPのサンプルの通りですが、ボタンを押したときに新規のWindowが開くようにします。

まずはボタンを押したときに開くWindowのコントローラであるbluewinコントローラを新規追加します。
Titanium Studioの左ペインのファイルエクスプローラーでマウスの右グリックを行い
[New]ー[Alloy Controller]をクリックします。
スクリーンショット 2013-12-01 15.34.35
スクリーンショット 2013-12-01 15.34.55

表示された画面でController nameにbluewinを入力し「ok」ボタンをクリックします。
するとbluewin.js、bluewin.tss、bluewin.xmlが生成されます。
bluewin.js、bluewin.xml、index.jsを以下の内容に変更します。
ちなみにですが、ボタンのラベルはopenに変更しています。

bluewin.jsは「Close Window」ボタンのクリックイベントだけですね。

bluewin.xmlはWindowの配下に「Close Window」ボタンを定義しonClickイベントを指定しているだけです。

index.jsのopenBlueWindowメソッドでbluewinコントローラを生成し
コントローラに対してgetView()を呼び出して、取得したWindowをオープンしています。

 

動作時の画面イメージは以下のようになります。
ポイントは「open」ボタンクリック後の画面 の青い画面のナビゲーションバーの左側です。

初期画面
スクリーンショット 2013-12-01 16.18.30

「open」ボタンクリック後の画面
スクリーンショット 2013-12-01 16.19.43

NavigationWindowにボタンを表示する。

先ほどの初期画面では、赤いWindowの真ん中に表示されていた「open」ボタンをNavigationBarの左に表示していみます。

修正対象のソースはindex.xmlのみで、LeftNavButtonノードを定義し、その配下にButtonが配置されるように変更します。
修正後のindex.xmlは以下の通りです。

 

初期画面は以下のように変わりました。予想通りですね。
スクリーンショット 2013-12-01 16.27.11

一通り確認が終わったのですが
・LeftNavButtonに複数のボタンを配置するとどうなるか?
・RightNavButtonに画像を指定したボタンの表示
の2点を確認して終わりにしたいと思います。

LeftNavButtonに複数のボタンを配置すると、最後に配置されたボタンのみが表示されます。

index.xmlを

に変更して実行すると初期画面は以下のようになりました。
スクリーンショット 2013-12-01 16.34.44

最後にRightNavButtonに画像を指定したボタンの表示を行いたいと思います。

index.xmlにRightNavButtonの記述を追加し、その配下にImageView(id=”imageView”)を追加しました。

index.tssにid=”imageView”の設定を追加し、imageにアイコン画像を指定しました。

 

実行すると初期画面は以下のようになりました。
スクリーンショット 2013-12-01 17.23.28

上の例ではImageViewを利用しましたがButtonのままTSSでsystemButtonを指定するのが一般的なようです。
RightNavButtonの配下のボタンのidを”buttonRight”に設定し、
tssでsystemButton: Titanium.UI.iPhone.SystemButton.INFO_LIGHTを設定してみました。

index.xml

index.tss

実行結果は以下のようになりました。
スクリーンショット 2013-12-14 11.39.49

「Titanium mobileでiPhoneのNavigationBarを利用する。」エントリーは以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

Titanium MobileでAlloyフレームワークを利用する時に避けて通れないのがUIコンポー

記事を読む

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

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

記事を読む

Titanium Mobile入門【TiShadow導入編】

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

記事を読む

no image

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

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

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:数値ボタンの1回押し処理】

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

記事を読む

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

「TitaniumのTableViewを試してみる【何故か前編】」では、予想に反してiOSシュミレー

記事を読む

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 ↑