Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager
文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
1、使用ViewPager + PagerAdapter
每个页面的内容都在同一个Activity中,维护起来会比较麻烦
实现:
在页面上加入ViewPager控件。
<android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="fill_parent"> </android.support.v4.view.ViewPager>
创建每个Tab页的信息,并在Activity中获取这些Tab页,加入List<View>中。
form1 = (LinearLayout) inflater.inflate(R.layout.layout_pager1, null); form2 = (LinearLayout) inflater.inflate(R.layout.layout_page2, null); form3 = (LinearLayout) inflater.inflate(R.layout.layout_pager3, null); listViews.add(form1); listViews.add(form2); listViews.add(form3);
创建PagerAdapter的对象(通过自定义类MyPagerAdapter继承自PagerAdapter),并绑定到ViewPager上。
自定义的MyPagerAdapter一定要重写destroyItem、instantiateItem、getCount、isViewFromObject。
private class MyPagerAdapter extends PagerAdapter { @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(listViews.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = listViews.get(position); container.addView(view); return view; } @Override public int getCount() { // TODO Auto-generated method stub return listViews.size(); } @Override public boolean isViewFromObject(View view, Object obj) { // TODO Auto-generated method stub return view == obj; } }
这样一个简单的可以左右滑动的界面就完成了。不过有个明显的缺点,界面上没有可以指示当前在第几个页面的信息,用户也无法明确看到一共有多少个页面。可以像我参考的博客上的例子,在主界面上添加一个Layout,定义几个按钮。也可以使用Activity的getActionBar方法获取当前Activity对应的ActionBar,在ActionBar上添加Tab来指示当前页面。使用ActionBar时,需要为Tab添加TabListener事件,重写onTabSelected方法,当用户选择了对应的Tab页签,ViewPager需要跳转到对应的界面。
tab.setTabListener(new ActionBar.TabListener() { @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub String text = tab.getText().toString(); int selectedIndex = 0; switch(text) { case PAGE1 : selectedIndex = 0; break; case PAGE2 : selectedIndex = 1; break; case PAGE3 : selectedIndex = 2; break; default: selectedIndex = 0; break; } viewPager.setCurrentItem(selectedIndex); //设置页签上的图片 for (int j = 0; j < bar.getTabCount(); j++) { Tab tab1 = bar.getTabAt(j); if (selectedIndex == j) { tab1.setIcon(onIcons[j]); } else { tab1.setIcon(offIcons[j]); } } } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } });
现在点击页签,就会跳转到对应的页面。但是左右滑动页面的时候,页签并不会跟着变化。再添加页面滑动的事件。
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int i) { // for (int j = 0; j < bar.getTabCount(); j++) { // Tab tab = bar.getTabAt(j); // if (i == j) { // tab.setIcon(onIcons[j]); // } else { // tab.setIcon(offIcons[j]); // } // } bar.selectTab(bar.getTabAt(i)); } @Override public void onPageScrolled(int i, float f, int j) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int i) { // TODO Auto-generated method stub } });
OK,页签和页面可以联动了。
2、FragmentManager + Fragment
每个页面的内容分开,但是只能点击按钮换页
3、ViewPager + FragmentPagerAdapter
综合前两种方式,比较好
4、TabPageIndicator + ViewPager + FragmentPagerAdapter
第三方插件,呈现界面与第3中不同,但同样很好。
将自己写代码实现后两种方式。
参考:
Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
Android 使用Fragment,ViewPagerIndicator 制作csdn app主要框架