*

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応用【JasmineとTiShadowでBDD編:15桁入力処理】

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

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

記事を読む

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

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

記事を読む

Titanium Mobile入門【TiShadow導入編】

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

記事を読む

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

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

記事を読む

Titanium Mobile入門【導入編】

スマホでアプリを開発すべくTitanium Studioの動作環境を作成し、Default Allo

記事を読む

Titanium Mobile入門【導入編 on Mac】

いよいよTitanium Mobile入門【導入編 on Mac】です。 Titanium Mob

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:最大桁入力と閾値テスト】

前回の続きで、「BDD編その4」 「BDD編その1」と 「BDD編その2」 「BDD編その3」

記事を読む

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 ↑