Android导航Tab栏实现

前言

android中滑动控件非常多，相信大部分同学接触的都是ListView这样的竖向滑动的控件，可是有时候我们也有横向滑动的需求，非常多应用眼下也做成了这个样子，以weiciyuan为例，例如以下图所看到的，上面的几个tabbutton都是能够滑动的。

Navigation Tabs

加入导航tab栏。是一种常见的设计样式，相信大家也常常看到它。Android2.x时代。一般大家都是用tabhost来实现（之前的项目採用这样的设计苦逼了好一阵）。自从google推出设计规范后，google大力倡导使用Navigation Tabs加上Fragment以及ViewPager来实现导航页面的点击切换和滑动切换。

例如以下图所看到的，这是Navigation Tabs的典型演示样例：



实现代码比較简单，由于是开源项目。我直接贴出来代码，方便大家学习參考。

public class MainUIActivity extends FragmentActivity {
private static final int CACHE_PAGER = 5;

private ViewPager mViewPager;
private MainUIPagerAdapter mainUIPagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mViewPager = new ViewPager(this);
mViewPager.setId(11);
setContentView(mViewPager);

buildPhoneInterface();
}

private void buildPhoneInterface() {
buildViewPager();
buildActionBarAndViewPagerTitles();
getActionBar().setSelectedNavigationItem(1);
}

private void buildViewPager() {
mViewPager = (ViewPager) findViewById(R.id.mainviewpager);
mainUIPagerAdapter = new MainUIPagerAdapter(getFragmentManager());
mViewPager.setOffscreenPageLimit(CACHE_PAGER);
mViewPager.setAdapter(mainUIPagerAdapter);
mViewPager.setOnPageChangeListener(onPageChangeListener);
}

private void buildActionBarAndViewPagerTitles() {
// 获取action bar的引用
ActionBar actionBar = getActionBar();
// 设置action bar的模式为导航模式，这样。action bar才会显示Tab标签
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

// 仅仅显示navigation tabs，不显示actionbar上面的标题等布局
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);

// 构建一个自己定义的adapter。将viewpager的切换和action bar tab的点击关联起来
MainTabListener mainTabListener = new MainTabListener();
actionBar.addTab(actionBar.newTab().setText(R.string.first).setTabListener(mainTabListener));

actionBar.addTab(actionBar.newTab().setText(R.string.second).setTabListener(mainTabListener));

actionBar.addTab(actionBar.newTab().setText(R.string.thrid).setTabListener(mainTabListener));

actionBar.addTab(actionBar.newTab().setText(R.string.fourth).setTabListener(mainTabListener));
}

private Fragment getFirstFragment() {
return getFragmentManager().findFragmentByTag(FirstFragment.class.getName());
}

private Fragment getSecondFragment() {
return getFragmentManager().findFragmentByTag(SecondFragment.class.getName());
}

private Fragment getThirdFragment() {
return getFragmentManager().findFragmentByTag(ThirdFragment.class.getName());
}

private Fragment getFourthFragment() {
return getFragmentManager().findFragmentByTag(FourthFragment.class.getName());
}

// 构建一个简单的Viewpager切换监听类，将tab的点击与viewpager的切换关联起来
ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
getActionBar().setSelectedNavigationItem(position);
}

};

private class MainUIPagerAdapter extends AppFragmentPagerAdapter {
List<Fragment> list = new ArrayList<Fragment>();

public MainUIPagerAdapter(FragmentManager fm) {
super(fm);

if (getFirstFragment() == null) {
list.add(new FirstFragment());
} else {
list.add(getFirstFragment());
}

if (getSecondFragment() == null) {
list.add(new SecondFragment());
} else {
list.add(getSecondFragment());
}

if (getThirdFragment() == null) {
list.add(new ThirdFragment());
} else {
list.add(getThirdFragment());
}

if (getFourthFragment() == null) {
list.add(new FourthFragment());
} else {
list.add(getFourthFragment());
}
}

@Override
public Fragment getItem(int position) {
return list.get(position);
}

@Override
protected String getTag(int position) {
List<String> tagsList = new ArrayList<String>();
tagsList.add(FirstFragment.class.getName());
tagsList.add(SecondFragment.class.getName());
tagsList.add(ThirdFragment.class.getName());
tagsList.add(FourthFragment.class.getName());

return tagsList.get(position);
}

@Override
public int getCount() {
return list.size();
}
}

private class MainTabListener implements ActionBar.TabListener {
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
if (mViewPager.getCurrentItem() != tab.getPosition()) {
mViewPager.setCurrentItem(tab.getPosition());
}
}

@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}

@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
}

自己定义样式

这块样式定义还是有些负责的，能够看一下初始的样式，我也写了一个demo。截图例如以下：

之所以呈现这样的效果，是由于你使用的主题是Android原生主题，代码例如以下：

<activity
android:name="××××××"
android:theme="@android:style/Theme.Holo.Light">

主题的定义位于Android源代码的framework文件夹，路径为：“frameworks/base/core/res/res/values/themes.xml”，当中与Action Bar相关的属性例如以下：

<!-- Action bar styles -->
1476        <item name="actionDropDownStyle">@android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar</item>
1477        <item name="actionButtonStyle">@android:style/Widget.Holo.Light.ActionButton</item>
1478        <item name="actionOverflowButtonStyle">@android:style/Widget.Holo.Light.ActionButton.Overflow</item>
1479        <item name="actionModeBackground">@android:drawable/cab_background_top_holo_light</item>
1480        <item name="actionModeSplitBackground">@android:drawable/cab_background_bottom_holo_light</item>
1481        <item name="actionModeCloseDrawable">@android:drawable/ic_cab_done_holo_light</item>
1482        <item name="actionBarTabStyle">@style/Widget.Holo.Light.ActionBar.TabView</item>
1483        <item name="actionBarTabBarStyle">@style/Widget.Holo.Light.ActionBar.TabBar</item>
1484        <item name="actionBarTabTextStyle">@style/Widget.Holo.Light.ActionBar.TabText</item>
1485        <item name="actionModeStyle">@style/Widget.Holo.Light.ActionMode</item>
1486        <item name="actionModeCloseButtonStyle">@style/Widget.Holo.Light.ActionButton.CloseMode</item>
1487        <item name="android:actionBarStyle">@android:style/Widget.Holo.Light.ActionBar.Solid</item>
1488        <item name="actionBarSize">@dimen/action_bar_default_height</item>
1489        <item name="actionModePopupWindowStyle">@android:style/Widget.Holo.Light.PopupWindow.ActionMode</item>
1490        <item name="actionBarWidgetTheme">@null</item>
1491
1492        <item name="actionModeCutDrawable">@android:drawable/ic_menu_cut_holo_light</item>
1493        <item name="actionModeCopyDrawable">@android:drawable/ic_menu_copy_holo_light</item>
1494        <item name="actionModePasteDrawable">@android:drawable/ic_menu_paste_holo_light</item>
1495        <item name="actionModeSelectAllDrawable">@android:drawable/ic_menu_selectall_holo_light</item>
1496        <item name="actionModeShareDrawable">@android:drawable/ic_menu_share_holo_light</item>
1497        <item name="actionModeFindDrawable">@android:drawable/ic_menu_find_holo_light</item>
1498        <item name="actionModeWebSearchDrawable">@android:drawable/ic_menu_search_holo_light</item>
1499
1500        <item name="dividerVertical">?android:attr/listDivider</item>
1501        <item name="dividerHorizontal">?android:attr/listDivider</item>
1502        <item name="buttonBarStyle">@android:style/Holo.Light.ButtonBar</item>
1503        <item name="buttonBarButtonStyle">?android:attr/borderlessButtonStyle</item>
1504        <item name="segmentedButtonStyle">@android:style/Holo.Light.SegmentedButton</item>

与Navigation Tab相关的属性例如以下：