Android开发之ViewPager切换动画

Android从3.0开始,ViewPager也开始有了切换动画,ViewPager有个setPageTransformer()方法,用于设置ViewPager切换时的动画效果。Google提供了两个切换动画的例子:DepthPageTransformerZoomOutPageTransformer。其实完全可以通过实现 ViewPager.PageTransformer接口,然后重写 transformPage(View view, float position)方法来做出属于自己的切换动画效果。但是最难的就是该方法中两个参数的理解,其中view就是ViewPager中滑动的View,但是position比较难理解,接下来在测试中来一探究竟。

Activity布局

<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"></android.support.v4.view.ViewPager>

</RelativeLayout>

Activity.java

public class MainActivity extends Activity {

    private ViewPager mViewPager;

    private int[] images = {R.drawable.one, R.drawable.two, R.drawable.three};

    private ArrayList<ImageView> imageViews = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();

    }

    /**
     * 初始化数据
     */
    private void init() {
        // 定义一个布局并设置参数
        LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);

        // 初始化引导图片列表
        for (int i = 0; i < images.length; i++) {
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(mParams);
            // 防止图片不能填满屏幕
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            // 加载图片资源
            iv.setImageResource(images[i]);
            imageViews.add(iv);
        }

        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.setAdapter(new MyViewPagerAdapter());

        // 设置切换动画

        mViewPager.setPageTransformer(true, new MyPageTransformer());
    }


    class MyViewPagerAdapter extends PagerAdapter {

        // viewpager中的要显示的View的总数量
        @Override
        public int getCount() {
            return imageViews.size();
        }

        // 滑动切换的时候销毁当前的View
        @Override
        public void destroyItem(ViewGroup container, int position,
                                Object object) {
            container.removeView(imageViews.get(position));
        }

        // 每次滑动的时候生成的View
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(imageViews.get(position));
            return imageViews.get(position);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }
    }

}

MyPageTransformer,自定义切换动画

public class MyPageTransformer implements ViewPager.PageTransformer {


    /**
     *
     * @param view 滑动中的那个view
     * @param position
     */
    public void transformPage(View view, float position) {


        if (position < -1) { // [-Infinity,-1)
            Log.e("TAG [-Infinity,-1)  ", view + " , " + position + "");

        } else if (position <= 1) // a页滑动至b页 ; a页从 0.0 ~ -1 ;b页从1 ~ 0.0
        {
            Log.e("TAG [-1, 1]", view + " , " + position + "");

        } else { // (1,+Infinity]
            Log.e("TAG (1,+Infinity] ", view + " , " + position + "");
        }
    }
}

打印分析

三个界面分别为A、B和C,滑动顺序为A->B->C,然后返回,通过打印测试,position的变化如下:

A —> B A界面的position变化区间[0, -1] B界面的position变化区间[1, 0 ] C界面无变化


B —> C A界面的position变化区间[-1, -2] B界面的position变化区间[0, -1] C界面的position变化区间[1, 0 ]


C —> B A界面的position 无变化 B界面的position变化区间[-1, 0] C界面的position变化区间[0, 1 ]


B —> A A界面的position 变化区间[-1,0] B界面的position 变化区间[0, 1] C界面的position变化就是[1, 2 ]

实现一个自己的切换动画(参考网上代码)

public class MyPageTransformer implements ViewPager.PageTransformer {

    private static final float ROT_MAX = 20.0f;
    private float mRot;

    /**
     * @param view     滑动中的那个view
     * @param position
     */
    public void transformPage(View view, float position) {


        //界面不可见
        if (position < -1) {
            ViewCompat.setRotation(view, 0);

        }
        //界面可见
        else if (position <= 1) {
            mRot = (ROT_MAX * position);
            ViewCompat.setPivotX(view, view.getMeasuredWidth() * 0.5f);
            ViewCompat.setPivotY(view, view.getMeasuredHeight());
            ViewCompat.setRotation(view, mRot);

        }
        //界面不可见
        else {
            ViewCompat.setRotation(view, 0);
        }
    }
}

测试效果

PageTransformer.gif

代码地址

https://github.com/yungfan/PageTransformerDemo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏QQ音乐技术团队的专栏

Android动态布局入门及NinePatchChunk解密

摆脱XML布局文件 相信每一个Android开发者,在接触“Hello World”的时候,就形成了一个观念:Android UI布局是通过layout目录下...

61970
来自专栏向治洪

actionbar详解(二)

经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了。唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是...

20880
来自专栏向治洪

Android View架构总结

View和Activity的区别 android的四大组件,Activity是四大组件中唯一一个用来和用户进行交互的组件。可以说Activity就是androi...

26460
来自专栏刘晓杰

android全局替换字体最新方案

36280
来自专栏腾讯Bugly的专栏

RecyclerView 必知必会

导语 RecyclerView是Android 5.0提出的新UI控件,可以用来代替传统的ListView。 Bugly之前也发过一篇相关文章,讲解了 Recy...

49870
来自专栏分享达人秀

GridView属性和使用方法

前面一共用了8期来学习ListView列表的相关操作,其实学习的ListView的知识完全适用于AdapterView的其他子类,如GridView、S...

35070
来自专栏一“技”之长

Java开发GUI之Dialog弹出窗口 原

15820
来自专栏Android开发指南

11.webview、shareSDK

29060
来自专栏项勇

[Android学习]之解析练习RadioButton+Fragment+viewpager布局架构

26640
来自专栏Android先生

RecyclerView 梳理:点击&amp;长按事件、分割线、拖曳排序、滑动删除

这次主要是把 RecyclerView 比较常用的基本的点,在这里集中整理一下。从这篇文章主要梳理以下几点:

29630

扫码关注云+社区

领取腾讯云代金券