Android ViewPager

昨天看到Weather&Clock Widget的页面滑动效果不错，了解了下可能是使用ViewPager来实现的，今天研究下，顺便记录下来。

 

根据Android官网的介绍，ViewPager属于android.support.v4.view包，android.support.v4.view包支持level在4.0及以上的系统，其主要特性是为处理后台与视图交互提供了大量的类。

 

android.support.v4.view包内与ViewPager相关的类及其功能如下所示：

ViewPager	布局管理器，允许用户在页面之间左右滑动。
ViewPager.LayoutParams	支持添加到ViewPager中的视图（View）的布局参数。
ViewPager.SavedState	由ViewPager保存的状态。
ViewPager.SimpleOnPageChangeListener	ViewPager.OnPageChangeListener接口的简单实现，包含各种方法的基本实现。

ViewPager的功能是可以使视图左右滑动，按照Android官网提供的方法，其使用可分为几个步骤：

 

1、建立显示卡页面布局

    建立显示卡页面布局文件fragment_screen_slide_page.xml，其内容为：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        style="?android:textAppearanceMedium"
        android:paddingLeft="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="1234"/>

</ScrollView>

2、创建Fragment类

    ScreenSlidePageFragment.java，在onCreateView()方法中返回显示卡页面布局，其内容为：

public class ScreenSlidePageFragment extends android.support.v4.app.Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup)inflater.inflate(R.layout.fragment_screen_slide_page, container, false);
        return rootView;
    }
}

3、添加ViewPager

    ViewPager拥有内置的滑动处理方法进行显示卡之间的切换操作，并且自带动画效果。ViewPager通过PagerAdapter为新显示卡提供数据，所以下面新建的ViewPager将用到前面创建的ScreenSlidePageFragment类。

 

    首先，在显示布局文件中添加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" />

    其次，通过ViewPager来设置内容视图

// Instantiate a ViewPager and a PagerAdapter.
mPager = (ViewPager)findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());

接下来创建一个继承了FragmentStatePagerAdapter的类，并通过在getItem()方法中实例化新的ScreenSlidePageFragment类来创建新的显示卡。此外，PagerAdapter需要实现getCount()方法，在其中返回显示卡的个数。

private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
    public ScreenSlidePagerAdapter(android.support.v4.app.FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        return new ScreenSlidePageFragment();
    }

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

将PagerAdapter和ViewPager关联起来

mPager.setAdapter(mPagerAdapter);

Activity的整体代码如下所示，其中对返回键点击事件进行了判断，当显示的是第一个显示卡时关闭应用，其他情况返回上一显示卡。

public class MainActivity extends AppCompatActivity {

    /*
    * The number of pages (wizard steps) to show in this demo.
    * */
    private static final int NUM_PAGES = 5;

    /*
    * The pager widget, which handles animation and allow swiping horizontally to access previous and next wizard steps.
    * */
    private ViewPager mPager;

    /*
    * The pager adapter, which provides the pages to the view pager widget.
    * */
    private PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = (ViewPager)findViewById(R.id.pager);
        mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if(mPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step, allow the system to handle the Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    /*
    * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in sequence.
    * */
    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(android.support.v4.app.FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public Fragment getItem(int position) {
            return new ScreenSlidePageFragment();
        }

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

 

另附两个动画效果，可通过以下方法调用：

mPager.setPageTransformer(true, new ZoomOutPageTransformer());

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                            (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

以上内容大部分来自Android官网

参考：http://developer.android.com/training/animation/screen-slide.html#fragment