创建选项卡界面

滑动视图提供兄弟屏幕之间的侧向导航，例如具有水平手指手势的标签（有时称为水平分页的图案）。本课程将教您如何创建一个带有滑动视图的选项卡布局，用于在选项卡之间切换，或者如何显示在标题栏而不是选项卡。

实现滑动视图

您可以使用支持库中提供的ViewPager小部件在应用程序中创建滑动视图。 ViewPager是一个布局窗口小部件，其中每个子视图是布局中的单独页面（单独的选项卡）。

要使用ViewPager设置布局，请在您的XML布局中添加元素。例如，如果滑动视图中的每个页面都应该填充整个布局，那么您的布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<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" />

要插入每个页面的子视图，您需要将此布局连接到PagerAdapter。您可以使用两种适配器：

FragmentPagerAdapter
在子页面是固定的并且数量较小的时候最适合使用这个adapter。
FragmentStatePagerAdapter
这最适合在不确定页数的对象集合之间进行分页。当用户导航到其他页面时，它会破坏其他的fragment，从而最大限度地减少内存使用。

例如，可以使用FragmentStatePagerAdapter在Fragment对象集合中进行左右滑动：

public class CollectionDemoActivity extends FragmentActivity {
    // When requested, this adapter returns a DemoObjectFragment,
    // representing an object in the collection.
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    ViewPager mViewPager;

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

        // ViewPager and its adapters use support library
        // fragments, so use getSupportFragmentManager.
        mDemoCollectionPagerAdapter =
                new DemoCollectionPagerAdapter(
                        getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    }
}

// Since this is an object collection, use a FragmentStatePagerAdapter,
// and NOT a FragmentPagerAdapter.
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
    public DemoCollectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = new DemoObjectFragment();
        Bundle args = new Bundle();
        // Our object is just an integer :-P
        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public int getCount() {
        return 100;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "OBJECT " + (position + 1);
    }
}

// Instances of this class are fragments representing a single
// object in our collection.
public static class DemoObjectFragment extends Fragment {
    public static final String ARG_OBJECT = "object";

    @Override
    public View onCreateView(LayoutInflater inflater,
            ViewGroup container, Bundle savedInstanceState) {
        // The last two arguments ensure LayoutParams are inflated
        // properly.
        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;
    }
}

此示例仅显示创建滑动视图所需的代码。以下部分显示如何添加选项卡，以便于在页面之间导航。

为 Actionbar添加选项

ActionBar选项卡为用户提供了一个熟悉的界面，用于导航和识别兄弟界面。

要使用ActionBar创建选项卡，您需要启用NAVIGATION_MODE_TABS，然后创建多个ActionBar.Tab实例，并实现接口ActionBar.TabListener．例如，在您的Activity的onCreate（）方法中，：

@Override
public void onCreate(Bundle savedInstanceState) {
    final ActionBar actionBar = getActionBar();
    ...

    // Specify that tabs should be displayed in the action bar.
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    // 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) {
            // show the given tab
        }

        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // hide the given tab
        }

        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
            // probably ignore this event
        }
    };

    // Add 3 tabs, specifying the tab's text and TabListener
    for (int i = 0; i < 3; i++) {
        actionBar.addTab(
                actionBar.newTab()
                        .setText("Tab " + (i + 1))
                        .setTabListener(tabListener));
    }
}

如何处理ActionBar.TabListener回调以更改选项卡取决于您如何组织内容。但是如果使用ViewPager为每个选项卡使用fragment，如下所示，以下部分显示了当用户选择选项卡时如何在页面之间切换，并在用户滑动时更新所选标签。

切换选项卡时切换界面

要在用户选择选项卡时在ViewPager中切换页面，请通过在ViewPager上调用setCurrentItem（）来实现ActionBar.TabListener来选择适当的页面：

@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) {
            // When the tab is selected, switch to the
            // corresponding page in the ViewPager.
            mViewPager.setCurrentItem(tab.getPosition());
        }
        ...
    };
}

同样，当用户使用触摸手势在页面之间进行滑动时，应选择相应的选项卡。您可以通过实现ViewPager.OnPageChangeListener接口来设置此行为，以便在每次更改页面时更改当前选项卡。例如：

@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);
                }
            });
    ...
}

使用TitleStrip替换选项卡

如果您不想在Actionbar中使用tab，并且实现动画效果，则可以使用PagerTitleStrip来滑动视图。

下面是一个活动的示例布局XML文件，其全部内容是ViewPager和顶部对齐的PagerTitleStrip。单个页面（由适配器提供）占用ViewPager中的剩余空间。

<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"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />

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