28 September 2013
上一篇ActionBarCompat 【Basic】教導大家怎麼使用Google提供的ActionBarCompat lib以後,
這篇要延續上篇實作的actionbar,來加入tabs!

最早在android要使用tab的layout,
必須使用tabhost這個object!
但現在被deprecated了!
後來推薦使用Fragment去控制tabwidget ui object.
但這篇是要教大家怎麼直接用actionbar加入tabs,
相較前面的兩種方法,用actionbar比較簡單!


1. 首先請將你的class implement TabListener 這個interface

public class MainActivity extends ActionBarActivity implements TabListener {
....
}


2. 加入應有的method

因為你前一步驟implement了一個interface,
那麼在你的Class之中,也應該要有該interface底下的method,
所以你的class一開始應該會紅紅的一條,代表error,
那麼你只要將滑鼠移至該class名稱上,eclipse就會有選項幫你直接加入該有的method,
或者你也可以自己直接加入,如下

@Override
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub

}

@Override
public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub

}

@Override
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
// TODO Auto-generated method stub

}


3. 加入tab

這邊是利用ActionBar去加入tab,
所以我們再加入之前應該先取得actiobar這個object,

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final ActionBar actionbar = getSupportActionBar();

}

接著設定navigation mode,
這裡分成三種

  1. ActionBar.NAVIGATION_MODE_LIST     (actionbar左上角會有spinner)
  2. ActionBar.NAVIGATION_MODE_TABS    (就是tabs)
  3. ActionBar.NAVIGATION_MODE_STANDARD    (什麼都不會有,只剩actionbar)

所以理論上我們要設成第二種!

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final ActionBar actionbar = getSupportActionBar();

actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

}

最後一步就是加入tab了!

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final ActionBar actionbar = getSupportActionBar();

actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

// add tab
actionbar.addTab(actionbar.newTab().setText(R.string.tab1).setTabListener(this));
actionbar.addTab(actionbar.newTab().setText(R.string.tab2).setTabListener(this));

}



接著大家就可以deploy上去看看了!
應該就可以看到2個tab出現!
如下圖



這時候大家可能會覺得很奇怪,
不管點tab1還是tab2,
怎麼內容都一樣?

原因是因為你要在先前implement的method(onTabSelected)中,
透過FragmentTransaction把Fragment加進來!
好!這時候大家可能也會好奇一件事,我的Class明明是 extends ActionBarActivity,
怎麼可能在這個class之中把Fragment加進來?不是應該要透過FragmentActivity嗎?
恩,其實如果你們在往下層看,會發現ActionBarActivity這個class也是extends FragmentActivity!
所以自然而然可以在ActionBarActivity中把一個Fragment加進來!

但是!!!!在這裡我不會教你用這種方式!!!
為什麼?
其實在Google Standard之中,希望我們有tabs時,理應上要支援swipe to change tab!
那麼要怎麼做到呢?
就是靠ViewPager!
下一篇ActionBarCompat 【Swipe to change tab】中,會教大家怎麼用ViewPager去把Fragment加進來以及可以swipe!





















blog comments powered by Disqus