今天来说说类似天猫的Banner中的小圆点是怎么做的（图中绿圈部分）

在学习自己定义控件之前，我用的是很二的方法，直接在布局中放入多个ImageView，然后代码中依据Pager切换来改变图片。这样的方法尽管能够在切换完毕后正确显示小圆点，可是却做不到例如以下图中的切换中的状态显示：

今天学到了自己定义控件，正好能够把这个坑填上。

说一下思路：

在ViewPager翻动的时候，会调用

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

当中positionOffset为翻动的百分比，所以仅仅要将这个參数传入自己定义控件，就能够计算出实心圆点的坐标

实战：

PagerIndicator.java

import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;public class PagerIndicator extends View {	// 空心圆半径	private int RADIUS = 10;	// 空心圆画笔	private Paint mBgPaint;	// 实心圆画笔（当前页）	private Paint mPaint;	// 圆点个数,默觉得5,设计布局时能够预览	private int mCount = 5;	// 当前实心圆的位置	private int mPosition;	// 偏移量（百分比）	private float mOffset;	// 第一个空心圆的圆心坐标	private int startY;	private int startX;	@Override	protected void onDraw(Canvas canvas) {		super.onDraw(canvas);		// 画出空心的小圆点		for (int i = 0; i < mCount; i++) {			canvas.drawCircle(startX + i * 3 * RADIUS, startY, RADIUS, mBgPaint);		}		// 画出指示当前位置的原点,因为高度固定，所以仅仅计算了X坐标		float x = startX + (mPosition + mOffset) * 3 * RADIUS;		canvas.drawCircle(x, startY, RADIUS - 1, mPaint);	}	@Override	protected void onSizeChanged(int w, int h, int oldw, int oldh) {		// 获取第一个空心圆的圆心坐标		startX = w - 3 * RADIUS * mCount;		startY = h / 2;		super.onSizeChanged(w, h, oldw, oldh);	}	// 设置圆个数	public void setCount(int count) {		mCount = count;	}	// 获取偏移量并重绘indicator	public void onPageScrolled(int position, float offset) {		mPosition = position;		mOffset = offset;		invalidate();	}	// 创建带AttributeSet參数的构造方法使控件能够直接拖动到布局中并预览	public PagerIndicator(Context context, AttributeSet attrs) {		super(context, attrs);		initPaint();	}	// 初始化画笔	private void initPaint() {		// 空心圆画笔		mBgPaint = new Paint();		mBgPaint.setColor(Color.GRAY);		mBgPaint.setAntiAlias(true);		mBgPaint.setStyle(Paint.Style.STROKE);		mBgPaint.setStrokeWidth(2);		// 实心圆画笔		mPaint = new Paint();		mPaint.setColor(Color.rgb(197, 135, 87));		mPaint.setAntiAlias(true);	}}

布局的设置：

XML：

     
         
          
      <这里改成你自己的包名.pagerindicator android:id="@+id/pagerIndicate1" android:layout_width="match_parent" android:layout_height="20dp" android:background="#C0C0C0" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" />
     

在使用到的地方：

初始化的方法，反正仅仅要比使用早调用到即可

private void initPagerIndicator() {	mPagerIndicator = (PagerIndicator) mLayout.findViewById(R.id.pagerIndicate1);	//此处直接设置为7，有需求可自己更改成其它值	mPagerIndicator.setCount(7);}

设置ViewPager监听器：

mPager.setOnPageChangeListener(new OnPageChangeListener() {				@Override	public void onPageSelected(int arg0) {	}				@Override	public void onPageScrolled(int position, float offset, int arg2) {		//重点在这里，调用控件内的方法		mPagerIndicator.onPageScrolled(position , offset);					}				@Override	public void onPageScrollStateChanged(int arg0) {	}});

完毕的效果：

颜色选得比較任意，认为难看自己换掉吧，毕竟我没有美工QAQ。。。

chenbw1

2014/5/8

欢迎转载，转载请注明出处，谢谢

最后吐槽下，原来CSDN有私信啊。。。之前全然就没注意过。。。所以一些信息如今才看到也就不回了，毕竟都过去好久了，抱歉啦。。。。。。。。。。。