【Android开发日记】之入门篇（十五）——ViewPager+自定义无限ViewPager
ViewPager
在 Android 控件中，ViewPager 一直算是使用率比较高的控件，包括首页的banner,tab页的切换都能见到ViewPager的身影。
viewpager 来源自 v4 支持包 (android.support.v4.view.ViewPager),用于左右切换界面实现tab的效果。其使用方法与 ListView 类似都是搭配一个adapter进行数据适配。
在布局文件中添加
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="140dp" />
通常Viewpager直接往布局文件里面添加就可以了，虽然ViewPager是一个容器类，继承自 ViewGroup,但不建议往里面添加子view。
之后可以在代码中像调用普通控件一样通过 findViewById(R.id.viewpager) 通过id获取viewpager控件。
设置 PagerAdapter
PagerAdapter pagerAdapter = new PagerAdapter() {
//
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
//返回要滑动的VIew的个数
@Override
public int getCount() {
return viewList.size();
}
//从当前container中删除指定位置（position）的View;
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(viewList.get(position));
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
//做了两件事，第一：将当前视图添加到container中，第二：返回当前View
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
};
PagerAdapter 支持数据集合的改变，可以调用notifyDataSetChanged方法来进行更新。和BaseAdapter非常相似。
设置 ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater=getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2,null);
view3 = inflater.inflate(R.layout.layout3, null);
viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
//初始化 pagerAdapter
PagerAdapter pagerAdapter = new PagerAdapter() {...}
viewPager.setAdapter(pagerAdapter);
此时PagerAdapter包含了viewList数据，此时就能显示到Viewpager中。
ViewPager扩展
PagerTitleStrip 和 PagerTabStrip
这两个类都属于v4 support包中的类，两个都是是ViewPager的一个关于当前页面、上一个页面和下一个页面的指示器。
其作为ViewPager控件的一个子控件被被添加在XML布局文件中，每个页面的标题是通过适配器的getPageTitle(int)函数提供给ViewPager的。
但两者又有不同：
1、 PagerTabStrip 是可交互的，点哪滚到哪；
2、 PagerTabStrip 在当前页面下，会有一个下划线条来提示当前页面的Tab是哪个。
这里以 PagerTabStrip 为例
使用
添加布局
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_gravity="center">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
添加代码
titleList = new ArrayList<String>();// 每个页面的Title数据
titleList.add("1111");
titleList.add("2222");
titleList.add("3333");
通过PagerAdaper的getPageTitle(int position)来设置标题
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
缺陷
但由于 PagerTabStrip 的局限性，大家一般都会自定义一个指示器，通过ViewPager.OnPageChangeListener绑定。
同时安利一下 google design 包里面的 TabLayout 和 最新推出的Bottom navigation。
开源项目：无限 viewpager——一款可以高度自定义的 slider
这是一款我刚写的开源库，起初写这个是因为我想要一个可以高度自定义化的轮播器，它包括了一下几个特点：
使用自己项目中的ImageLoader,而不是被迫使用库中的图片加载器；
库中内置几款常用的指示器，也可以创建自己想要的指示器；
丰富多彩的转场动画，亦可以发挥你的创意创造新的特效；
可以为每一页建立动画效果。
关于无限轮播
一般的ViewPager播放到最后一个位置时，若要返回到第一个位置则必须从右向左，作为Banner时这是不自然的过渡效果。
我们知道ViewPager显示的个数是由PagerAdaper的getCount()方法决定的，既然如此那我们可以给它赋予一个极大的值使ViewPager不断向右轮播，这也是整个无限轮播的核心思想。
public class InfinitePagerAdapter extends PagerAdapter {
private static final String TAG = "InfinitePagerAdapter";
private static final boolean DEBUG = false;
private BaseSliderAdapter adapter;
public InfinitePagerAdapter(BaseSliderAdapter adapter) {
this.adapter = adapter;
adapter.registerDataSetObserver(new DataSetObserver() {
@Override
public void onChanged() {
notifyDataSetChanged();
super.onChanged();
}
});
}
public BaseSliderAdapter getRealAdapter() {
return this.adapter;
}
@Override
public CharSequence getPageTitle(int position) {
return adapter.getPageTitle(position % getRealCount());
}
@Override
public int getCount() {
// warning: scrolling to very high values (1,000,000+) results in
// strange drawing behaviour
if (getRealCount() == 0) return 0;
if (getRealCount() == 1) return 1;
return Integer.MAX_VALUE;
}
/**
* @return the {@link #getCount()} result of the wrapped adapter
*/
public int getRealCount() {
return adapter.getCount();
}
public BaseSliderView getSliderView(int position) {
return adapter.getSliderView(position % getRealCount());
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
if (getRealCount() == 0) {
return null;
}
int virtualPosition = position % getRealCount();
debug("instantiateItem: real position: " + position);
debug("instantiateItem: virtual position: " + virtualPosition);
// only expose virtual position to the inner adapter
return adapter.instantiateItem(container, virtualPosition);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
if (getRealCount() == 0) {
return;
}
int virtualPosition = position % getRealCount();
debug("destroyItem: real position: " + position);
debug("destroyItem: virtual position: " + virtualPosition);
// only expose virtual position to the inner adapter
adapter.destroyItem(container, virtualPosition, object);
}
/*
* Delegate rest of methods directly to the inner adapter.
*/
@Override
public void finishUpdate(ViewGroup container) {
adapter.finishUpdate(container);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return adapter.isViewFromObject(view, object);
}
@Override
public void restoreState(Parcelable bundle, ClassLoader classLoader) {
adapter.restoreState(bundle, classLoader);
}
@Override
public Parcelable saveState() {
return adapter.saveState();
}
@Override
public void startUpdate(ViewGroup container) {
adapter.startUpdate(container);
}
/*
* End delegation
*/
private void debug(String message) {
if (DEBUG) {
Log.d(TAG, message);
}
}
}
可以看到在代码中还存在着 BaseSliderAdapter 另一个 PagerAdapter ，这是一个正常的PagerAdapter，它既是数据的真正载体同时也起着维护viewpager真正个数的作用。
但用这个方法实现的无限轮播存在着一个很大的缺陷，在 page 页少于3个的情况下会出现问题，这是由于ViewPager本身的机制导致的。
简单来说，ViewPager在显示的时候会同时存在3个page页，当前显示页，当前显示的前一页，当前显示的后一页。当我们轮播到下一页时，原来的前一页会被回收，原来的当前页变成前一页，原来的后一页变成当前页，同时会加载出新的一页作为后一页。
而在无限轮播小于等于3页时，由于前一页可能没有被回收就被当做新的一页加载到后一页中，这就导致了view重复被ViewGroup添加，而在Android中View只能被允许拥有一个ParentView,这里就出现了问题。
所以在page页少于等于3页的时候还是要使用基础的 PagerAdapter。
关于指示器
指示器可以通过继承 ViewPager.OnPageChangeListener与ViewPager保持联动，其监听器包括以下方法：
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 滑动时的参数变化
}
@Override
public void onPageSelected(int position) {
// 滑动到第几页
}
@Override
public void onPageScrollStateChanged(int state) {
// 滑动时的状态变化
}
剩下的就是看你怎么定义指示器的界面，附上指示器演示图和一个自定义的指示器代码
public class CirclePageIndicator extends View implements PageIndicator {
private static final int INVALID_POINTER = -1;
private float mRadius;
private final Paint mPaintPageFill = new Paint(ANTI_ALIAS_FLAG);
private final Paint mPaintStroke = new Paint(ANTI_ALIAS_FLAG);
private final Paint mPaintFill = new Paint(ANTI_ALIAS_FLAG);
private ViewPager mViewPager;
private ViewPager.OnPageChangeListener mListener;
private int mCurrentPage;
private int mSnapPage;
private float mPageOffset;
private int mScrollState;
private int mOrientation;
private boolean mCentered;
private boolean mSnap;
private int mTouchSlop;
private float mLastMotionX = -1;
private int mActivePointerId = INVALID_POINTER;
private boolean mIsDragging;
public CirclePageIndicator(Context context) {
this(context, null);
}
public CirclePageIndicator(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.vpiCirclePageIndicatorStyle);
}
public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
if (isInEditMode()) return;
//Load defaults from resources
final Resources res = getResources();
final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);
final int defaultFillColor = res.getColor(R.color.default_circle_indicator_fill_color);
final int defaultOrientation = res.getInteger(R.integer.default_circle_indicator_orientation);
final int defaultStrokeColor = res.getColor(R.color.default_circle_indicator_stroke_color);
final float defaultStrokeWidth = res.getDimension(R.dimen.default_circle_indicator_stroke_width);
final float defaultRadius = res.getDimension(R.dimen.default_circle_indicator_radius);
final boolean defaultCentered = res.getBoolean(R.bool.default_circle_indicator_centered);
final boolean defaultSnap = res.getBoolean(R.bool.default_circle_indicator_snap);
//Retrieve styles attributes
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CirclePageIndicator, defStyle, 0);
mCentered = a.getBoolean(R.styleable.CirclePageIndicator_centered, defaultCentered);
mOrientation = a.getInt(R.styleable.CirclePageIndicator_android_orientation, defaultOrientation);
mPaintPageFill.setStyle(Style.FILL);
mPaintPageFill.setColor(a.getColor(R.styleable.CirclePageIndicator_pageColor, defaultPageColor));
mPaintStroke.setStyle(Style.STROKE);
mPaintStroke.setColor(a.getColor(R.styleable.CirclePageIndicator_strokeColor, defaultStrokeColor));
mPaintStroke.setStrokeWidth(a.getDimension(R.styleable.CirclePageIndicator_strokeWidth, defaultStrokeWidth));
mPaintFill.setStyle(Style.FILL);
mPaintFill.setColor(a.getColor(R.styleable.CirclePageIndicator_fillColor, defaultFillColor));
mRadius = a.getDimension(R.styleable.CirclePageIndicator_radius, defaultRadius);
mSnap = a.getBoolean(R.styleable.CirclePageIndicator_snap, defaultSnap);
Drawable background = a.getDrawable(R.styleable.CirclePageIndicator_android_background);
if (background != null) {
setBackgroundDrawable(background);
}
a.recycle();
final ViewConfiguration configuration = ViewConfiguration.get(context);
mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
}
public void setCentered(boolean centered) {
mCentered = centered;
invalidate();
}
public boolean isCentered() {
return mCentered;
}
public void setPageColor(int pageColor) {
mPaintPageFill.setColor(pageColor);
invalidate();
}
public int getPageColor() {
return mPaintPageFill.getColor();
}
public void setFillColor(int fillColor) {
mPaintFill.setColor(fillColor);
invalidate();
}
public int getFillColor() {
return mPaintFill.getColor();
}
public void setOrientation(int orientation) {
switch (orientation) {
case HORIZONTAL:
case VERTICAL:
mOrientation = orientation;
requestLayout();
break;
default:
throw new IllegalArgumentException("Orientation must be either HORIZONTAL or VERTICAL.");
}
}
public int getOrientation() {
return mOrientation;
}
public void setStrokeColor(int strokeColor) {
mPaintStroke.setColor(strokeColor);
invalidate();
}
public int getStrokeColor() {
return mPaintStroke.getColor();
}
public void setStrokeWidth(float strokeWidth) {
mPaintStroke.setStrokeWidth(strokeWidth);
invalidate();
}
public float getStrokeWidth() {
return mPaintStroke.getStrokeWidth();
}
public void setRadius(float radius) {
mRadius = radius;
invalidate();
}
public float getRadius() {
return mRadius;
}
public void setSnap(boolean snap) {
mSnap = snap;
invalidate();
}
public boolean isSnap() {
return mSnap;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mViewPager == null) {
return;
}
int count = mViewPager.getAdapter().getCount();
if (mViewPager.getAdapter() instanceof InfinitePagerAdapter) {
count = ((InfinitePagerAdapter) mViewPager.getAdapter()).getRealCount();
mCurrentPage = mCurrentPage % count;
}
if (count == 0) {
return;
}
if (mCurrentPage >= count) {
setCurrentItem(count - 1);
return;
}
int longSize;
int longPaddingBefore;
int longPaddingAfter;
int shortPaddingBefore;
if (mOrientation == HORIZONTAL) {
longSize = getWidth();
longPaddingBefore = getPaddingLeft();
longPaddingAfter = getPaddingRight();
shortPaddingBefore = getPaddingTop();
} else {
longSize = getHeight();
longPaddingBefore = getPaddingTop();
longPaddingAfter = getPaddingBottom();
shortPaddingBefore = getPaddingLeft();
}
final float threeRadius = mRadius * 3;
final float shortOffset = shortPaddingBefore + mRadius;
float longOffset = longPaddingBefore + mRadius;
if (mCentered) {
longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f) - ((count * threeRadius-mRadius) / 2.0f);
}
float dX;
float dY;
float pageFillRadius = mRadius;
if (mPaintStroke.getStrokeWidth() > 0) {
pageFillRadius -= mPaintStroke.getStrokeWidth() / 2.0f;
}
//Draw stroked circles
for (int iLoop = 0; iLoop < count; iLoop++) {
float drawLong = longOffset + (iLoop * threeRadius);
if (mOrientation == HORIZONTAL) {
dX = drawLong;
dY = shortOffset;
} else {
dX = shortOffset;
dY = drawLong;
}
// Only paint fill if not completely transparent
if (mPaintPageFill.getAlpha() > 0) {
canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);
}
// Only paint stroke if a stroke width was non-zero
if (pageFillRadius != mRadius) {
canvas.drawCircle(dX, dY, mRadius, mPaintStroke);
}
}
//Draw the filled circle according to the current scroll
float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;
if (!mSnap && mCurrentPage < count - 1) {
cx += mPageOffset * threeRadius;
}
if (mOrientation == HORIZONTAL) {
dX = longOffset + cx;
dY = shortOffset;
} else {
dX = shortOffset;
dY = longOffset + cx;
}
canvas.drawCircle(dX, dY, mRadius, mPaintFill);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (super.onTouchEvent(ev)) {
return true;
}
if ((mViewPager == null) || (mViewPager.getAdapter().getCount() == 0)) {
return false;
}
final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;
switch (action) {
case MotionEvent.ACTION_DOWN:
mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
mLastMotionX = ev.getX();
break;
case MotionEvent.ACTION_MOVE: {
final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
final float x = MotionEventCompat.getX(ev, activePointerIndex);
final float deltaX = x - mLastMotionX;
if (!mIsDragging) {
if (Math.abs(deltaX) > mTouchSlop) {
mIsDragging = true;
}
}
if (mIsDragging) {
mLastMotionX = x;
if (mViewPager.isFakeDragging() || mViewPager.beginFakeDrag()) {
mViewPager.fakeDragBy(deltaX);
}
}
break;
}
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
if (!mIsDragging) {
int count = mViewPager.getAdapter().getCount();
if (mViewPager.getAdapter() instanceof InfinitePagerAdapter) {
count = ((InfinitePagerAdapter) mViewPager.getAdapter()).getRealCount();
}
final int width = getWidth();
final float halfWidth = width / 2f;
final float sixthWidth = width / 6f;
if ((mCurrentPage > 0) && (ev.getX() < halfWidth - sixthWidth)) {
if (action != MotionEvent.ACTION_CANCEL) {
mViewPager.setCurrentItem(mCurrentPage - 1);
}
return true;
} else if ((mCurrentPage < count - 1) && (ev.getX() > halfWidth + sixthWidth)) {
if (action != MotionEvent.ACTION_CANCEL) {
mViewPager.setCurrentItem(mCurrentPage + 1);
}
return true;
}
}
mIsDragging = false;
mActivePointerId = INVALID_POINTER;
if (mViewPager.isFakeDragging()) mViewPager.endFakeDrag();
break;
case MotionEventCompat.ACTION_POINTER_DOWN: {
final int index = MotionEventCompat.getActionIndex(ev);
mLastMotionX = MotionEventCompat.getX(ev, index);
mActivePointerId = MotionEventCompat.getPointerId(ev, index);
break;
}
case MotionEventCompat.ACTION_POINTER_UP:
final int pointerIndex = MotionEventCompat.getActionIndex(ev);
final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
if (pointerId == mActivePointerId) {
final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
}
mLastMotionX = MotionEventCompat.getX(ev, MotionEventCompat.findPointerIndex(ev, mActivePointerId));
break;
}
return true;
}
@Override
public void setViewPager(ViewPager view) {
if (mViewPager == view) {
return;
}
if (view.getAdapter() == null) {
throw new IllegalStateException("ViewPager does not have adapter instance.");
}
mViewPager = view;
mViewPager.addOnPageChangeListener(this);
invalidate();
}
@Override
public void setViewPager(ViewPager view, int initialPosition) {
setViewPager(view);
setCurrentItem(initialPosition);
}
@Override
public void setCurrentItem(int item) {
if (mViewPager == null) {
throw new IllegalStateException("ViewPager has not been bound.");
}
mViewPager.setCurrentItem(item);
mCurrentPage = item;
invalidate();
}
@Override
public void notifyDataSetChanged() {
invalidate();
}
@Override
public void onPageScrollStateChanged(int state) {
mScrollState = state;
if (mListener != null) {
mListener.onPageScrollStateChanged(state);
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (mViewPager.getAdapter() instanceof InfinitePagerAdapter) {
position = position % ((InfinitePagerAdapter) mViewPager.getAdapter()).getRealCount();
}
mCurrentPage = position;
mPageOffset = positionOffset;
invalidate();
if (mListener != null) {
mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
}
@Override
public void onPageSelected(int position) {
if (mViewPager.getAdapter() instanceof InfinitePagerAdapter) {
position = position % ((InfinitePagerAdapter) mViewPager.getAdapter()).getRealCount();
}
if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
mCurrentPage = position;
mSnapPage = position;
invalidate();
}
if (mListener != null) {
mListener.onPageSelected(position);
}
}
@Override
public void addOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
mListener = listener;
}
/*
* (non-Javadoc)
*
* @see android.view.View#onMeasure(int, int)
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (mOrientation == HORIZONTAL) {
setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));
} else {
setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));
}
}
/**
* Determines the width of this view
*
* @param measureSpec A measureSpec packed into an int
* @return The width of the view, honoring constraints from measureSpec
*/
private int measureLong(int measureSpec) {
int result;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {
//We were told how big to be
result = specSize;
} else {
//Calculate the width according the views count
int count = mViewPager.getAdapter().getCount();
if (mViewPager.getAdapter() instanceof InfinitePagerAdapter) {
count = ((InfinitePagerAdapter) mViewPager.getAdapter()).getRealCount();
}
result = (int) (getPaddingLeft() + getPaddingRight()
+ (count * 2 * mRadius) + (count - 1) * mRadius + 1);
//Respect AT_MOST value if that was what is called for by measureSpec
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
/**
* Determines the height of this view
*
* @param measureSpec A measureSpec packed into an int
* @return The height of the view, honoring constraints from measureSpec
*/
private int measureShort(int measureSpec) {
int result;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
//We were told how big to be
result = specSize;
} else {
//Measure the height
result = (int) (2 * mRadius + getPaddingTop() + getPaddingBottom() + 1);
//Respect AT_MOST value if that was what is called for by measureSpec
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
@Override
public void onRestoreInstanceState(Parcelable state) {
SavedState savedState = (SavedState) state;
super.onRestoreInstanceState(savedState.getSuperState());
mCurrentPage = savedState.currentPage;
mSnapPage = savedState.currentPage;
requestLayout();
}
@Override
public Parcelable onSaveInstanceState() {
Parcelable superState = super.onSaveInstanceState();
SavedState savedState = new SavedState(superState);
savedState.currentPage = mCurrentPage;
return savedState;
}
static class SavedState extends BaseSavedState {
int currentPage;
public SavedState(Parcelable superState) {
super(superState);
}
private SavedState(Parcel in) {
super(in);
currentPage = in.readInt();
}
@Override
public void writeToParcel(Parcel dest, int flags) {
super.writeToParcel(dest, flags);
dest.writeInt(currentPage);
}
@SuppressWarnings("UnusedDeclaration")
public static final Creator<SavedState> CREATOR = new Creator<SavedState>() {
@Override
public SavedState createFromParcel(Parcel in) {
return new SavedState(in);
}
@Override
public SavedState[] newArray(int size) {
return new SavedState[size];
}
};
}
}
关于转场动画
ViewPager有个方法叫做setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用于设置ViewPager切换时的动画效果
但注意这只能在3.0及其以后使用。因为View的动画使用的是属性动画，而属性动画是3.0才推出。当然这个问题可以克服，首先先使用nineoldandroids让动画在3.0之前也能跑起来，然后再去修改ViewPager的源码
public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
if (Build.VERSION.SDK_INT >= 11) {
final boolean hasTransformer = transformer != null;
final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
mPageTransformer = transformer;
setChildrenDrawingOrderEnabledCompat(hasTransformer);
if (hasTransformer) {
mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
} else {
mDrawingOrder = DRAW_ORDER_DEFAULT;
}
if (needsPopulate) populate();
}
}
去除if (Build.VERSION.SDK_INT >= 11)这个if判断就行了。
所有的PageTransformer都要继承ViewPager.PageTransformer接口，其中包含的方法只有一个
@Override
public void transformPage(View view, float position) {
}
其中position反映的是view的位置变化。
假设现在ViewPager在A页现在滑出B页，则:
A页的position变化就是( 0, -1]
B页的position变化就是[ 1 , 0 ]
根据这个position就可以做出多样的转场变化了。
关于pager动画
同样要利用 ViewPager.OnPageChangeListener 监听ViewPager的变化以实现每个界面的变化。
Animation接口
public interface OnAnimationListener {
void onNextAnimationStart(BaseSliderView slider);
void onNextAnimationEnd(BaseSliderView slider);
void onPreAnimationStart(BaseSliderView slider);
void onPreAnimationEnd(BaseSliderView slider);
}
监听变化
/**
* A {@link ViewPager} that allows define custom animation
*/
public class AnimationViewPager extends ViewPager {
private int position = 0, prePositon = 0;
private OnAnimationListener animationListener;
private BaseSliderView slider, preSlider;
private boolean animating = false;
public AnimationViewPager(Context context) {
super(context);
initViewPager();
}
public AnimationViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
initViewPager();
}
private void initViewPager() {
addOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position == 0 && positionOffset == 0) {
animateSliderEnd(position);
if (slider != null)
animationListener.onNextAnimationEnd(slider);
}
}
@Override
public void onPageSelected(int position) {
prePositon = AnimationViewPager.this.position;
AnimationViewPager.this.position = position;
if (prePositon > position)
animateSliderStart(position, position + 1);
if (prePositon < position)
animateSliderStart(position, position - 1);
}
@Override
public void onPageScrollStateChanged(int state) {
if (state == SCROLL_STATE_IDLE) {
animateSliderEnd(position);
}
}
});
}
private void animateSliderStart(int position, int prePositon) {
if (animationListener == null) return;
BaseSliderView slider = null, preSlider = null;
if (getAdapter() instanceof InfinitePagerAdapter) {
InfinitePagerAdapter pagerAdapter = (InfinitePagerAdapter) getAdapter();
slider = pagerAdapter.getSliderView(position);
preSlider = pagerAdapter.getSliderView(prePositon);
} else if (getAdapter() instanceof BaseSliderAdapter) {
BaseSliderAdapter sliderAdapter = (BaseSliderAdapter) getAdapter();
slider = sliderAdapter.getSliderView(position);
preSlider = sliderAdapter.getSliderView(prePositon);
}
if (slider != null)
animationListener.onNextAnimationStart(slider);
if (preSlider != null)
animationListener.onPreAnimationStart(preSlider);
}
private void animateSliderEnd(int position) {
if (animationListener == null) return;
if (getAdapter() instanceof InfinitePagerAdapter) {
InfinitePagerAdapter pagerAdapter = (InfinitePagerAdapter) getAdapter();
if (slider == null) slider = pagerAdapter.getSliderView(position);
else if (slider != pagerAdapter.getSliderView(position)) {
preSlider = slider;
slider = pagerAdapter.getSliderView(position);
}
} else if (getAdapter() instanceof BaseSliderAdapter) {
BaseSliderAdapter sliderAdapter = (BaseSliderAdapter) getAdapter();
if (slider == null) slider = sliderAdapter.getSliderView(position);
else if (slider != sliderAdapter.getSliderView(position)) {
preSlider = slider;
slider = sliderAdapter.getSliderView(position);
}
}
if (slider != null)
animationListener.onNextAnimationEnd(slider);
if (preSlider != null)
animationListener.onPreAnimationEnd(preSlider);
animating = false;
}
public OnAnimationListener getAnimationListener() {
return animationListener;
}
public void setAnimationListener(OnAnimationListener animationListener) {
this.animationListener = animationListener;
}
}
继承OnAnimationListener接口实现后的例子
public class DefaultDescriptionAnimation implements OnAnimationListener {
private final long DURATION = 300;
@Override
public void onNextAnimationStart(BaseSliderView slider) {
Log.d("simpleSlider", "onNextAnimationStart:" + slider.getPageTitle());
}
@Override
public void onNextAnimationEnd(BaseSliderView slider) {
Log.d("simpleSlider", "onNextAnimationEnd:" + slider.getPageTitle());
DescriptionSliderView sliderView = (DescriptionSliderView) slider;
if (sliderView.getTitleLayout().getVisibility() != View.VISIBLE)
translateShowAnimate(sliderView.getTitleLayout());
}
@Override
public void onPreAnimationStart(BaseSliderView slider) {
Log.d("simpleSlider", "onPreAnimationStart:" + slider.getPageTitle());
}
@Override
public void onPreAnimationEnd(BaseSliderView slider) {
Log.d("simpleSlider", "onPreAnimationEnd:" + slider.getPageTitle());
DescriptionSliderView sliderView = (DescriptionSliderView) slider;
alphaHideAnimate(sliderView.getTitleLayout());
}
public void alphaHideAnimate(View v) {
v.clearAnimation();
v.setVisibility(View.INVISIBLE);
AlphaAnimation aa = new AlphaAnimation(1, 0);
aa.setDuration(DURATION);
v.startAnimation(aa);
}
public void translateShowAnimate(View v) {
v.setVisibility(View.VISIBLE);
v.clearAnimation();
TranslateAnimation ta = new TranslateAnimation(0, 0, v.getHeight(), 0);
ta.setDuration(DURATION);
v.startAnimation(ta);
}
}
结束语
今天的ViewPager的介绍就到这了，若大家有问题或者想要在Android上交流可以大胆的联系我！
