首页 > 代码库 > Android导航Tab栏实现
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 } } }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。