android学习(十八) 添加动画(二) 使用ViewPager的屏幕幻灯片

完成以下文件：
· src/ScreenSlidePageFragment.java
· src/ScreenSlideActivity.java
· layout/activity_screen_slide.xml
· layout/fragment_screen_slide_page.xml

---

创建Views

<!-- fragment_screen_slide_page.xml -->
<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:padding="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />
</ScrollView>

创建Fragment

public class ScreenSlidePageFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_screen_slide_page,container,false);
        return rootView;
    }
}

---

添加ViewPager

<!-- activity_screen_slide.xml -->
<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

1. 设置content作为viewpager的内容视图
2. 创建一个类继承fragmentstatepageradapter抽象类，实现getItem()提供screenslidepagefragment实例。同时活该需要继承getCount()返回page的数量。
3. ViewPager设置适配器 PagerAdapter
4. 通过在虚拟堆栈堆栈中向后移动来处理设备的后退按钮。如果用户已经在第一页上，返回活动返回堆栈。

public class ScreenSlideActivity extends FragmentActivity {
    //pages的个数
    private static final int NUM_PAGES = 5;
    private ViewPager mPager;
    private PagerAdapter mPagerAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);
        //实例化ViewPager和PagerAdapter
        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);
    }
    //如果page为一则退出，如果page不为一则返回上一个page
    @Override
    public void onBackPressed() {
        if(mPager.getCurrentItem()==0){
            super.onBackPressed();
        }else {
            mPager.setCurrentItem(mPager.getCurrentItem()-1);
        }
    }
    //有5个ScreenSlidePageFragment的Viewpager的PaferAdapter
    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter{

        public ScreenSlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

用PageTransformer自定义动画

显示不同于默认viewpager的动画需要实现viewpager.pagetransformer接口，并提供给viewpager。该接口提供了单一的方法，transformpage()。每页页面有移动时，邻近的页面都会调用这个方法
通过设置setAlpha()，setTranslationX()或 setScaleY()等方法自定义viewpager。

实现PageTransformer需要调用setPageTransformer()方法实现自定义动画

ViewPager mPager = (ViewPager) findViewById(R.id.pager);
...
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;
    @Override
    public void transformPage(View page, float position) {
        int pageWidth = page.getWidth();
        int pageHeight = page.getHeight();
        //position指两个page之间的位置[-1,1]
        if(position<-1){
            //[-无穷，-1)
            //这个页面是关闭屏幕左边
            page.setAlpha(0);
        } else if(position<=1){
            //[-1,1]
            //修改默认的幻灯片转换为缩小页面
            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){
                page.setTranslationX(horzMargin - vertMargin/2);
            } else {
                page.setTranslationX(-horzMargin + vertMargin/2);
            }
            //page向下的比例[MIN_SCALE,1]
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);

            page.setAlpha(MIN_ALPHA+(scaleFactor-MIN_SCALE)/(1-MIN_SCALE)*(1 - MIN_ALPHA));
        } else {
            //[1,+无穷]
            page.setAlpha(0);
        }
    }
}

深度页变压器

在深度动画，默认的动画（画面幻灯片）仍然发生，所以你必须抵消了负X平移屏幕幻灯片。

view.setTranslationX(-1 * view.getWidth() * position);

实现方法：

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) {
            view.setAlpha(0);
        } else if (position <= 0) { // [-1,0]
            //当移动到左页时使用默认的幻灯片转换
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) { // (0,1]
            //淡出页面
            view.setAlpha(1 - position);
            //抵消默认幻灯片转换
            view.setTranslationX(pageWidth * -position);
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else {
            view.setAlpha(0);
        }
    }
}

---

摘自android developer