利用 viewPager ，ShapeDrawable 实现带小圆球的页面滑动

首先声明文章的代码来自于 github 上的开源库，但是因为下载后的时间较长。没有去逐个寻找其出处。文中修改了小许的代码，并为文中的代码加了些个人的理解（注释）。具体的如代码中所示。关于 ShapeDrawable 可以参见上一篇博客：http://blog.csdn.net/antimage08/article/details/50373159。

运行效果如下（其背景颜色是随机生成的）：

定义属性资源 attrs.xml :

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

    <declare-styleable name="CircleDisplay">
        <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>

content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:CircleDisplay="http://schemas.android.com/apk/com.crazy.circle"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.crazy.circle.MainActivity"
    tools:showIn="@layout/activity_main">

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

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

</RelativeLayout>

ShapeHolder.java :

package com.crazy.circledisplay;

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

/**
 *  该类主要用于提供二维图形（包含多个小圆球，提供给 CircleDisplay 类）
 */
public class ShapeHolder {
    private float x = 0, y = 0;
    private ShapeDrawable shape;
    private int color;
    private float alpha = 1f;
    private Paint paint;

    public ShapeHolder(ShapeDrawable s) {
        shape = s;
    }

    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);
    }

    /**
     * 其中的 resize（ width，height） 必须在 onDraw()之前调用
     */
    public void resizeShape(final float width,final float height){
        shape.getShape().resize(width,height);
    }

}

MainActivity.java :

package com.crazy.circledisplay;

import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.ViewGroup;

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


public class MainActivity extends AppCompatActivity {

    private List<View> viewList;
    private ViewPager viewPager;
    private CircleDisplay circleDisplay;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

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

        circleDisplay = (CircleDisplay) findViewById(R.id.indicator);
        // 让小圆球与 ViewPager 关联起来
        circleDisplay.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 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);
        }

    };

}

CircleDisplay.java :

package com.crazy.circledisplay;

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.view.View;

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

public class CircleDisplay extends View{

    private ViewPager viewPager;
    // 小圆球的集合
    private List<ShapeHolder> tabItems;
    private ShapeHolder movingItem;

    // 属性资源
    private int mCurItemPosition;
    private float mCurItemPositionOffset;
    private float mIndicatorRadius;
    private float mIndicatorMargin;
    private int mIndicatorBackground;
    private int mIndicatorSelectedBackground;
    private Gravity mIndicatorLayoutGravity;
    private Mode mIndicatorMode;

    // 设置园的半径
    private final int DEFAULT_RADIUS = 15;
    // 设置两个圆之间的距离
    private final int DEFAULT_MARGIN = 40;
    // 设置圆的颜色（未选中时）
    private final int DEFAULT_BACKGROUND = Color.WHITE;
    // 设置选中时圆的颜色
    private final int DEFAULT_SELECTED_BACKGROUND = Color.RED;
    // 设置显示的位置（水平方向）
    private final int DEFAULT_LAYOUT_GRAVITY = Gravity.CENTER.ordinal();

    private final int DEFAULT_MODE = Mode.SOLO.ordinal();

    public enum Gravity{
        LEFT,       // 左
        CENTER,     // 中
        RIGHT       // 右
    }
    public enum Mode{
        INSIDE,
        OUTSIDE,
        SOLO
    }
    public CircleDisplay(Context context) {
        this(context, null);
    }

    public CircleDisplay(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleDisplay(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);
    }

    /**
     *  检索从 atrrs.xml 这个结构对应于给定的属性 obtainstyledattributes 的位置
     * @param context
     * @param attrs
     */
    private void handleTypedArray(Context context, AttributeSet attrs) {
        if(attrs == null)
            return;

        TypedArray typedArray = context.obtainStyledAttributes(
                attrs, R.styleable.CircleDisplay);
        // 获取半径参数
        mIndicatorRadius = typedArray.getDimensionPixelSize(
                R.styleable.CircleDisplay_ci_radius,
                DEFAULT_RADIUS);

        mIndicatorMargin = typedArray.getDimensionPixelSize(
                R.styleable.CircleDisplay_ci_margin,
                DEFAULT_MARGIN);

        mIndicatorBackground = typedArray.getColor(
                R.styleable.CircleDisplay_ci_background,
                DEFAULT_BACKGROUND);

        mIndicatorSelectedBackground = typedArray.getColor(
                R.styleable.CircleDisplay_ci_selected_background,
                DEFAULT_SELECTED_BACKGROUND);

        int gravity = typedArray.getInt(
                R.styleable.CircleDisplay_ci_gravity,
                DEFAULT_LAYOUT_GRAVITY);

        mIndicatorLayoutGravity = Gravity.values()[gravity];

        int mode = typedArray.getInt(
                R.styleable.CircleDisplay_ci_mode,
                DEFAULT_MODE);

        mIndicatorMode = Mode.values()[mode];
        typedArray.recycle();
    }

    public void setViewPager(final ViewPager viewPager){
        this.viewPager = viewPager;
        createTabItems();
        createMovingItem();
        setUpListener();
    }
    private void setUpListener() {
        viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            /**
             *
             * @param position 当前的位置，从 0 开始记录；
             * @param positionOffset  位置偏移量，从右往左滑动，数值越来越大（当翻页后数值变为 0.0），
             *             但都小于 1.0；从左往右翻动，数值逐渐减小 （当翻页后数值变为 0.0）；
             * @param positionOffsetPixels 位置偏移像素，从右往左滑动，数值越来越大（当翻页后数值变为 0）；
             *                             从左往右翻动，数值逐渐减小 （当翻页后数值变为 0）
             */
            @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);
                }
            }
        });
    }

    /**
     * 当 ViewPager 的条目改变时，重绘
     * @param position
     * @param positionOffset
     */
    private void trigger(int position,float positionOffset){

        CircleDisplay.this.mCurItemPosition = position;

        CircleDisplay.this.mCurItemPositionOffset = 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) {
        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?");
        }
        // y 轴方向上的中点
        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){
        // 居左时，绘制小圆球起始位置从 0 开始
        if(mIndicatorLayoutGravity == Gravity.LEFT)
            return 0;
        // 所有小圆球的所占位置的宽度（包括小圆球之间的距离）
        float tabItemsLength = tabItems.size()*(2* mIndicatorRadius + mIndicatorMargin)- mIndicatorMargin;
        // 超出屏幕宽度时，起始位置为 0
        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?");
        }
        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) {
        super.onDraw(canvas);

        // saveLayer 可以看成有多个图层（Layer），缺省情况可以看作是只有一个图层Layer.
        // 如果需要按层次来绘图，Android的Canvas可以使用SaveLayerXXX, Restore 来创建一些中间层，
        // 对于这些Layer是按照“栈结构“来管理的。也就是可以通过修改其属性，能够看到看到底层的视图
        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){
            canvas.save();
            canvas.translate(item.getX(),item.getY());
            item.getShape().draw(canvas);
            canvas.restore();
        }

        if(movingItem != null){
            canvas.save();
            canvas.translate(movingItem.getX(), movingItem.getY());
            movingItem.getShape().draw(canvas);
            canvas.restore();
        }
        canvas.restoreToCount(sc);
    }

    // 注释掉的这部分可以扩展其他的功能
/*    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;
    }*/
}