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

添加导航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
		}
	}
}