Android开发之ViewPager切换动画
2016-04-23 10:50
447 查看
Android从3.0开始,ViewPager也开始有了切换动画,ViewPager有个setPageTransformer()方法,用于设置ViewPager切换时的动画效果。Google提供了两个切换动画的例子:DepthPageTransformer和
ZoomOutPageTransformer。其实完全可以通过实现 ViewPager.PageTransformer接口,然后重写
transformPage(View view, float position)方法来做出属于自己的切换动画效果。但是最难的就是该方法中两个参数的理解,其中view就是ViewPager中滑动的View,但是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 ]
PageTransformer.gif
文/YungFan(简书作者)
原文链接:http://www.jianshu.com/p/33b1734f0736
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
ZoomOutPageTransformer。其实完全可以通过实现 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
文/YungFan(简书作者)
原文链接:http://www.jianshu.com/p/33b1734f0736
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories