読者です 読者をやめる 読者になる 読者になる

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

TitaniumのClassicな開発スタイルでActionBarの設定方法に意外とハマった

タイトルそのままです。Android向けにCraftBeerFanを作っているのですが、UIはAndroidらしいものにしようと思って、ひとまずActionBarを採用したものに取り組んでます。

f:id:h5y1m141:20130820080149p:plain

意外と簡単に設定できるかと思ったのですが、従来の開発スタイルのTitanium Classicなサンプルが意外と見つからずに、公式ドキュメントのAndroid Action Barを見ておおよそ理解できてきました

ハマった要因について振り返ると以下3つかなと思います。

  • Ti.UI.createActionBarとかするのかと思い込んでいた
  • Ti.Ui.WindowのnavBarHiddenプロパティの設定を見落としていた
  • ターゲットとするAndroidSDKのバージョン指定をtiapp.xmlにて行う必要があるのを知らなかった

以下でそれぞれ掘り下げいきます

Ti.UI.createActionBarとかするのかと思い込んでいた

iPhone向けに開発してきたクセなのかもしれませんが、こういうUIに関してはTitaniumのAPI的にはTi.UI.createXXXかなという思い込みがありました。

API Doc見て気づいたのですが、Titanium.Android.ActionBarという形になるんですね。

Ti.Ui.WindowのnavBarHiddenプロパティの設定を見落としていた

Appceleratorの公式ドキュメントのサンプルのコードをそのままコピペしてたらおそらくハマらないかと思いますが、一応どんな状況だったのか書いておきます

使い方がよくわかってない時に、ひとまずサンプルコードをベースにして最低限の処理だけ・・と思って以下の様なものを書いてました

win = Ti.UI.createWindow()
win.addEventListener "open", ->
  if Ti.Platform.osname is "android"
    unless win.activity
      Ti.API.error "Can't access action bar on a lightweight window."
    else
      actionBar = win.activity.actionBar
      if actionBar
        actionBar.backgroundImage = "/bg.png"
        actionBar.title = "New Title"
        actionBar.onHomeIconItemSelected = ->
          Ti.API.info "Home icon clicked!"

win.open()  

ところが、こうやっても当然のことながらActionBarは表示されません。

ActionBarは、「Bar」という言葉が含まれてるように、navBarとして機能してるみたいで、navBarHiddenプロパティの値を適切に設定してあげないとダメみたいなんですね。

なので、

  win = Ti.UI.createWindow
    navBarHidden:false

みたいにしてあげないとダメでした

ターゲットとするAndroidSDKのバージョン指定をtiapp.xmlにて行う必要があるのを知らなかった

公式ドキュメントのAndroid Action Barから一部引用します

To enable the action bar features, applications must be built with a target SDK version of 11 (Android 3.0/Honeycomb) or later. For expanding and collapsing action items, the target SDK version must be at least 14. To set the target SDK version, add code like this in your tiapp.xml file:

ということで、tiapp.xmlを一部編集する必要あるんですね・・

細かいカスタマイズしたくなったら?

基本的な所が出来たのですが、黒の背景は好みでなかったので背景色を変更したくなりました。

ただ、ドキュメント見る限り、それっぽいプロパティが見つからず、たまたまTitanium Mobile(Android)でActionBarをカスタマイズするという記事をQiitaで見つけて、そこで取り上げられていたAndroid Action Bar Style GeneratorというWebアプリを使うと簡単にできることがわかりました

こんな風に出来るのですが、Android Action Bar Style Generatorの使い方もちょっとハマったので、次回でAndroid Action Bar Style Generatorの使い方について書こうかと思います

f:id:h5y1m141:20130820080442p:plain