Swipe View提供在同级屏幕中的横向导航,例如通过横向划屏手势切换的tab(一种称作横向分页的模式)。这节课会教你如何使用swipe view创建一个tab layout实现在tab之间切换,或显示一个标题条替代tab。
Swipe View Design
实现
Swipe View
使用
ViewPager来设置你的layout,要添加一个<ViewPager>元素到你的XML layout中。例如,在你的swipe view中如果每一个页面都会占用整个layout,那么你的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" />
复制代码
要插入每一个页面的子视图,你需要把这个layout与
PagerAdapter挂钩。有两种adapter(适配器)你可以用:
在同级屏幕(sibling screen)只有少量的几个固定页面时,使用这个最好。
当根据对象集的数量来划分页面,即一开始页面的数量未确定时,使用这个最好。当用户切换到其他页面时,fragment会被销毁来降低内存消耗。
- public class CollectionDemoActivity extends FragmentActivity {
- // 当被请求时, 这个adapter会返回一个DemoObjectFragment,
- // 代表在对象集中的一个对象.
- DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
- ViewPager mViewPager;
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_collection_demo);
- // ViewPager和他的adapter使用了support library
- // fragments,所以要用getSupportFragmentManager.
- mDemoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getSupportFragmentManager());
- mViewPager = (ViewPager) findViewById(R.id.pager);
- mViewPager.setAdapter(mDemoCollectionPagerAdapter);
- }
- }
- // 因为这是一个对象集所以使用FragmentStatePagerAdapter,
- // 而不是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();
- // 我们的对象只是一个整数 :-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);
- }
- }
- // 这个类的实例是一个代表了数据集中一个对象的fragment
- public static class DemoObjectFragment extends Fragment {
- public static final String ARG_OBJECT = "object";
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- // 最后两个参数保证LayoutParam能被正确填充
- 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 view的必要代码。下面一节向你说明如何通过添加tab使导航更方便在页面间切换。
添加
Tab
到
Action Bar
Action bar
tab能给用户提供更熟悉的界面来在app的同级屏幕中切换和分辨。
- @Override
- public void onCreate(Bundle savedInstanceState) {
- final ActionBar actionBar = getActionBar();
- ...
- // 指定在action bar中显示tab.
- actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
- // 创建一个tab listener,在用户切换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) {
- // 可以忽略这个事件
- }
- };
- // 添加3个tab, 并指定tab的文字和TabListener
- for (int i = 0; i < 3; i++) {
- actionBar.addTab(actionBar.newTab().setText("Tab " + (i + 1)).setTabListener(tabListener));
- }
- }
复制代码
使用
Swipe View
切换
Tab
- @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) {
- // 当tab被选中时, 切换到ViewPager中相应的页面.
- mViewPager.setCurrentItem(tab.getPosition());
- }
- ...
- };
- }
复制代码
- @Override
- public void onCreate(Bundle savedInstanceState) {
- ...
- mViewPager = (ViewPager) findViewById(R.id.pager);
- mViewPager.setOnPageChangeListener(
- new ViewPager.SimpleOnPageChangeListener() {
- @Override
- public void onPageSelected(int position) {
- // 当划屏切换页面时,选择相应的tab.
- getActionBar().setSelectedNavigationItem(position);
- }
- });
- ...
- }
复制代码
使用标题条替代
Tab
- <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>
复制代码
来源影子侠开发者社区蛋仔