Android 具有动画的 Viewpager滑动CircleIndicator指示器

1.自定义属性：attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="CircleIndicator">
<attr name="ci_radius" format="dimension" />
<attr name="ci_margin" format="dimension" />
<attr name="ci_background" format="color|integer" />
<attr name="ci_selected_background" format="color|integer" />
<attr name="ci_gravity">
<enum name="left" value="0" />
<enum name="center" value="1" />
<enum name="right" value="2" />
</attr>
<attr name="ci_mode">
<enum name="inside" value="0" />
<enum name="outside" value="1" />
<enum name="solo" value="2" />
</attr>
</declare-styleable>

</resources>

2.自定义控件

import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class CircleIndicator extends View {


private ViewPager viewPager;
private List<ShapeHolder> tabItems;
private ShapeHolder movingItem;

//config list
private int mCurItemPosition;
private float mCurItemPositionOffset;
private float mIndicatorRadius;
private float mIndicatorMargin;
private int mIndicatorBackground;
private int mIndicatorSelectedBackground;
private Gravity mIndicatorLayoutGravity;
private Mode mIndicatorMode;

//default value
private final int DEFAULT_INDICATOR_RADIUS = 10;
private final int DEFAULT_INDICATOR_MARGIN = 40;
private final int DEFAULT_INDICATOR_BACKGROUND = Color.BLUE;
private final int DEFAULT_INDICATOR_SELECTED_BACKGROUND = Color.RED;
private final int DEFAULT_INDICATOR_LAYOUT_GRAVITY = Gravity.CENTER.ordinal();
private final int DEFAULT_INDICATOR_MODE = Mode.SOLO.ordinal();
public enum Gravity{
            LEFT,
            CENTER,
            RIGHT
        }
public enum Mode{
            INSIDE,
            OUTSIDE,
            SOLO
        }
public CircleIndicator(Context context) {
super(context);
            init(context, null);
        }

public CircleIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
            init(context, attrs);
        }

public CircleIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
            init(context, attrs);
        }
private void init(Context context,AttributeSet attrs){
            tabItems = new ArrayList<>();
            handleTypedArray(context, attrs);
        }

private void handleTypedArray(Context context, AttributeSet attrs) {
if(attrs == null)
return;
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleIndicator);
            mIndicatorRadius = typedArray.getDimensionPixelSize(R.styleable.CircleIndicator_ci_radius, DEFAULT_INDICATOR_RADIUS);
            mIndicatorMargin = typedArray.getDimensionPixelSize(R.styleable.CircleIndicator_ci_margin, DEFAULT_INDICATOR_MARGIN);
            mIndicatorBackground = typedArray.getColor(R.styleable.CircleIndicator_ci_background, DEFAULT_INDICATOR_BACKGROUND);
            mIndicatorSelectedBackground = typedArray.getColor(R.styleable.CircleIndicator_ci_selected_background,DEFAULT_INDICATOR_SELECTED_BACKGROUND);
int gravity = typedArray.getInt(R.styleable.CircleIndicator_ci_gravity,DEFAULT_INDICATOR_LAYOUT_GRAVITY);
            mIndicatorLayoutGravity = Gravity.values()[gravity];
int mode = typedArray.getInt(R.styleable.CircleIndicator_ci_mode,DEFAULT_INDICATOR_MODE);
            mIndicatorMode = Mode.values()[mode];
            typedArray.recycle();
        }

public void setViewPager(final ViewPager viewPager){
this.viewPager = viewPager;
            createTabItems();
            createMovingItem();
            setUpListener();
        }
private void setUpListener() {
            viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels);
if(mIndicatorMode != Mode.SOLO){
                        trigger(position,positionOffset);
                    }
                }

@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
if(mIndicatorMode == Mode.SOLO){
                        trigger(position,0);
                    }
                }
            });


        }

/**
 * trigger to redraw the indicator when the ViewPager's selected item changed!
 * @param position
 * @param positionOffset
 */
private void trigger(int position,float positionOffset){
            CircleIndicator.this.mCurItemPosition = position;
            CircleIndicator.this.mCurItemPositionOffset = positionOffset;
            Log.e("CircleIndicator", "onPageScrolled()" + position + ":" + positionOffset);
            requestLayout();
            invalidate();
        }
private void createTabItems() {
for (int i = 0; i < viewPager.getAdapter().getCount(); i++) {
                OvalShape circle = new OvalShape();
                ShapeDrawable drawable = new ShapeDrawable(circle);
                ShapeHolder shapeHolder = new ShapeHolder(drawable);
                Paint paint = drawable.getPaint();
                paint.setColor(mIndicatorBackground);
                paint.setAntiAlias(true);
                shapeHolder.setPaint(paint);
                tabItems.add(shapeHolder);
            }
        }

private void createMovingItem() {
            OvalShape circle = new OvalShape();
            ShapeDrawable drawable = new ShapeDrawable(circle);
            movingItem = new ShapeHolder(drawable);
            Paint paint = drawable.getPaint();
            paint.setColor(mIndicatorSelectedBackground);
            paint.setAntiAlias(true);

switch (mIndicatorMode){
case INSIDE:
                    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
break;
case OUTSIDE:
                    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
break;
case SOLO:
                    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
break;
            }

            movingItem.setPaint(paint);
        }

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            Log.e("CircleIndicator","onLayout()");
super.onLayout(changed, left, top, right, bottom);
final int width = getWidth();
final int height = getHeight();
            layoutTabItems(width, height);
            layoutMovingItem(mCurItemPosition, mCurItemPositionOffset);
        }

private void layoutTabItems(final int containerWidth,final int containerHeight){
if(tabItems == null){
throw new IllegalStateException("forget to create tabItems?");
           }
final float yCoordinate = containerHeight*0.5f;
final float startPosition = startDrawPosition(containerWidth);
for(int i=0;i<tabItems.size();i++){
               ShapeHolder item = tabItems.get(i);
               item.resizeShape(2* mIndicatorRadius,2* mIndicatorRadius);
               item.setY(yCoordinate- mIndicatorRadius);
float x = startPosition + (mIndicatorMargin + mIndicatorRadius*2)*i;
               item.setX(x);
           }

        }
private float startDrawPosition(final int containerWidth){
if(mIndicatorLayoutGravity == Gravity.LEFT)
return 0;
float tabItemsLength = tabItems.size()*(2* mIndicatorRadius + mIndicatorMargin)- mIndicatorMargin;
if(containerWidth<tabItemsLength){
return 0;
            }
if(mIndicatorLayoutGravity == Gravity.CENTER){
return (containerWidth-tabItemsLength)/2;
            }
return containerWidth - tabItemsLength;
        }
private void layoutMovingItem(final int position,final float positionOffset){
if(movingItem == null){
throw new IllegalStateException("forget to create movingItem?");
            }

if(tabItems.size() == 0) {
return;
            }
            ShapeHolder item = tabItems.get(position);
            movingItem.resizeShape(item.getWidth(), item.getHeight());
float x = item.getX()+(mIndicatorMargin + mIndicatorRadius*2)*positionOffset;
            movingItem.setX(x);
            movingItem.setY(item.getY());

        }

@Override
protected void onDraw(Canvas canvas) {
            Log.e("CircleIndicator", "onDraw()");
super.onDraw(canvas);
int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null,
                    Canvas.MATRIX_SAVE_FLAG |
                            Canvas.CLIP_SAVE_FLAG |
                            Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                            Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                            Canvas.CLIP_TO_LAYER_SAVE_FLAG);
for(ShapeHolder item : tabItems){
                drawItem(canvas,item);
            }

if(movingItem != null){
                drawItem(canvas,movingItem);
            }
            canvas.restoreToCount(sc);
        }
private void drawItem(Canvas canvas,ShapeHolder shapeHolder )
        {
            canvas.save();
            canvas.translate(shapeHolder.getX(),shapeHolder.getY());
            shapeHolder.getShape().draw(canvas);
            canvas.restore();
        }
public void setIndicatorRadius(float mIndicatorRadius) {
this.mIndicatorRadius = mIndicatorRadius;
        }

public void setIndicatorMargin(float mIndicatorMargin) {
this.mIndicatorMargin = mIndicatorMargin;
        }

public void setIndicatorBackground(int mIndicatorBackground) {
this.mIndicatorBackground = mIndicatorBackground;
        }

public void setIndicatorSelectedBackground(int mIndicatorSelectedBackground) {
this.mIndicatorSelectedBackground = mIndicatorSelectedBackground;
        }

public void setIndicatorLayoutGravity(Gravity mIndicatorLayoutGravity) {
this.mIndicatorLayoutGravity = mIndicatorLayoutGravity;
        }

public void setIndicatorMode(Mode mIndicatorMode) {
this.mIndicatorMode = mIndicatorMode;
        }
}

3.显示圆的动画效果

import android.graphics.Paint;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.Shape;


public class ShapeHolder {
private float x = 0, y = 0;//圆的x、y坐标
private ShapeDrawable shape;
private int color;
private float alpha = 1f;
private Paint paint;

public void setPaint(Paint value) {
        paint = value;
    }

public Paint getPaint() {
return paint;
    }

public void setX(float value) {
        x = value;
    }

public float getX() {
return x;
    }

public void setY(float value) {
        y = value;
    }

public float getY() {
return y;
    }

public void setShape(ShapeDrawable value) {
        shape = value;
    }

public ShapeDrawable getShape() {
return shape;
    }

public int getColor() {
return color;
    }

public void setColor(int value) {
        shape.getPaint().setColor(value);
        color = value;

    }

public void setAlpha(float alpha) {
this.alpha = alpha;
        shape.setAlpha((int) ((alpha * 255f) + .5f));
    }

public float getWidth() {
return shape.getShape().getWidth();
    }

public void setWidth(float width) {
        Shape s = shape.getShape();
        s.resize(width, s.getHeight());
    }

public float getHeight() {
return shape.getShape().getHeight();
    }

public void setHeight(float height) {
        Shape s = shape.getShape();
        s.resize(s.getWidth(), height);
    }
public void resizeShape(final float width,final float height){
        shape.getShape().resize(width,height);
    }
public ShapeHolder(ShapeDrawable s) {
        shape = s;
    }
}

4.main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:CircleIndicator="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" >
    </android.support.v4.view.ViewPager>

    <com.example.circleindicator_master.CircleIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="40dp"
       android:layout_alignParentBottom="true"
        CircleIndicator:ci_background="@android:color/white"
        CircleIndicator:ci_gravity="center"
        CircleIndicator:ci_margin="5dp"
        CircleIndicator:ci_mode="outside"
        CircleIndicator:ci_radius="10dp"
        CircleIndicator:ci_selected_background="0xffe6454a" />

</RelativeLayout>

5.Maintivity

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {
private List<View> viewList;
private ViewPager viewPager;
private CircleIndicator circleIndicator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            initData();
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            viewPager.setAdapter(pagerAdapter);

            circleIndicator = (CircleIndicator) findViewById(R.id.indicator);
            circleIndicator.setViewPager(viewPager);
        }
private void initData(){
            viewList = new ArrayList<View>();
            Random random = new Random();
for(int i=0;i<5;i++){
                View view = new View(this);
                view.setBackgroundColor(0xff000000| random.nextInt(0x00ffffff));
                viewList.add(view);
            }
        }
        PagerAdapter pagerAdapter = new PagerAdapter() {

@Override
public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;
            }

@Override
public int getCount() {

return viewList.size();
            }

@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 "title";
            }

@Override
public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));

return viewList.get(position);
            }

        };
}


//说明：在使用PagerAdapter时候，跟List<Vew>集合完美结合封装起来，这里不做封装了，很简单的。

效果图：

猛戳这里：eclipse点击下载