Android UI设计（引导界面）：ViewPager之二滑动切换效果

一、为什么要学习引导界面的滑动切换效果　　

　　在之前的博客中介绍了ViewPager的基本用法，但是ViewPager作为一种引导界面，我们单单学会基本用法是远远不够的，如果细心观察我们会发现界面的切换也是有所不同的，为了在以后的做出更加酷炫的APP，给用户以更好的体验，我们一起来学习一下利用goole官方提供的两种方式实现界面的切换效果。

注意：这种两种方式仅支持Android 3.0以上版本（API　11以上）　　

二、两种滑动效果的实现

　　首先我们来看下布局文件，布局文件的载入与之前相同，但是之前我们手写包名+ViewPager太麻烦，这里给大家提供一种简单的方法，就是在引入布局文件时按住ctrl+shift+T就可以直接出现源码找到包名复制即可（这只是Eclipse的方法，以后晓得AS的方法再补充吧），来看下效果。

　　

　　



因为布局与之前相同就不进行展示了。

　　下面让我们先来看下两种滑动切换的具体实现。其实实现滑动切换的效果非常简单，只需要一个语句（mViewPager.setPageTransformer()）即可，然后再利用google为我们提供的DepthPageTransformer和 ZoomOutPageTransformer 两个类即可。

DepthPageTransformer类

这里我们直接将下面的代码复制到project中，点开后可能会有错误，需要我们自己写一下ViewPager将它的包导入（ctrl +shift+O），再将View的包导入就可以了

[code]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);
        }
    }
}

效果（侧滑展开）

ZoomOutPageTransformer

与上面相同也是直接复制到project然后导包。

[code]这里写代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);
        }
    }

效果图（下个界面完全展示之前不会那么亮，我感觉有点像蒙版的效果）

MainActivity的调用

[code]public class MainActivity extends Activity {
    private ViewPager mViewPager;
    private int[] mImageIds=new int[]{R.drawable.guide_image8,R.drawable.guide_image4,R.drawable.guide_image1,R.drawable.guide_image2,R.drawable.guide_image3};
    private List<ImageView> mImages=new ArrayList<ImageView>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager=(ViewPager) findViewById(R.id.viewpager);
        //为ViewPager添加动画切换效果,仅支持3.0以后使用
 //       mViewPager.setPageTransformer(true, new DepthPageTransformer() );//3.0以后使用
        mViewPager.setPageTransformer(true, new ZoomOutPageTransformer() );
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {

                container.removeView(mImages.get(position));

            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                ImageView image=new ImageView(MainActivity.this);
                image.setImageResource(mImageIds[position]);
                //为了不使图片变形
                image.setScaleType(ScaleType.CENTER_CROP);
                container.addView(image);
                mImages.add(image); 
                //返回image
                return image;
            }
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return arg0==arg1;
            }

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return mImageIds.length;
            }
        });
    }   
}