自定义View——图片指示器

图片轮轮播器的时候，通常有几个点点指示当前是第几张图片，有的实现是切好几张图片，但这样的点点不能修改样式大小，不够灵活。由于这是一个很常用的控件，于是就写了一个自定义控件，功能如下：

1、单独调用。

2、可以控制每个点大小。

3、有内环、处环，效果好。

4、可以控制点点的间距。

5、控制哪个点被选中。

6、动态控制有几个点。

效果如下：

自定义View代码：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

/**
 * 滑动图片点点指示器
 * 
 * @author zhougang
 * 
 *         2014-1-17 下午5:23:17
 */
public class DotIndicatorView extends View {
	private Context mContext;

	private int innerColor;
	private int outerColor;
	private float size;
	private float distance;
	private int number;
	private int selectedIndex;

	private Paint mPaint1;
	private Paint mPaint2;
	private Paint mPaint3;
	
	private int border = 2;
	
	public DotIndicatorView(Context context) {
		super(context);
	}

	public DotIndicatorView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mPaint1 = new Paint();
		mPaint2 = new Paint();
		mPaint3 = new Paint();
		TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.DotIndicatorView);
		innerColor = typedArray.getColor(R.styleable.DotIndicatorView_innerColor, 0XFF0000);
		outerColor = typedArray.getColor(R.styleable.DotIndicatorView_outerColor, 0XFFFFFF);
		size = typedArray.getDimension(R.styleable.DotIndicatorView_size, 8);
		distance = typedArray.getDimension(
				R.styleable.DotIndicatorView_distance, 10);
		number = typedArray.getInteger(R.styleable.DotIndicatorView_number, 4);
		selectedIndex = typedArray.getInteger(
				R.styleable.DotIndicatorView_selectedIndex, 0);

		typedArray.recycle();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		mPaint1.setStyle(Style.FILL);
		mPaint1.setColor(outerColor);
		mPaint1.setAntiAlias(true);
		
		mPaint2.setStyle(Style.FILL);
		mPaint2.setColor(innerColor);
		mPaint2.setAntiAlias(true);
		
		mPaint3.setColor(outerColor);
		mPaint3.setAntiAlias(true);
		mPaint3.setStyle(Style.STROKE);
		mPaint3.setStrokeWidth(2);
		
		for (int index = 0; index < number; index++) {
			if(number==1){
				return ;
			}
			if (index == selectedIndex ) {
				canvas.drawCircle((index+1) * (distance+ size), size/2, size/2-border,mPaint2);
				canvas.drawCircle((index+1) * (distance+size), size/2, size/2-border,mPaint3);
			} else {
				canvas.drawCircle((index+1) * (distance+size), size/2, size/2-1,mPaint1);
			}
		}
	}

	public void setPosition(int position) {
		selectedIndex = position;
		invalidate();
	}

	public void setNumber(int number) {
		this.number = number;
		invalidate();
	}
	
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

	    int desiredWidth = (int)(number*size +(number+1)*distance);
	    int desiredHeight = (int)size;

	    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
	    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
	    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
	    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

	    int width;
	    int height;

	    //Measure Width
	    if (widthMode == MeasureSpec.EXACTLY) {
	        //Must be this size
	        width = widthSize;
	    } else if (widthMode == MeasureSpec.AT_MOST) {
	        //Can‘t be bigger than...
	        width = Math.min(desiredWidth, widthSize);
	    } else {
	        //Be whatever you want
	        width = desiredWidth;
	    }

	    //Measure Height
	    if (heightMode == MeasureSpec.EXACTLY) {
	        //Must be this size
	        height = heightSize;
	    } else if (heightMode == MeasureSpec.AT_MOST) {
	        //Can‘t be bigger than...
	        height = Math.min(desiredHeight, heightSize);
	    } else {
	        //Be whatever you want
	        height = desiredHeight;
	    }

	    //MUST CALL THIS
	    setMeasuredDimension(width, height);
	}
}

    <com.view.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:background="#009ABB"
        app:pstsDividerColor="#00000000"
        app:pstsIndicatorColor="#FF0000"
        app:pstsIndicatorHeight="1dip"
        app:pstsShouldExpand="true" />

记住调用的布局文件中要添加自定义命名空间：

xmlns:app="http://schemas.android.com/apk/res-auto"

自定义的属性需要在res/values/attrs.xml中定义：

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

    <declare-styleable name="PagerSlidingTabStrip">
        <attr name="pstsIndicatorColor" format="color" />
        <attr name="pstsUnderlineColor" format="color" />
        <attr name="pstsDividerColor" format="color" />
        <attr name="pstsIndicatorHeight" format="dimension" />
        <attr name="pstsUnderlineHeight" format="dimension" />
        <attr name="pstsDividerPadding" format="dimension" />
        <attr name="pstsTabPaddingLeftRight" format="dimension" />
        <attr name="pstsScrollOffset" format="dimension" />
        <attr name="pstsTabBackground" format="reference" />
        <attr name="pstsShouldExpand" format="boolean" />
        <attr name="pstsTextAllCaps" format="boolean" />
    </declare-styleable>
    
    <declare-styleable name="DotIndicatorView">
        <attr name="innerColor" format="color" />
        <attr name="outerColor" format="color" />
        <!-- 圆点大小  -->
        <attr name="size" format="dimension" />
        <!-- 每个点之间的间隔 -->
        <attr name="distance" format="dimension" />
        <!-- 有几个点 -->
        <attr name="number" format="integer" />
        <!-- 哪一个点被选中 -->
        <attr name="selectedIndex" format="integer" />
    </declare-styleable>

</resources>

自定义View——图片指示器,布布扣,bubuko.com

自定义View——图片指示器

原文：http://blog.csdn.net/nnmmbb/article/details/22039949