自定义ViewPageIndicator

今天拿到项目的首页Banner需求，要求页面能自动滚动，也能根据手指拖拽暂停滚动，而且页面下方的指示器是圆点居中，这个时候就想自己用画笔写个自定义的ViewPageIndicator，其实动起手来也是很快实现的。

首先第一步：就是要先画出圆点，写一个圆点指示器类public class MyVpIndicator extends View，然后添加构造方法public MyVpIndicator(Context context, AttributeSet attrs) {super(context, attrs);initPaint();}在构造方法里面调用初始化画笔的方法。可以根据需求，即圆点边框和填充颜色是否一致来决定初始化画笔，我这里初始化了颜色不一致的画笔，代码如下所示：

private void initPaint() {
paintStroke = new Paint(Paint.ANTI_ALIAS_FLAG);
paintStroke.setColor(Color.BLACK);
paintStroke.setStyle(Paint.Style.STROKE);
paintStroke.setStrokeWidth(3);

paintFill = new Paint(Paint.ANTI_ALIAS_FLAG);
paintFill.setColor(Color.BLUE);
paintFill.setStyle(Paint.Style.FILL);
}

然后重写方法

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = canvas.getWidth();
int y = canvas.getHeight();
// 画空心圆
for (int i = 0; i < mPagerCount; i++) {
canvas.drawCircle(x / 2 - (num - 1) * 1.5f * radiu + 3 * radiu * i, y / 2, radiu, paintStroke);
}
// 画实心圆
canvas.drawCircle(x / 2 - (num - 1) * 1.5f * radiu + offset, y / 2, radiu, paintFill);
} 

这里要说明一下几个自定义变量mPagerCount、num、radiu和offset分别是什么。

int num = 5;// 小圆环的个数
int radiu = 20;//小 圆的半径
private float offset;//偏移量
private int mPagerCount;//页数

废话不多说，直接上自定义ViewPageIndicator的代码如下：

public class MyVpIndicator extends View {

private Paint paintStroke;
private Paint paintFill;

int num = 5;// 圆环的个数
int radiu = 20;// 圆的半径
private float offset;//偏移量
private int mPagerCount;//页数

public MyVpIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();//初始化画笔
}

private void initPaint() {
paintStroke = new Paint(Paint.ANTI_ALIAS_FLAG);
paintStroke.setColor(Color.BLACK);
paintStroke.setStyle(Paint.Style.STROKE);
paintStroke.setStrokeWidth(3);

paintFill = new Paint(Paint.ANTI_ALIAS_FLAG);
paintFill.setColor(Color.BLUE);
paintFill.setStyle(Paint.Style.FILL);
}
/**
* 滑动ViewPager完成之后去移动indicator
* 
* @param position
*/
public void move(int position) {
offset = 3 * radiu * position;
invalidate();
}

/**
* 滑动ViewPager过程中移动indicator
* 
* @param position
*/
public void move(int position, float positionOffset) {
position %= mPagerCount;
offset = 3 * radiu * position + 3 * radiu * positionOffset;
// 到最后一个点时，不要移动出去，不加偏移量
if (position == mPagerCount - 1){
offset = 3 * radiu * position;
}
invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int x = canvas.getWidth();
int y = canvas.getHeight();
// 画空心圆
for (int i = 0; i < mPagerCount; i++) {
canvas.drawCircle(x / 2 - (num - 1) * 1.5f * radiu + 3 * radiu * i, y / 2, radiu, paintStroke);
}
// 画实心圆
canvas.drawCircle(x / 2 - (num - 1) * 1.5f * radiu + offset, y / 2, radiu, paintFill);
}

public void setPagerCount(int i) {
mPagerCount = i;
}

}

自定义控件完成接下来就是应用了，在xml文件中加载一下布局控件

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="200dp" >
    </android.support.v4.view.ViewPager>

    <com.example.ex_temple.MyVpIndicator
        android:id="@+id/myVpIndicator1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignBottom="@+id/pager"
        android:layout_alignParentLeft="true" />

最后在MainActivity中使用，代码如下：

public class MainActivity extends FragmentActivity {
private static final int DURATION_SCROLL = 2000;
ViewPager mPager;
MyAdapter mAdapter;
private MyVpIndicator indicator;
public boolean isDragging;
private Runnable mCallback;
private int mPagerCount = 5;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
initData();
}


private void initData() {
}


private void initUI() {
mAdapter = new MyAdapter(getSupportFragmentManager());
mPager = (ViewPager) findViewById(R.id.pager);
mPager.addOnPageChangeListener(new BannerPageChangeListener());
mPager.setAdapter(mAdapter);
mPager.setCurrentItem(mPagerCount * 100000 / 2);
mPager.setCurrentItem(mAdapter.getCount() / 2);
indicator = (MyVpIndicator) findViewById(R.id.myVpIndicator1);
indicator.setPagerCount(mPagerCount);
autoScroll();
}
//实现自动滑动的方法
private void autoScroll() {
// 取消上次的任务，重新启动
mPager.removeCallbacks(mCallback);
if (mCallback == null) {
mCallback = new Runnable() {
public void run() {
if (!isDragging) {
int currentItem = mPager.getCurrentItem();
mPager.setCurrentItem(currentItem + 1);
mPager.postDelayed(this, DURATION_SCROLL);
}}};
}
mPager.postDelayed(mCallback, DURATION_SCROLL);
}


private final class BannerPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int position) {
// 当滑动到某一页的时候触发
// indicator.move(position);
}


/*
* 当滑动的时候触发 positionOffset：滑动比例 positionOffsetPixels：滑动的像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// Log.e("positionOffset", ""+positionOffset);
indicator.move(position, positionOffset);
}
//判断是否是用户拖拽，当滑动状态改变时候触发
@Override 
public void onPageScrollStateChanged(int state) {
switch (state) {
case ViewPager.SCROLL_STATE_DRAGGING:
isDragging = true;
Log.e("onPageScrollStateChanged", "用户拖拽");
break;
case ViewPager.SCROLL_STATE_IDLE:
isDragging = false;
autoScroll();
Log.e("onPageScrollStateChanged", "空闲");
break;
case ViewPager.SCROLL_STATE_SETTLING:
isDragging = false;
Log.e("onPageScrollStateChanged", "恢复");
break;


default:
break;
}
}
}


public class MyAdapter extends FragmentStatePagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
}


@Override
public int getCount() {
return mPagerCount * 100000;
}


@Override
public Fragment getItem(int position) {
position %= mPagerCount;
return new BlankFragment(position);
}
}
}

此处的 new BlankFragment(position);是新建的一个片段，可以设置不同的内容，我随便设置了不同的背景颜色，代码如下：

public class BlankFragment extends Fragment {


private int position;


public BlankFragment() {
}


public BlankFragment(int position) {
this.position = position;
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_blank, container, false);
switch (position) {
case 0:
view.setBackgroundColor(0xFFFF0000);
break;
case 1:
view.setBackgroundColor(0xFF00FF00);
break;
case 2:
view.setBackgroundColor(0xFF0000FF);
break;
case 3:
view.setBackgroundColor(0xFFFFFFFF);
break;
case 4:
view.setBackgroundColor(0xFF000000);
break;
default:
break;
}
return view;
}
}

哈哈！这样一个自定义的Banner头部就完成了。

本人初来乍到，如有雷同之处纯属巧合，还望见谅；如有不妥之处，还望点拨指导