2015/5/13 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 stack.

public 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的源码可以发现只有3.0之后的版本才有setPageTransformer(boolean arg0,    * PageTransformer pageTransformer)这个方法.    * 第一个参数直接给true，第二个可以new官方推荐的DepthPageTransformer和    * ZoomOutPagerTransformer两个类，但是这需要起我们去官网搜索这个两个类并且拷贝到项目中来.    * 当然，这两个ViewPager的滑动效果只针对3.0以后的版本生效，所以我们还需要兼容低版本.    * 兼容低版本其实也很简单，首先就从ViewPager下手，主要是要注释掉判断判断sdk版本号大于11的代码.由于DepthPageTransformer类    * 和ZoomOutPagerTransformer类都用到了属性动画，我们知道属性动画也是3.0之后才有的，所以可以引入ninooldandroids    * 来代替属性动画.当然参照ZoomOutPagerTransformer和DepthPageTransformer的源码我们也可以随意实现想要的切换效果
   * 下一篇一定详细的整理兼容低版本和自定义切换效果.    *     */   if(Build.VERSION.SDK_INT >= 11){ //   viewPager.setPageTransformer(true, new ZoomOutPagerTransformer());    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);   }  } }