Swipe Views with Tabs（左右滑动切换导航）

最新推荐文章于 2024-08-23 10:20:50 发布

ymsl123

最新推荐文章于 2024-08-23 10:20:50 发布

阅读量2.8k

点赞数

原文链接：http://developer.android.com/training/implementing-navigation/lateral.html

在实现这个功能之前，你可以在这两个网页上先了解一下Swipe View 的概念和规范：

http://developer.android.com/training/design-navigation/descendant-lateral.html

http://developer.android.com/design/patterns/swipe-views.html

你可以使用ViewPager来创建 swipe views。ViewPager里的每一个子view都是一个独立的页面。

为了在你的布局中添加ViewPager，你可以添加一个<ViewPager>元素在你的XML layout文件中。比如，如果你的swipe view中的每一页都应该占满整个layout，那么你的布局文件可以写成这样：

<?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关联起来。有两种adapter你可以用：

FragmentPagerAdapter：页数固定并且较少的时候最好用这个adapter。

FragmentStatePagerAdapter：页数不固定并且需要在很多对象间切换时最好用这个。它会在用户切换到其他页后销毁fragments，减少内存的使用。

比如，你需要在一组Fragments中切换时可以使用FragmentStatePagerAdapter:

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;
    }
}

上面的例子只写了怎么创建 swipe views。下面的部分会告诉你怎么添加tabs来展示页面之间的导航。

添加tabs到Action Bar：

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

下面的代码会告诉你怎样在用户选择了一个tab时切换页面，以及怎样在用户滑动页面时更新Tab的状态。

为了在用户选择一个tab时切换ViewPager的界面，实现你的ActionBar.TabListener，通过调用ViewPager的setCurrentItem()方法来选择合适的页面。

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

同样的，当用户使用手势滑动页面时，你也应该选中相应的tab。可以通过实现ViewPager.OnPageChangeListener来在每次页面改变时更新tab状态。

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

如果你不想使用action bar，更喜欢可以在小视图中使用的可滚动的tabs的话，你可以使用PagerTitleStrip在你的swipe views中。

下面就是一个这样的例子，整个视图都由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>