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主要框架

开源控件ViewPagerIndicator的使用

 

posted @ 2016-01-13 15:56  环游世界  阅读(1679)  评论(0编辑  收藏  举报