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