Android：给ViewPager添加切换效果

原文参照开发者官网：http://developer.android.com/training/animation/screen-slide.html#viewpager

以App的引导页为例：

首先创建一个包含ViewPager的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

创建一个Activity：

Sets the content view to be the layout with the

ViewPager

.

Creates a class that extends the

FragmentStatePagerAdapter

abstract class and implements the

getItem()

method to supply instances of

ScreenSlidePageFragment

as new pages. The pager adapter also requires that you implement the

getCount()

method, which returns the amount of pages the adapter will create (five in the example).

Hooks up the

PagerAdapter

to the

ViewPager

.

Handles the device's back button by moving backwards in the virtual stack of fragments. If the user is already on the first page, go back on the activity back stackpublic class MainActivity extends Activity {

private ViewPager viewPager;
private int imageIds[] = new int[] {R.drawable.bg_guide1,R.drawable.bg_guide2,R.drawable.bg_guide3};
private List <ImageView> imageList ;

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

viewPager = (ViewPager) findViewById(R.id.viewpager);
imageList = new ArrayList<ImageView>();

viewPager.setPageTransformer(true, new DepthPageTransformer());

viewPager.setAdapter(new PagerAdapter() {

@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(MainActivity.this);
imageView.setBackgroundResource(imageIds[position]);
imageView.setScaleType(ScaleType.CENTER_CROP);
container.addView(imageView);
imageList.add(imageView);
return imageView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
container.removeView(imageList.get(position));
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getCount() {
return imageIds.length;
}
});
}

}

DepthPageTransformer.class:

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

ZoomOutPagerTransformer.class:

public class ZoomOutPagerTransformer 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);
}
}
}