【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。。。