用开源项目JazzyViewPager实现ViewPager切换动画
JazzyViewPager这个项目可以让viewpager有各种绚丽的动画，而且还可以自由扩展。但从官网下载的lib导入时会出现找不到视图的问题，不知道是不是我人品不行，所以我就自己写了lib。总之，本篇就是来讲这些可以有华丽动画的viewpager。
JazzyViewPager项目地址：https://github.com/jfeinstein10/JazzyViewPager
一、布局文件
像viewpager一样，直接写一个控件即可。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#00ff00"> <com.jfeinstein.jazzyviewpager.JazzyViewPager xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/jazzyViewPager" android:layout_width="match_parent" android:layout_height="match_parent" > </com.jfeinstein.jazzyviewpager.JazzyViewPager> </LinearLayout>
它里面还有很多属性可以定义的，像上面的可以用app这个命名空间来定义属性。下面是各种属性，基本就是各种动画，和淡入淡出效果
fadeEnable:是否有淡入淡出效果
outLineEnable:viewpager一个视图周边是否有边框
outLineColor:边框颜色
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="JazzyViewPager"> <attr name="style"> <enum name="standard" value="0" /> <enum name="tablet" value="1" /> <enum name="cubein" value="2" /> <enum name="cubeout" value="3" /> <enum name="flipvertical" value="4" /> <enum name="fliphorizontal" value="5" /> <enum name="stack" value="6" /> <enum name="zoomin" value="7" /> <enum name="zoomout" value="8" /> <enum name="rotateup" value="9" /> <enum name="rotatedown" value="10" /> <enum name="accordion" value="11" /> </attr> <attr name="fadeEnabled" format="boolean" /> <attr name="outlineEnabled" format="boolean" /> <attr name="outlineColor" format="color|reference" /> </declare-styleable> </resources>
二、java代码实现
2.1首先看看它有什么动画效果，至于各种动画是什么样的，自己去试试吧~
* Standard
* Tablet
* CubeIn
* CubeOut
* FlipVertical
* FlipHorizontal
* Stack
* ZoomIn
* ZoomOut
* RotateUp
* RotateDown
* Accordion
2.2设置动画的方法
viewPager.setTransitionEffect(TransitionEffect.Tablet);
or
TransitionEffect effect = TransitionEffect.valueOf("Tablet");
setupJazziness(effect);
2.3简单设置
viewPager.setPageMargin(100);//两个页面之间的间距
viewPager.setFadeEnabled(true);//有淡入淡出效果
viewPager.setOutlineEnabled(true);//有边框
viewPager.setOutlineColor(0xff0000ff);//边框颜色
2.4适配器的写法
这里已经写的很简单了，以后照猫画虎就行。主要就是里面需要用这个viewpager做一些事情。
官方文档中说：Due to the limitations of the ViewPager class (which JazzyViewPager is built upon) in order to get the animations to work correctly for more than 3 Views, you'll have to add the following to theinstantiateItem method of your PagerAdapter.
private JazzyViewPager mJazzy; /* ... */ @Override public Object instantiateItem(ViewGroup container, final int position) { Object obj = super.instantiateItem(container, position); mJazzy.setObjectForPosition(obj, position); return obj; }
大概意思就是如果viewpager中的view超过3个了，就需要添加上面这个方法。这里面的obj就是一个view对象，具体参照下面的例子。
例子：
/** * @author:Jack Tony * @tips :下面的方法需要注意，尽量按照这种写法。 * @date :2014-10-22 */ class MyAdapter extends PagerAdapter{ @Override public int getCount() { // TODO 自动生成的方法存根 return 10; } @Override public boolean isViewFromObject(View view, Object obj) { if (view instanceof OutlineContainer) { return ((OutlineContainer) view).getChildAt(0) == obj; } else { return view == obj; } } /* 如果viewpager中的view超过3个就需要重写这个方法*/ @Override public Object instantiateItem(ViewGroup container, final int position) { TextView tv = new TextView(getApplicationContext()); tv.setText("Page " + (position + 1)); tv.setTextColor(Color.parseColor("#000000")); tv.setTextSize(30); tv.setGravity(Gravity.CENTER); tv.setBackground(getWallpaper()); container.addView(tv, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); //这句话必须要写，按不同的位置添加视图 viewPager.setObjectForPosition(tv, position); return tv; } @Override public void destroyItem(ViewGroup container, int position, Object obj) { container.removeView(viewPager.findViewFromObject(position)); } }
ok，这样就基本搞定了。贴上全部代码：
MainActivity.java
package com.kale.jazzviewpagertest; import android.app.ActionBar.LayoutParams; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.jfeinstein.jazzyviewpager.JazzyViewPager; import com.jfeinstein.jazzyviewpager.JazzyViewPager.TransitionEffect; import com.jfeinstein.jazzyviewpager.OutlineContainer; public class MainActivity extends Activity { private JazzyViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (JazzyViewPager)findViewById(R.id.jazzyViewPager); /** * 添加动画效果，可以设置很多动画效果。如： * Standard * Tablet * CubeIn * CubeOut * FlipVertical * FlipHorizontal * Stack * ZoomIn * ZoomOut * RotateUp * RotateDown * Accordion * * 下面是可以通过字符串来产生动画对象的例子： * TransitionEffect effect = TransitionEffect.valueOf("Tablet"); * setupJazziness(effect); */ viewPager.setTransitionEffect(TransitionEffect.Tablet); viewPager.setPageMargin(100);//两个页面之间的间距 viewPager.setFadeEnabled(true);//有淡入淡出效果 viewPager.setOutlineEnabled(true);//有边框 viewPager.setOutlineColor(0xff0000ff);//边框颜色 /** * 设置适配器 * 但当ViewPager中的子View超过三个的时候，我们需要对PagerAdapter修改， * 重写InstantiateItem()方法 */ viewPager.setAdapter(new MyAdapter()); viewPager.setOnPageChangeListener(null);//可以监听page的改变 } /** * @author:Jack Tony * @tips :下面的方法需要注意，尽量按照这种写法。 * @date :2014-10-22 */ class MyAdapter extends PagerAdapter{ @Override public int getCount() { // TODO 自动生成的方法存根 return 10; } @Override public boolean isViewFromObject(View view, Object obj) { if (view instanceof OutlineContainer) { return ((OutlineContainer) view).getChildAt(0) == obj; } else { return view == obj; } } /* 如果viewpager中的view超过3个就需要重写这个方法*/ @Override public Object instantiateItem(ViewGroup container, final int position) { TextView tv = new TextView(getApplicationContext()); tv.setText("Page " + (position + 1)); tv.setTextColor(Color.parseColor("#000000")); tv.setTextSize(30); tv.setGravity(Gravity.CENTER); tv.setBackground(getWallpaper()); container.addView(tv, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); //这句话必须要写，按不同的位置添加视图 viewPager.setObjectForPosition(tv, position); return tv; } @Override public void destroyItem(ViewGroup container, int position, Object obj) { container.removeView(viewPager.findViewFromObject(position)); } } }
最终效果：
扩展：
我们当然可以继续扩展动画，下面就扩展一个动画。
一、先定义一个动画名字，这里叫test
public enum TransitionEffect { Standard, Tablet, CubeIn, CubeOut, FlipVertical, FlipHorizontal, Stack, ZoomIn, ZoomOut, RotateUp, RotateDown, Accordion, Test;}
二、写实现方式
protected void animateTest(View left, View right, float positionOffset) { if (mState != State.IDLE) { if (left != null) { //此处增加具体动画 } if (right != null) { //此处增加具体动画实现 } } }
这里举一个源码中table的例子
protected void animateTablet(View left, View right, float positionOffset) { if (mState != State.IDLE) { if (left != null) { manageLayer(left, true); mRot = 30.0f * positionOffset; mTrans = getOffsetXForRotation(mRot, left.getMeasuredWidth(), left.getMeasuredHeight()); ViewHelper.setPivotX(left, left.getMeasuredWidth()/2); ViewHelper.setPivotY(left, left.getMeasuredHeight()/2); ViewHelper.setTranslationX(left, mTrans); ViewHelper.setRotationY(left, mRot); logState(left, "Left"); } if (right != null) { manageLayer(right, true); mRot = -30.0f * (1-positionOffset); mTrans = getOffsetXForRotation(mRot, right.getMeasuredWidth(), right.getMeasuredHeight()); ViewHelper.setPivotX(right, right.getMeasuredWidth()*0.5f); ViewHelper.setPivotY(right, right.getMeasuredHeight()*0.5f); ViewHelper.setTranslationX(right, mTrans); ViewHelper.setRotationY(right, mRot); logState(right, "Right"); } } }
三、添加实现代码到设置项中
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (mState == State.IDLE && positionOffset > 0) { oldPage = getCurrentItem(); mState = position == oldPage ? State.GOING_RIGHT : State.GOING_LEFT; } boolean goingRight = position == oldPage; if (mState == State.GOING_RIGHT && !goingRight) mState = State.GOING_LEFT; else if (mState == State.GOING_LEFT && goingRight) mState = State.GOING_RIGHT; float effectOffset = isSmall(positionOffset) ? 0 : positionOffset; // mLeft = getChildAt(position); // mRight = getChildAt(position+1); mLeft = findViewFromObject(position); mRight = findViewFromObject(position+1); if (mFadeEnabled) animateFade(mLeft, mRight, effectOffset); if (mOutlineEnabled) animateOutline(mLeft, mRight); switch (mEffect) { case Standard: break; case Tablet: animateTablet(mLeft, mRight, effectOffset); break; case CubeIn: animateCube(mLeft, mRight, effectOffset, true); break; case CubeOut: animateCube(mLeft, mRight, effectOffset, false); break; case FlipVertical: animateFlipVertical(mLeft, mRight, positionOffset, positionOffsetPixels); break; case FlipHorizontal: animateFlipHorizontal(mLeft, mRight, effectOffset, positionOffsetPixels); case Stack: animateStack(mLeft, mRight, effectOffset, positionOffsetPixels); break; case ZoomIn: animateZoom(mLeft, mRight, effectOffset, true); break; case ZoomOut: animateZoom(mLeft, mRight, effectOffset, false); break; case RotateUp: animateRotate(mLeft, mRight, effectOffset, true); break; case RotateDown: animateRotate(mLeft, mRight, effectOffset, false); break; case Accordion: animateAccordion(mLeft, mRight, effectOffset); break; case Test:
animateTest(mLeft, mRight, effectOffset); break; } super.onPageScrolled(position, positionOffset, positionOffsetPixels); if (effectOffset == 0) { disableHardwareLayer(); mState = State.IDLE; } }
原理和思路讲解：http://blog.csdn.net/lmj623565791/article/details/38026503
源码下载：http://download.csdn.net/detail/shark0017/8070139
参考自：http://blog.csdn.net/t12x3456/article/details/13290349
扫一扫
53万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
