为ViewPager设置CirclePageIndicator(小圆点)

一切为了快速迭代！

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.lang.reflect.Field;

/**
 * Created by liangfei on 3/26/15.
 */
public class CirclePageIndicator extends LinearLayout implements ViewPager.OnPageChangeListener {
    public static final int INDICATOR_TYPE_CIRCLE = 0;
    public static final int INDICATOR_TYPE_FRACTION = 1;

    public enum IndicatorType {
        CIRCLE(INDICATOR_TYPE_CIRCLE),
        FRACTION(INDICATOR_TYPE_FRACTION),
        UNKNOWN(-1);

        private int type;
        IndicatorType(int type) {
            this.type = type;
        }

        public static IndicatorType of(int value) {
            switch (value) {
                case INDICATOR_TYPE_CIRCLE:
                    return CIRCLE;
                case INDICATOR_TYPE_FRACTION:
                    return FRACTION;
                default:
                    return UNKNOWN;
            }
        }
    }

    public static final int DEFAULT_INDICATOR_SPACING = 5;

    private int mActivePosition = -1;
    private int mIndicatorSpacing;
    private boolean mIndicatorTypeChanged = false;

    private IndicatorType mIndicatorType = IndicatorType.of(INDICATOR_TYPE_CIRCLE);
    private ViewPager mViewPager;

    private ViewPager.OnPageChangeListener mUserDefinedPageChangeListener;

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

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

    public CirclePageIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.CirclePageIndicator, 0, 0);
        try {
            mIndicatorSpacing = a.getDimensionPixelSize(
                    R.styleable.CirclePageIndicator_indicator_spacing,
                    DEFAULT_INDICATOR_SPACING);
            int indicatorTypeValue = a.getInt(
                    R.styleable.CirclePageIndicator_indicator_type,
                    mIndicatorType.type);
            mIndicatorType = IndicatorType.of(indicatorTypeValue);
        } finally {
            a.recycle();
        }

        init();
    }

    private void init() {
        setOrientation(HORIZONTAL);
        if (!(getLayoutParams() instanceof FrameLayout.LayoutParams)) {
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            params.gravity = Gravity.BOTTOM | Gravity.START;
            setLayoutParams(params);
        }
    }

    public void setViewPager(ViewPager pager) {
        mViewPager = pager;
        mUserDefinedPageChangeListener = getOnPageChangeListener(pager);
        pager.setOnPageChangeListener(this);
        setIndicatorType(mIndicatorType);
    }

    public void setIndicatorType(IndicatorType indicatorType) {
        mIndicatorType = indicatorType;
        mIndicatorTypeChanged = true;
        if (mViewPager != null) {
            addIndicator(mViewPager.getAdapter().getCount());
        }
    }

    private void removeIndicator() {
        removeAllViews();
    }

    private void addIndicator(int count) {
        removeIndicator();
        if (count <= 0) return;
        if (mIndicatorType == IndicatorType.CIRCLE) {
            for (int i = 0; i < count; i++) {
                ImageView img = new ImageView(getContext());
                LayoutParams params = new LayoutParams(
                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                params.leftMargin = mIndicatorSpacing;
                params.rightMargin = mIndicatorSpacing;
                img.setImageResource(R.drawable.circle_indicator_stroke);
                addView(img, params);
            }
        } else if (mIndicatorType == IndicatorType.FRACTION) {
            TextView textView = new TextView(getContext());
            textView.setTag(count);
            LayoutParams params = new LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            addView(textView, params);
        }
        updateIndicator(mViewPager.getCurrentItem());
    }

    private void updateIndicator(int position) {
        if (mIndicatorTypeChanged || mActivePosition != position) {
            mIndicatorTypeChanged = false;
            if (mIndicatorType == IndicatorType.CIRCLE) {
                ((ImageView) getChildAt(mActivePosition))
                        .setImageResource(R.drawable.circle_indicator_stroke);
                ((ImageView) getChildAt(position))
                        .setImageResource(R.drawable.circle_indicator_solid);
            } else if (mIndicatorType == IndicatorType.FRACTION) {
                TextView textView = (TextView) getChildAt(0);
                //noinspection RedundantCast
                textView.setText(String.format("%d/%d", position + 1, (int) textView.getTag()));
            }
            mActivePosition = position;
        }
    }

    private ViewPager.OnPageChangeListener getOnPageChangeListener(ViewPager pager) {
        try {
            Field f = pager.getClass().getDeclaredField("mOnPageChangeListener");
            f.setAccessible(true);
            return (ViewPager.OnPageChangeListener) f.get(pager);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (mUserDefinedPageChangeListener != null) {
            mUserDefinedPageChangeListener.onPageScrolled(position, positionOffset,
                    positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        updateIndicator(position);
        if (mUserDefinedPageChangeListener != null) {
            mUserDefinedPageChangeListener.onPageSelected(position);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (mUserDefinedPageChangeListener != null) {
            mUserDefinedPageChangeListener.onPageScrollStateChanged(state);
        }
    }
}

自定义属性：

<resources>
    <declare-styleable name="CirclePageIndicator">
        <attr name="indicator_spacing" format="dimension" />
        <attr name="indicator_type" format="enum">
            <enum name="circle" value="0" />
            <enum name="fraction" value="1" />
        </attr>
    </declare-styleable>
</resources>

两个点：

[img]http://dl2.iteye.com/upload/attachment/0109/9490/9441cc2f-0b88-3bc6-b85a-9f029f7e840d.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0109/9492/4afb960c-e955-3db2-a25b-e61e7506d5ab.png[/img]


不使用上面的类。
快速的使用方法：
伪代码

private ViewPager viewPager;
	private LinearLayout indicators;
	private ArrayList<View> listViews = new ArrayList<View>();
	private int curPagerPosition=0,oldPagerPosition=0;
.......
viewPager=(ViewPager)findViewById(R.id.viewPager);
indicators=(LinearLayout)findViewById(R.id.indicators);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				indicators.getChildAt(oldPagerPosition).setBackgroundResource(R.drawable.img_detail_dot_normal);
				indicators.getChildAt(position).setBackgroundResource(R.drawable.img_detail_dot_selected);
				oldPagerPosition=position;
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

indicators.removeAllViews();
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin=10;
params.rightMargin=10;
List<ProductImgEntity> imgs=curProductDetailInfo.getImgs();
						if(curProductDetailInfo.getImgs()==null){
							showToast(R.string.alert_data_incomplete);
	return;
}
						int size=imgs.size();
						for(int i=0;i<size;i++){
							View view=LayoutInflater.from(context).inflate(R.layout.item_product_img, null);
							ImageView item_0=(ImageView)view.findViewById(R.id.item_0);
							Commands.loadImageByVolley(curProductDetailInfo.getImgs().get(i).getImgUrl(),item_0,R.drawable.default_img,400,400);
							listViews.add(view);

							ImageView child=new ImageView(context);
							child.setLayoutParams(params);
							child.setBackgroundResource(i==curPagerPosition?R.drawable.img_detail_dot_selected:R.drawable.img_detail_dot_normal);
							indicators.addView(child);
						}

						viewPager.setAdapter(new MyPagerAdapter(listViews));

[img]http://dl2.iteye.com/upload/attachment/0109/9500/41246eda-8eba-3bc7-bafc-66c6f11672b2.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0109/9502/3518c637-5c6e-361d-981a-77ab8102f2f0.png[/img]


CircleIndicator
[url]https://github.com/THEONE10211024/CircleIndicator[/url]