【Android】自定义控件——仿天猫Indicator

今天来说说类似天猫的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：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp" >

<android.support.v4.view.ViewPager
android:id="@+id/banner_pager"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#C0FFFF" />

<这里改成你自己的包名.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" />

</RelativeLayout>

在使用到的地方：

初始化的方法，反正只要比使用早调用到就行

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有私信啊。。。之前完全就没注意过。。。所以一些信息现在才看到也就不回了，毕竟都过去好久了，抱歉啦。。。。。。。。。。。