*

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

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


スポンサードリンク



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

まずは、Androidではどうすればよいかと調べた時の試行錯誤の内容を記載したエントリーです。
近いうちにiPhoneも同様のエントリーを作成したいと考えています。

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

  1. Androidレベルでの利用コンポーネント
  2. ActionBarを利用するための設定
  3. ActionBarを利用して思考錯誤

 

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

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

Android画面遷移用のボタン(メニュー)を表示できる領域はタイトルバーとActionBarです。
ちょうど良い記事が@ITにありましたので引用させていただきます。

-@IT「Android 4.x時代のアプリにないと残念なActionBarとは」より-

ActionBarとは、Android 2.x以前のタイトルバーを置き換えつつ、ロゴ、ボタン、タブなどを配置できるツールバーです。

ActionBarはプラットフォーム:Android 3.0.x、APIレベル:11から導入されたので、2.x系では基本的には使えませんが、今後はActionBarの利用が一般的になっていくと思います。

ということでActionBarを利用することに決定しました。

2 ActionBarを利用するための設定

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

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

Titaniumにおける対応コンポーネント

Titanium Mobileにおける対応コンポーネントはTitanium.Android.MenuItemです。
MenuItemのshowAsActionプロパティに値を設定することでアクションバーにMenuItemが表示されます。

showAsActionに指定可能な値は以下の通りです。
指定可能な値は以下の通りです。詳細は後ほど説明させていただきます。

概要
SHOW_AS_ACTION_ALWAYS アクションボタンとして常にActionBarに表示
SHOW_AS_ACTION_IF_ROOM Androidが表示可能な領域(UI的な)が存在すると判断したときのみ表示
SHOW_AS_ACTION_NEVER 非表示
 SHOW_AS_ACTION_WITH_TEXT アクションボタンと対応するテキストをActionBarに表示 

portrait modeの場合等は表示されないので、Titaniumとしては非推奨

 SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW 折りたたみのメニュー形式?

 

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

 ActionBarを利用するための設定

tiapp.xlmの変更

作成したプロジェクトのtiapp.xlmをテキストエディタで開き以下の部分を

以下の内容に変更します。

 

各設定値の内容は以下の通りです。

・tool-api-level
開発環境に存在するAPIレベルを指定してください。私の環境には3.0がインストールされているので14を指定しています。

・minSdkVersion
この設定より古いAPIレベルの端末にはインストールされません。

・targetSdkVersion
動作検証を行った機器のAPIレベルを指定します。例えばAndroid 4.0ではハードウェアのMenuキーが存在しない前提で設計されているので、これを前提にしたUIレイアウトが適用され動作することが開発者に保証されます。とはいえ古いAndroidには当然意味ないです。
「OSはWindows7だけど、このアプリはXP互換モードで動かしたい」というときのXP互換モードを指定する属性とお考えください。

 

AndroidエミュレータのAPIバージョンの変更

Titaniumのメニューの[Run]ー[Run Configurations]をクリックします。
スクリーンショット 2013-11-30 12.03.49
すると以下の画面が表示されますので
「Titanium Android Emulator -screenTransition」を選択し、Android APIで任意のAPIレベルを選択後に「Apply」ボタンをクリックしてください。
APIは3以上を選択してください。
スクリーンショット 2013-11-30 12.05.14

なお、選択画面にAPIは3以上の物が存在しない場合は「Android SDK Manager」を起動して利用したいAPIをインストールしてください。

プロジェクトのcleanを実行

Titaniumのメニューの[Project]ー[Clean]をクリックしプロジェクトを奇麗にします。プロジェクトに対する設定変更などを行った場合はcleanを実行することをお勧めします。
スクリーンショット 2013-11-30 12.20.14

3 ActionBarを利用して思考錯誤

ActionBarに1つのメニューを表示する例

まずは一番シンプルな例を実装し動かしてみます。

index.xmlを以下のように変更します。

Windowの配下にMenuがあり、このMenuは対象デバイスをandroidとしています。
Menuの下にさらにMenuItem1つあるだけです。このXMLだとActionBarはいったいどこ?となると思います。
ActionBarの設定はtssに存在します。

index.tssの変更ポイントはMenuItemタグのshowAsActionプロパティにTi.Android.SHOW_AS_ACTION_IF_ROOMをセットしていることです。
index.tssを以下のように変更します。

index.jsを以下のように変更します。

変更を実施後にAndroidエミュレータで実行してみます。
すると「Android Menus can only be opened on TabGroups and heavyweight Windows.」
とのメッセージがコンソールに出力されてスプラッシュで止まってしまいました。
heavyweight Windowsじゃないといけなみたいです。

Window(class=”container”)のfullscreenをtrueにセットしました。

再度実行すると以下のように意図した画面が表示されました。
赤枠のアイコンがaction_about.pngです。
スクリーンショット 2013-11-30 14.38.29

ActionBarのshowAsActionを試す

SHOW_AS_ACTION_ALWAYS設定時の動作

SHOW_AS_ACTION_ALWAYSを試してみます。ご丁寧にいつも表示してくれるのであればいっぱい表示してもらいましょう!

index.xmlのMenuItemを6個にしました。

tssもid指定ではなくMenuItemタグ指定に変更して、全てのMenuItemノードに適用されるようにしました。

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

5個しか表示されまてません・・・、何故!?、SHOW_AS_ACTION_ALWAYS?

SHOW_AS_ACTION_IF_ROOM設定時の動作

SHOW_AS_ACTION_IF_ROOMを試してみます。表示する余地とはどれぐらいなのでしょうか?
index.xmlとindex.jsは前の内容(MenuItemが6個)から修正なしです。
index.tssのMenuItemの設定が

に変わっただけです。

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

1つだけ表示されて、その右に変なアイコンが表示されてます。
このアイコンを押すと
スクリーンショット 2013-11-30 16.06.29
のようになります。リストには「aaa」が5個表示されていますね。でもアイコン無しでタイトルだけが表示されているのは何故でしょうか?

SHOW_AS_ACTION_NEVER設定時の動作

SHOW_AS_ACTION_NEVERは試す意味ないとは思いますが一応やってみます。
index.tssを以下のように変更しました。index.xml、index.jsは変更なしです。

実行結果は予想外でした。何も表示されないと思ったのに・・・
スクリーンショット 2013-11-30 16.11.16

変なアイコンが1つだけ表示されてます。
押してみると、SHOW_AS_ACTION_IF_ROOM時と同じです。リストのアイテムは6個になってますが。
スクリーンショット 2013-11-30 15.17.02

SHOW_AS_ACTION_WITH_TEXT設定時の動作

Titanium的にはあまりお勧めしないとのことですが、これも一応試してみます。
index.tssを以下のように変更しました。index.xml、index.jsは変更なしです。

SHOW_AS_ACTION_NEVER行と同じ実行結果になりました。
あえて使わない方がよさげです。

SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW設定時の動作

index.tssを以下のように変更しました。index.xml、index.jsは変更なしです。

実行結果はSHOW_AS_ACTION_NEVERと全く同じでした。
「公式HPのTitanium.Android.MenuItemのshowAsAction」では

Starting in Android 4.0 (API level 14) you may specify if your action view is collapsible. To enable this behavior set the SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW.

For a collapsable item, the item button (icon and/or text) is displayed when the item is collapsed, and the action view is displayed when the item is expanded.

とあります。はcollapsible:折り畳める
で広げた時に見えると記載されているのでそうなんですしょう。でもSHOW_AS_ACTION_NEVERと同じ動きなのですが?

SHOW_AS_ACTION_ALWAYSとSHOW_AS_ACTION_IF_ROOMの併用

SHOW_AS_ACTION_ALWAYSとSHOW_AS_ACTION_IF_ROOMの個別の説明でOKかもしれないのですが
併用する例を試してみます。

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

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

id=”menuOne”とid=”menuTow”のMenuItemをSHOW_AS_ACTION_ALWAYS
それ以外のMenuItemをSHOW_AS_ACTION_IF_ROOMにするとの変更になります。

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

SHOW_AS_ACTION_IF_ROOMのみ指定したときはaction_about.pngアイコンが1つしか表示されていませんでしたので、SHOW_AS_ACTION_ALWAYSが効いていますね!
スクリーンショット 2013-11-30 16.48.06


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

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

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

記事を読む

Titanium Mobile入門【導入編】

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Titanium Mobile入門【導入編 on Mac】

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

記事を読む

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 ↑