第8項. ネイティブタブバー機能

ネイティブタブバー機能の説明をする。タブバーは任意のタブを選択すると、関連するビューが表示される機能です。タブバーはiPhoneやAndoridでサポートされています。
iPadの場合、VerticalTabBarをコントロールすることができます。VerticalTabaBarはタブバーと似ているが、タブの部分にアイコン画像やテキストを設定することができます。

 

 1. ネイティブタブバーをアプリケーション起動時に設定する

ネイティブタブバーをアプリケーション起動時に設定する、には、/app/application.rbのinitializeiメソッドに@tabs変数を追加する必要があります。@tabsの値には、配列を指定します。配列の要素は、タブの設定情報をHash形式で指定する必要があります。

 

def initialize
  @tabs = [
      { :label => "Dashboard", :action => '/app',
        :icon => "/public/images/tabs/dashboard.png", :reload => true, :web_bkg_color => 0x7F7F7F },
      { :label => "Accounts",  :action => '/app/Account', 
        :icon => "/public/images/tabs/accounts.png" },
      { :label => "Contacts",  :action => '/app/Contact', 
        :icon => "/public/images/tabs/contacts.png" },
      { :label => "Options",   :action => '/app/Settings',
        :icon => "/public/images/tabs/options.png" }
    ]
  super
end

 

@tabsの要素には以下のオプションを設定することができます。

 

  • ● :label ・画面に表示されるラベル名を設定します。
  • ● :action ・タブを選択したときのリンク先を選択します。
  • ● :icon ・タブに使用するアイコンを選択します。
  • ● :reload ・trueを指定すると、タブを選択したときにリロードして表示させます。
  • ● :selected_color ・タブを選択中のときの、選択中のタブの色を設定します。Androidで使用する場合、すべてのタブにこのオプションを設定する必要があります。
  • ● :disabled ・trueを指定するとこのタブを無効化します。
  • ● :web_bkg_color ・タブの背景色をint型の16進数を設定する。
  • ● :use_current_view_for_tab - trueを設定することで、デフォルトで開くタブの位置を指定する事ができます。[nishima 6]タブの中で1つしかこのオプションを指定することができません。デフォルトはfalseです。

 

タブをデフォルトで無効化するには以下のように指定をします。

 

def initialize
  @tab = nil
  super
end

 

 2. ネイティブタブバーを作成する


ネイティブバーAPIを使用する方法を説明する。まず、以下のように、rho/rhotabbarを読み込む必要があります。

 

require 'rho/rhotabbar'


タブバーを作成するには、以下のようにRho::NativeTabbar.createメソッドを呼び出します。

 

Rho::NativeTabbar.cretae(tabs)
もしくは、
Rho::NativeTabbar.cretae(:tabs => tabs)

 

tabsには1ネイティブタブバーをアプリケーション起動時に設定するで指定したようにタブを作成するための配列を設定する。

背景色を設定するには、:back_ground_colorオプションを設定する。

 

Rho::NativeTabbar.cretae(:tabs => tabs, :background_color => 0x0000FF)


Androidの場合、;bacground_colorを設定するためには、すべてのタブに:selected_colorオプションの設定が必要になります。

タブを画面下部に表示するには、:place_tabs_bottomオプションにtrueを設定する。

 

Rho::NativeTabbar.cretae(:tabs => tabs, :place_tabs_bottom => true)

 

タブを変更したときに、コールバックとしてアクションを呼び出すには、以下のように設定します。

 

Rho::NativeTabbar.cretae(:tabs => tabs,
  :on_change_tab_callback => callback_url
)

 

callback_urlにはコールバック先のURLを設定する必要があります。
コールバック先では、@params[“tab_index”]でタブのインデックス値を取得することができます。

 

 3. ネイティブタブバーを削除する


タブを削除するには、Rho::NativeTabbar.removeメソッドを使用します。

 

Rho::NativeTabbar.remove

 

 4. 選択しているネイティブタブを切り替える


選択しているタブをコントローラで切り替えるには、Rho::NativeTabbar.switch_tabメソッドを使用します。

 

Rho::NativeTabbar.switch_tab(index)

 

indexには、切り替えるタブのインデックス値を入力します。
インデックス値は先頭のタブを0とし、2番目のタブを1として数えます。

 

 5. 表示しているタブのインデックス値を取得する


現在表示しているタブのインデックス値を取得するには、Rho::NativeTabbar.get_current_tabメソッドを使用します。

 

Rho::NativeTabbar.get_current_tab

 

 6. タブにiPhoneのバッジを設定する


タブにiPhoneのバッジを設定するには、Rho::NativeTabbar.set_tab_badgeメソッドを使用します。set_tab_badgeメソッドはiOSのみサポートしています。   

 

Rho::NativeTabbar.set_tab_badge(1, '12')

 

 7. VerticalTabBarを使用する


VerticalTabBarを使用する方法を説明する。VerticalTabBarはiPadのみで使用できる。

 

Require 'rho/rhotabbar

Rho::NativeTabbar.create_vertical(tabs)
Rho::NativeTabbar.switch_tab(3)
WebView.navigate('app/Settings', 3) # => 3番めのタブをapp/Settingsとして開く

システム工房エムのサイトへのリンク

住所〒690-0017 島根県松江市西津田3-2-3 TEL.0852-23-8590 FAX.0852-23-8591
Copyright 2008-2010 System Maker M,All right reserved