Android导航Tab栏实现

前言

android中滑动控件很多，相信大部分同学接触的都是ListView这种竖向滑动的控件，但是有时候我们也有横向滑动的需求，很多应用目前也做成了这个样子，以weiciyuan为例，如下图所示，上面的几个tab按钮都是可以滑动的。

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相关的属性如下：

•