自定义IconPageIndicator

之前在开发一个米国的项目时，要做一个很炫的引导动画，效果类似于下图，但是比下图复杂多了。

刚开始想用TabHost+ViewPager的组合来实现，但是仔细看了底部那个圆圈在滑动过程中要来回变色，

这种方法比较麻烦，即使用这种方法实现了也比较挫，所以放弃这种方法。然后再想想，其实这个跟

PageIndicator的效果很相似，于是找来Jake Wharton的ViewPagerIndicator来看看效果，虽然那个库有

IconPageIndicator，但是看了它的实现，发现跟图中的效果相差太多，而且它是用了HorizontalScrollView

来实现的，基于它来实现图中效果也比较麻烦，倒是觉得CirclePageIndicator的效果有点类似，只不过

CirclePageIndicator画的是圆点，而我现在要的是icon（图片）。于是乎就基于CirclePageIndicator

进行改造，改造完的代码就变成如下这样：

import static android.graphics.Paint.ANTI_ALIAS_FLAG;
import static android.widget.LinearLayout.HORIZONTAL;
import static android.widget.LinearLayout.VERTICAL;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapFactory.Options;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewConfigurationCompat;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;

public class IconPageIndicator 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 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 mSnap;

    private int mTouchSlop;
    private float mLastMotionX = -1;
    private int mActivePointerId = INVALID_POINTER;
    private boolean mIsDragging;
    private int[] mFillColors;
    private float previousOffset;
	private static final float CENTER_POSITION_OFFSET = 0.5f;
	private float mIconWidth;
	private int[] mNormalIcons;
	private Bitmap[] mNormalIconBitmaps;
	private int[] mSelectedIcons;
	private Bitmap[] mSelectedIconBitmaps;

    public IconPageIndicator(Context context) {
        this(context, null);
    }

    public IconPageIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.vpiIconPageIndicatorStyle);
    }

    @SuppressLint("NewApi")
	@SuppressWarnings("deprecation")
	public IconPageIndicator(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 float defaultRadius = res.getDimension(R.dimen.default_circle_indicator_radius);
        final boolean defaultSnap = res.getBoolean(R.bool.default_circle_indicator_snap);
        final float defaultIconWidth = res.getDimension(R.dimen.default_circle_indicator_icon_width);

        //Retrieve styles attributes
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.IconPageIndicator, defStyle, 0);

        mOrientation = a.getInt(R.styleable.IconPageIndicator_android_orientation, defaultOrientation);
        mPaintPageFill.setStyle(Style.FILL);
        mPaintPageFill.setColor(a.getColor(R.styleable.IconPageIndicator_pageColor, defaultPageColor));
        mPaintFill.setStyle(Style.FILL);
        mPaintFill.setColor(a.getColor(R.styleable.IconPageIndicator_fillColor, defaultFillColor));
        mRadius = a.getDimension(R.styleable.IconPageIndicator_radius, defaultRadius);
        mSnap = a.getBoolean(R.styleable.IconPageIndicator_snap, defaultSnap);
        mIconWidth = a.getDimension(R.styleable.IconPageIndicator_iconWidth, defaultIconWidth);
        
        Drawable background = a.getDrawable(R.styleable.IconPageIndicator_android_background);
        if (background != null) {
        	if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
                setBackground(background);
        	}else{
                setBackgroundDrawable(background);
        	}
        }

        a.recycle();

        final ViewConfiguration configuration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
    }

    public void setPageColor(int pageColor) {
        mPaintPageFill.setColor(pageColor);
        invalidate();
    }

    public int getPageColor() {
        return mPaintPageFill.getColor();
    }
    
    public void setFillColors(int[] fillColors){
    	mFillColors = fillColors;
    	setFillColor(fillColors[0]);
    }
    
    public int[] getFillColors(){
    	return mFillColors;
    }

    public void setFillColor(int fillColor) {
        mPaintFill.setColor(fillColor);
        invalidate();
    }

    public int getFillColor() {
        return mPaintFill.getColor();
    }
    
    public int[] getNormalIcons(){
    	return mNormalIcons;
    }

    public void setNormalIcons(int[] icons){
    	clearIconBitmaps(mNormalIconBitmaps);
    	mNormalIcons = icons;
    	mNormalIconBitmaps = fillIconBitmaps(icons);
    	invalidate();
    }
    
    public int[] getSelectedIcons(){
    	return mSelectedIcons;
    }
    
    public void setSelectedIcons(int[] icons){
    	clearIconBitmaps(mSelectedIconBitmaps);
    	mSelectedIcons = icons;
    	mSelectedIconBitmaps = fillIconBitmaps(icons);
    	invalidate();
    }
    
    private void clearIconBitmaps(Bitmap[] bitmaps){
    	if(bitmaps != null && bitmaps.length > 0){
    		for(int i = 0; i < bitmaps.length; i++){
    			Bitmap bp = bitmaps[i];
    			recycleBitmap(bp);
    			bitmaps[i] = null;
    		}
    		bitmaps = null;
    	}
    }
    
    private void recycleBitmap(Bitmap bp){
    	if(bp != null && !bp.isRecycled()){
			bp.recycle();
		}
    }
    
    private Bitmap[] fillIconBitmaps(int[] icons){
    	Bitmap[] bitmaps = null;
    	if(icons != null && icons.length > 0){
    		bitmaps = new Bitmap[icons.length];
    		for(int i = 0; i < icons.length; i++){
    			bitmaps[i] = decodeBitmap(icons[i]);
    		}
    	}
    	return bitmaps;
    }
    
    private Bitmap decodeBitmap(int resId){
    	Options options = new Options();
		options.inJustDecodeBounds = true;
		BitmapFactory.decodeResource(getResources(), resId, options);
		int size = (int)mIconWidth;
		int sampleSize = calculateInSampleSize(options, size, size);
		options.inJustDecodeBounds = false;
		options.inSampleSize = sampleSize;
		return BitmapFactory.decodeResource(getResources(), resId, options);
    }
    
    private int calculateInSampleSize(Options options, int reqWidth, int reqHeight) {
        final int height = options.outHeight;
        final int width = options.outWidth;
        int inSampleSize = 1;

        if (height > reqHeight || width > reqWidth) {

            final int halfHeight = height / 2;
            final int halfWidth = width / 2;

            while ((halfHeight / inSampleSize) > reqHeight
                    && (halfWidth / inSampleSize) > reqWidth) {
                inSampleSize *= 2;
            }
            long totalPixels = width * height / inSampleSize;
            final long totalReqPixelsCap = reqWidth * reqHeight * 2;

            while (totalPixels > totalReqPixelsCap) {
                inSampleSize *= 2;
                totalPixels /= 2;
            }
        }
        return inSampleSize;
    }
    
    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 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;
        }
        final int count = mViewPager.getAdapter().getCount();
        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 int length = mNormalIconBitmaps.length;
        final float space = (longSize - length * mIconWidth - longPaddingBefore - longPaddingAfter) / (length - 1);
        final float distance = space + mIconWidth;

        float dX;
        float dY;

        int currentPage = mCurrentPage;
        if(currentPage < 0){
        	currentPage = 0;
        }
        int diffX = (int)((mIconWidth - mNormalIconBitmaps[0].getWidth()) / 2);
        int diffY = (int)((mIconWidth - mNormalIconBitmaps[0].getHeight()) / 2);
        //Draw icons
        for (int iLoop = 0; iLoop < length; iLoop++) {
            float drawLong = longPaddingBefore + diffX + (iLoop * distance);
            if (mOrientation == HORIZONTAL) {
                dX = drawLong;
                dY = shortPaddingBefore + diffY;
            } else {
                dX = shortPaddingBefore + diffX;
                dY = drawLong;
            }
            if(currentPage == iLoop){
                canvas.drawBitmap(mSelectedIconBitmaps[iLoop], dX, dY, mPaintPageFill);
            }else{
                canvas.drawBitmap(mNormalIconBitmaps[iLoop], dX, dY, mPaintPageFill);
            }
        }

        //Draw the filled circle according to the current scroll
        float cx = (mSnap ? mSnapPage : currentPage) * distance;
        if (!mSnap) {
            cx += mPageOffset * distance;
        }
        if (mOrientation == HORIZONTAL) {
        	dX = longPaddingBefore + cx + mIconWidth / 2;
            dY = shortPaddingBefore + mIconWidth / 2;
        } else {
            dX = shortPaddingBefore + mIconWidth / 2;
            dY = longPaddingBefore + cx + mIconWidth / 2;
        }
        mPaintFill.setAlpha(100);
        canvas.drawCircle(dX, dY, mRadius, mPaintFill);
    }

    public boolean onTouchEvent(android.view.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) {
                    final int count = mViewPager.getAdapter().getCount();
                    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 (mViewPager != null) {
            mViewPager.setOnPageChangeListener(null);
        }
        if (view.getAdapter() == null) {
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        }
        mViewPager = view;
        mViewPager.setOnPageChangeListener(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(positionOffset > CENTER_POSITION_OFFSET){
			int index = 0;
			if(positionOffset > previousOffset){
				index = position+1;
				if(index >= mFillColors.length){
					index = mFillColors.length-1;
				}
				setFillColor(mFillColors[index]);
			}
		}else{
			if(positionOffset < previousOffset){
				setFillColor(mFillColors[position]);
			}
		}
		previousOffset = positionOffset;
    	
    	mCurrentPage = position;
        mPageOffset = positionOffset;
        invalidate();

        if (mListener != null) {
            mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mCurrentPage = position;
            mSnapPage = position;
            invalidate();
        }

        if (mListener != null) {
            mListener.onPageSelected(position);
        }
    }

    @Override
    public void setOnPageChangeListener(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
            final int count = mViewPager.getAdapter().getCount();
            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 Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
            @Override
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            @Override
            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };
    }
}

首先，IconPageIndicator依然是实现PageIndicator的接口，只不过是增加了一些属性和接口，以及变换了

要draw的内容。新增的属性是mIconWidth，这就是每个icon的size,长和宽。既然是icon的PageIndicator，

那么总得有个地方设置这些icon啊，于是，就有了设置icon的接口public void setNormalIcons(int[] icons)

这个接口只是设置一般的icon，在移动开发中，很多APP不只有普通的icon，还有一些高亮的icon，所以

还得有个地方设置这个，public void setSelectedIcons(int[] icons)这个接口就是用来设置选中的icon的，

由于画布Canvas没有提供直接画res资源的接口，但是它提供了draw Bitmap的接口，所以必须得把这些

res的资源转化为Bitmap，这个过程可以在方法private Bitmap[] fillIconBitmaps(int[] icons)中看到。

另外由于底部的圆圈的颜色是跟着page的颜色变化的，所以还得有个设置颜色的接口，这个接口在

public void setFillColors(int[] fillColors)这里。好了，资源有了，那么下面就开始画画了，怎么画都在onDraw

那里看到了。

首先是判断ViewPager的合法性，这个不是重点，也不是我们要讨论的东西。接着是获取宽度，paddingLeft和

paddingRight这些东西了，然后是计算两个icon之间的空间和中心点之间的距离，这些都是必须，不然的话，

画出来的icon就不整齐了。然后算清楚起始的x和y坐标，由于颜色是之前设置好的，所以这里就不需要再设置了，

接着就开始画icon了，下面就是画icon的代码：

for (int iLoop = 0; iLoop < length; iLoop++) {
            float drawLong = longPaddingBefore + diffX + (iLoop * distance);
            if (mOrientation == HORIZONTAL) {
                dX = drawLong;
                dY = shortPaddingBefore + diffY;
            } else {
                dX = shortPaddingBefore + diffX;
                dY = drawLong;
            }
            if(currentPage == iLoop){
                canvas.drawBitmap(mSelectedIconBitmaps[iLoop], dX, dY, mPaintPageFill);
            }else{
                canvas.drawBitmap(mNormalIconBitmaps[iLoop], dX, dY, mPaintPageFill);
            }
        }

再接着就是画圆圈啦，圆圈的滑动有两种方式，图中那种是很优雅的滑动，另外一种是很“粗暴”的滑动，突然间

就跳过去了。这两种的区别只在三行代码之间：

if (!mSnap) {
    cx += mPageOffset * distance;
}

另外可以看到图中的圆圈是有些透明的，在这里设置mPaintFill.setAlpha(100)，我直接设置alpha为100，这个值的

范围是在0到255的。设置好这个，就开始画圆圈了canvas.drawCircle(dX, dY, mRadius, mPaintFill)。

就这样，一个自定义的icon PageIndicator就搞好了，是不是很简单呢？在这个过程中，关键是要计算好x，y坐标，

各个icon之间的间距以及设置好icon。另外这个东西还可以扩展出很多功能，这是后话，这里就不啰嗦了，

有兴趣的可以自己尝试一下。

源码和Demo可以在本人的GitHub代码库中获取，有兴趣扩展新功能的可以提交代码到该代码库：IconPageIndicator。