自定义View——图片指示器

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

1、单独调用。

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

3、有内环（蓝色）、外环（白色），效果好。

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

5、控制哪个点被选中。

6、动态控制有几个点。

效果如下：

自定义View代码：

</pre><pre code_snippet_id="254959" snippet_file_name="blog_20140325_1_5379165" name="code" class="html">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>