自定义ViewPagerIndicator（上）

大家可以参考ViewPagerIndicator开源库，看不太懂的可以先看我这篇博客，我这篇是一步一步从最基础的做起到封装成库

（1）创建一个类，继承View，这是自定义的第一步

public class PagerIndicator extends View {}

（2）添加两个参数的构造方法，初始化三个画笔

public PagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
// 设置画笔抗锯齿
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
paint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
paint2.setColor(Color.BLACK);
// 空心
paint2.setStyle(Style.STROKE);
// 画笔宽度
paint2.setStrokeWidth(2);
paint3 = new Paint(Paint.ANTI_ALIAS_FLAG);
paint3.setColor(Color.GRAY);
}

（3）绘制静态界面

private static final int RADIUS = 30;
private static final int CX = 90;
private static final int CY = 60;
@Override
protected void onDraw(Canvas canvas) {
// for循环画四个小圆
for (int i = 0; i < 4; i++) {
// 指定圆的x，y坐标及圆的半径RADIUS
canvas.drawCircle(CX + 3 * RADIUS * i, CY,
RADIUS, paint);
// 画圆的外圈
canvas.drawCircle(CX + 3 * RADIUS * i, CY,
RADIUS, paint2);
}
// 滑动的小圆点
canvas.drawCircle(CX + offset, CY, RADIUS, paint3);

}

（4）在PagerIndicator中增加move()方法，改变圆点移动的横坐标

public void move(int position, float arg) {
offset = (int) (arg * 3 * RADIUS) +
position * 3 * RADIUS;
invalidate();
}

（5）在主程序的xml布局拉上我们的自定义控件

<com.xinbo.demo.PagerIndicator
android:id="@+id/pagerIndicator1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />

（6）在主程序中的ViewPager中调用move方法

pager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float
arg1, int arg2) {
indicatorView.move(position, arg1);
}
@Override
public void onPageSelected(int arg0) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
});

代码地址：

开源库地址：http://download.csdn.net/download/sjc1010592550/9090163

下一篇我们来把图封装成库