Android 创建带有tab的滑动页面

首先需要使用支持库的空间 Viewpager

如何给 viewpager 添加子元素（页面）

需要将此布局和 pagerAdapter 挂钩，一般我们用以下的两种 adapter :

1. FragmentPageAdapter 这是最简单基本都使用，当只要几个简单页面的时候可以使用
2. FragmentStatePagerAdapter 这个用在当 页面数量 不定 或者 很多 的时候，它会销毁用户不在使用的页面，以达到节约内存的目的

我们通过一组简短的代码来看看FragmentStatePagerAdapter具体如何使用：
( 官网上的FragmentPageAdapter的使用)

// 继承于 Fragment 的类
public static class DemoObjectFragment extends Fragment {
    public static final String ARG_OBJECT = "object";
    @Override
    public View onCreateView(LayoutInflater inflater,
            ViewGroup container, Bundle savedInstanceState) {
        // 创建新的Fragment并且从bundle中获取数据，显示出来
        View rootView = inflater.inflate(
                R.layout.fragment_collection_object, container, false);
        Bundle args = getArguments();
        ((TextView) rootView.findViewById(android.R.id.text1)).setText(
                Integer.toString(args.getInt(ARG_OBJECT)));
        return rootView;
    }
}

// 以下这个adapter 继承与 FragmentStatePagerAdapter

public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
    // 构造函数，参数是一个 Fragmentmanager
    public DemoCollectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    // 用于获取一个pager对象，也就是一个Fragment
    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new DemoObjectFragment();
        Bundle args = new Bundle();
        // 传入一个 int 值给bundle，对应初始化时候的填入
        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        fragment.setArguments(args);
        return fragment;
    }

    // 这个方法决定了 Viewpager 能有多少个页面，此处写了100 那么应该就是 100 页面
    @Override
    public int getCount() {
        return 100;
    }

    // 这个方法返回的是页面的title
    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
}



// FragmentActivity 可是支持 fragment的使用，比如 可以调用 getSupportFragmentManager()

public class CollectionDemoActivity extends FragmentActivity {
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    ViewPager mViewPager;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collection_demo);

        // 创建一个Adapter
        mDemoCollectionPagerAdapter =
                new DemoCollectionPagerAdapter(
                        getSupportFragmentManager());
        // 绑定viewpager
        mViewPager = (ViewPager) findViewById(R.id.pager);
        // view pager 关联对应的 适配器
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    }
}

---

以上就是 使用 viewpager 的基本必须的代码了

添加 Tabs到ActionBar

tabs在实际应用中可以让用户更加方便的访问相邻的页面，那么我们如何将tab加入呢？

1. 设置当前的模式为 NAVIGATION_MODE_TABS
2. 创建几个 Action.Tab ,并且为他们添加相应的 Action.TabListenser （同一个）

@Override
public void onCreate(Bundle savedInstanceState) {
    final ActionBar actionBar = getActionBar(); // 获取一个actionbar
    ...

    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // 设置相应模式，可以让tabs在actionbar中显示出来

    // 创建一个tab的监听器
    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 显示tab
        }

        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 隐藏tab
        }

        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 一般会忽略这个事件
        }
    };

    // 添加tabs
    for (int i = 0; i < 3; i++) {
        actionBar.addTab(
                actionBar.newTab()
                        .setText("Tab " + (i + 1))
                        .setTabListener(tabListener));
    }
}

注意 以上代码只是 创建了 tabs 在 actionabr 中而已，如何将 让tabs的选择影响 page，让page画的也影响tabs呢？

需要两个步骤：

第一步，在actionbar的监听事件中，当tab被选中的时候，获取对应的 page 并置为 当前的 page，代码如下:

@Override
public void onCreate(Bundle savedInstanceState) {
    ...

    // Create a tab listener that is called when the user changes tabs.
    ActionBar.TabListener tabListener = new ActionBar.TabListener() {
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            // 将当前显示的page置为对应的page
            mViewPager.setCurrentItem(tab.getPosition());
        }
        ...
    };
}

第二步，类似的，也给page改变的监听事件（实现onPageChangeListener），添加tabs改变的代码：

@Override
public void onCreate(Bundle savedInstanceState) {
    ...

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // When swiping between pages, select the
                    // corresponding tab.
                    getActionBar().setSelectedNavigationItem(position);
                }
            });
    ...
}

---

我很懒，不想用actionbar的话—使用PagerTitleStrip

还记的当我们创建一个viewpageradapter的时候，必须实现的一个方法 getPageTitle() 吗？

pagertitlestrip 可以通过这个方法来获取 对应page的标题，使用 pagerTitlestrip的话，就没有必要再使用actionbar啦

直接在样式中添加就可以了

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        <!--这个gravity也可以是bottom，那么这个东西就会放置在页面底下-->
        android:layout_gravity="top" 

        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />

</android.support.v4.view.ViewPager>

本文所有代码，都可以在android开发者官网找到，点击跳转