PageTransformer

对于屏幕切换使用ViewPager

创建视图

创建一个布局文件，之后你将把它用作fragment的内容。

?

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14

<com.example.android.animationsdemo.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" />    </com.example.android.animationsdemo.ScrollView>

创建Fragment

创建一个Fragment类，在onCreateView（）中返回刚才创建的布局。当你需要一个新的页面
来展示给用户时，你可以创建一个该fragment的实例。

?

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11

public class ScreenSlidePageFragment extends 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;     } }

添加一个ViewPager

ViewPager在页面切换的时候设有内置的滑动手势，它能够默认展示屏幕动画。ViewPager使
用PagerAdapter显示新的页面，所以PagerAdapter将会使用你之前创建的fragment类。
开始时，先创建一个包含ViewPager的布局文件：

?

代码片段，双击复制

01 02 03 04 05

<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" />

创建一个activity做下面的事情：
1.将有ViewPager的布局设置为content view。
2.创建一个继承于FragmentStatePagerAdapter抽象类的子类，实现getItem（）方法提供一个
ScreenSlidePageFragment的实例作为新的页面。该adapter也需要你实现getCount（）方法，
它会返回在adapter中创建的页面的数量。
3.将PagerAdapter配置到ViewPager。
4.重写设备的back键，使viewpager退回到前一个fragment。如果用户已经在第一个页面，则
返回前一个activity。

?

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

public class ScreenSlidePagerActivity extends FragmentActivity {     /**       * 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 allows 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_screen_slide_pager);             // Instantiate a ViewPager and a PagerAdapter.          mPager = (ViewPager) findViewById(R.id.pager);          mPagerAdapter = new ScreenSlidePagerAdapter(getFragmentManager());          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(FragmentManager fm) {              super (fm);          }             @Override          public Fragment getItem( int position) {              return new ScreenSlidePageFragment();          }             @Override          public int getCount() {              return NUM_PAGES;          }     } }

使用PageTransformer定制动画

要显示一个不同于默认动动画的动画，实现ViewPager.PageTransformer接口，并将其提供给
view pager。该接口提供了唯一一个方法transformPage（）。在每一个屏幕变换的点，该方
法都被每一个可见的页面和每一个相邻退出屏幕的页面调用。例如，如果第三个页面是可见
的，用户拖动屏幕滑向第四个界面，transformPage（）被两个页面调用，第三个和第四个页
面，在用户手势的每一步。

在你的transformPage（）的实现中，你可以通过基于当前页面的位置确定哪个页面将要被显
示，来创建定制的动画，当前页面的位置可由transformPage（）的参数确定。

该位置参数明确了相对屏幕中心位置的页面。这是一个动态变化的参数，随着用户滑动屏幕
而变化。当一个页面充满整个屏幕时，它的位置是0.当一个页面从屏幕的右侧退出时，其位
置为1.如果用户滑动到第一页和第二页的中间时，第一页的位置为-0.5，第二页的位置为0.5。
基于在屏幕上页面的位置，你可以通过使用setAlpha （ ） ， setTranslationX （ ） ，或
setScaleY （）方法设置页面属性，来创建自定义动画。

当你有一个PageTransformer的实现时，调用setPageTransformer（）方法来提供自定义的动
画。

?

代码片段，双击复制

01 02 03

ViewPager pager = (ViewPager) findViewById(R.id.pager);   ...   pager.setPageTransformer( true , new ZoomOutPageTransformer());

Zoom-out页面变换

?

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {     private static float MIN_SCALE = 0 .85f;     private static 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 );          }     } }

深度页面变换

?

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

public class DepthPageTransformer implements ViewPager.PageTransformer {     private static 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 );          }     } }