使用Tabs创建Swipe视图

    Swipe View提供在同级屏幕中的横向导航，例如通过横向划屏手势切换的tab(一种称作横向分页的模式)。这节课会教你如何使用swipe view创建一个tab layout实现在tab之间切换，或显示一个标题条替代tab。

    Swipe View 设计

    在实现这些功能之前，你要先明白在Designing Effective Navigation, design guide中的概念和建议

    你可以使用Support Library中的控件在你的app中创建swipe view。ViewPager是一个子视图在layout上相互独立的布局控件(layout widget)。

    使用来设置你的layout，要添加一个元素到你的XML layout中。例如，在你的swipe view中如果每一个页面都会占用整个layout，那么你的layout应该是这样:

    FragmentPagerAdapter

    在同级屏幕(sibling screen)只有少量的几个固定页面时，使用这个最好。

    当根据对象集的数量来划分页面，即一开始页面的数量未确定时，使用这个最好。当用户切换到其他页面时，fragment会被销毁来降低内存消耗。

    例如，这里的代码是当你使用FragmentStatePagerAdapter来在对象集合中进行横屏切换:

    1. public class CollectionDemoActivity extends FragmentActivity {
    2.     // 当被请求时, 这个adapter会返回一个DemoObjectFragment,
    3.     // 代表在对象集中的一个对象.
    4.     DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    5.     ViewPager mViewPager;
    7.     public void onCreate(Bundle savedInstanceState) {
    8.         super.onCreate(savedInstanceState);
    9.         setContentView(R.layout.activity_collection_demo);
    11.         // ViewPager和他的adapter使用了support library
    12.         // fragments,所以要用getSupportFragmentManager.
    13.         mDemoCollectionPagerAdapter =
    14.                 new DemoCollectionPagerAdapter(
    15.                         getSupportFragmentManager());
    16.         mViewPager = (ViewPager) findViewById(R.id.pager);
    17.         mViewPager.setAdapter(mDemoCollectionPagerAdapter);
    18.     }
    19. }
    21. // 因为这是一个对象集所以使用FragmentStatePagerAdapter,
    22. // 而不是FragmentPagerAdapter.
    23. public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
    24.     public DemoCollectionPagerAdapter(FragmentManager fm) {
    25.         super(fm);
    26.     }
    28.     @Override
    29.         Fragment fragment = new DemoObjectFragment();
    31.         // 我们的对象只是一个整数 :-P
    32.         args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
    33.         fragment.setArguments(args);
    34.         return fragment;
    35.     }
    37.     @Override
    38.     public int getCount() {
    39.         return 100;
    40.     }
    42.     @Override
    43.     public CharSequence getPageTitle(int position) {
    44.         return "OBJECT " + (position + 1);
    45.     }
    46. }
    48. // 这个类的实例是一个代表了数据集中一个对象的fragment
    49. public static class DemoObjectFragment extends Fragment {
    50.     public static final String ARG_OBJECT = "object";
    52.     @Override
    53.     public View onCreateView(LayoutInflater inflater,
    54.             ViewGroup container, Bundle savedInstanceState) {
    55.         // 最后两个参数保证LayoutParam能被正确填充
    56.         View rootView = inflater.inflate(
    57.                 R.layout.fragment_collection_object, container, false);
    58.         Bundle args = getArguments();
    59.         ((TextView) rootView.findViewById(android.R.id.text1)).setText(
    60.                 Integer.toString(args.getInt(ARG_OBJECT)));
    61.     }
    62. }

    Action bar tab能给用户提供更熟悉的界面来在app的同级屏幕中切换和分辨。

    使用来创建tab，你需要启用NAVIGATION_MODE_TABS，然后创建几个的实例，并对每个实例实现ActionBar.TabListener接口。例如在你的activity的方法中，你可以使用与下面相似的代码:

    根据你如何创建你的内容来处理ActionBar.TabListener回调改变tab。但是如果你是像上面那样，通过对每个tab使用fragment，下面这节就会说明当用户选择一个tab时如何切换页面，当用户划屏切换页面时如何更新相应页面的tab。

    当用户选择tab时，在ViewPager中切换页面，需要实现来调用在ViewPager中的来选择相应的页面:

    1. @Override
    2. public void onCreate(Bundle savedInstanceState) {
    3.     ...
    5.     // Create a tab listener that is called when the user changes tabs.
    6.     ActionBar.TabListener tabListener = new ActionBar.TabListener() {
    7.         public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
    8.             // 当tab被选中时, 切换到ViewPager中相应的页面.
    9.             mViewPager.setCurrentItem(tab.getPosition());
    10.         }
    11.         ...
    12.     };
    13. }

    同样的，当用户通过触屏手势(touch gesture)切换页面时，你也应该选择相应的tab。你可以通过实现ViewPager.OnPageChangeListener接口来设置这个操作，当页面变化时当前的tab也相应变化。例如:

    下面是一个内容为，有一个PagerTitleStrip顶端对齐的activity的layout XML文件示例。单个页面(adapter提供)占据中的剩余空间。

    1. <android.support.v4.view.ViewPager
    2.     xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:id="@+id/pager"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent">
    7.     <android.support.v4.view.PagerTitleStrip
    8.         android:id="@+id/pager_title_strip"
    9.         android:layout_width="match_parent"
    10.         android:layout_height="wrap_content"
    11.         android:layout_gravity="top"
    12.         android:background="#33b5e5"
    13.         android:textColor="#fff"
    14.         android:paddingTop="4dp"
    15.         android:paddingBottom="4dp" />
    17. </android.support.v4.view.ViewPager>