当前位置: 代码迷 >> Android >> Android-使用ViewPager回实现屏幕滑动效果
  详细解决方案

Android-使用ViewPager回实现屏幕滑动效果

热度:56   发布时间:2016-04-28 08:10:48.0
Android---使用ViewPager来实现屏幕滑动效果

本文译自:http://developer.android.com/training/animation/screen-slide.html

本文示例代码:http://download.csdn.net/detail/fireofstar/6211781

屏幕滑动是两个整屏窗口之间切换的一种效果,并且常用于安装向导或幻灯片。本文介绍如何通过supportlibrary类库提供的ViewPager类来实现这种效果。ViewPager类能够自动的完成滑屏的动画效果。

创建View

创建一个稍后给Fragment显示内容所要使用的布局文件。下例包含了一个要显示文本的TextView视图:

<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所在的父Activity中创建它的实例:

publicclassScreenSlidePageFragmentextendsFragment{

   
@Override
    public View onCreateView(LayoutInflaterinflater, 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类的布局:

<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类的布局设置给一个内容视图;

2. 创建一个继承于FragmentStatePagerAdapter抽象类的类,并实现它的getItem()方法,以便提供一个ScreenSlidePageFragment实例来作为新的页面。这个也适配器还要求你实现getCount()方法,它会返回这个页面适配器所创建的页面的个数(本例中是5个)。

3. 把页面适配器(PagerAdapter)挂靠到ViewPager上;

4. 处理设备的回退按钮,以便在Fragment的虚拟堆栈中向后移动。如果用户已经在第一个页面,那么就会返回到Activity所在的回退堆栈。

publicclassScreenSlidePagerActivityextendsFragmentActivity{
   
/**
     * The number of pages (wizard steps) toshow in this demo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * The pager widget, which handles animationand allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager mPager;

    /**
     * The pager adapter, which provides thepages to the view pager widget.
     */
    private PagerAdaptermPagerAdapter;

    @Override
    protected void onCreate(BundlesavedInstanceState) {
        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 systemto handle the
            // Back button. This calls finish() on this activity and pops theback stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    /**
     * A simple pager adapter that represents 5ScreenSlidePageFragment 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接口,并把它提供给对应的视图页面。这个接口只暴露了一个方法---transformPage()。通常在屏幕过渡时,这个方法会被调用一次,用于显示页面(一般只有一个可见页面)和关闭相邻的页面。例如,如果页面三可见,并且用户向页面四的方向拖动该页,transformPage()方法就会手势执行阶段,被页面二、页面三、页面四调用。

在你的transformPage()实现中,基于屏幕上页面的位置,来判断那个页面需要变换,以便创建自定义滑动动画。从transformPage()方法的position参数中可以获得页面的位置。

position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性,会随着页面的滚动而改变。当一个页面填充整个屏幕是,它的值是0,当一个页面刚刚离开屏幕的右边时,它的值是1。当两个也页面分别滚动到一半时,其中一个页面的位置是-0.5,另一个页面的位置是0.5。基于屏幕上页面的位置,通过使用诸如setAlpha()setTranslationX()、或setScaleY()方法来设置页面的属性,来创建自定义的滑动动画。

当有了一个PageTransformer接口实现时,就可以调用你实现的setPageTransformer()方法来应用自定义动画。例如,如果你的PageTransformer实现被命名为ZoomOutPageTransformer,就可以像下面这样来设置自定义动画:

ViewPager pager=(ViewPager)findViewById(R.id.pager);
...

pager.setPageTransformer(true, new ZoomOutPageTransformer());

 

 

  相关解决方案