android实现ViewPager的Indicator的实例代码

虽然在android5.0中design中有了tablayout来实现viewpager的indicator，简单好用。但这个是我自己实现的，学习了很多，记录在这里。效果图：

第一步

新建一个类继承linearlayout，用来绘制指示器，及提供viewpager滑动时重绘指示器的方法：

public class viewpagerindicator extends linearlayout{

  //画笔
  private paint mpaint;
   //用来画一条线
  private path mpath;
  //绘制线的宽度
  private int mlinewidth;
  //线的初始位置
  private int minittranslationx;
  //移动位置
  private int mtranslationx;
  //子控件
  private view mchildview;

  public viewpagerindicator(context context) {
    super(context,null);
  }

  public viewpagerindicator(context context, attributeset attrs) {

    super(context, attrs);
    mpaint = new paint();
    mpaint.setantialias(true);
    mpaint.setcolor(color.parsecolor("#ffba00"));
    mpaint.setstrokewidth(3);
    mpaint.setstyle(paint.style.stroke);
  }

  //完成布局后获取子控件
  @override
  protected void onfinishinflate() {
    super.onfinishinflate();
    mchildview = getchildat(0);
  }
//在onsizechanged中获取宽和初始位置，并根据位置初始化线
  @override
  protected void onsizechanged(int w, int h, int oldw, int oldh) {
    super.onsizechanged(w, h, oldw, oldh);
    mtranslationx = 0;
    mlinewidth = mchildview.getmeasuredwidth();
    minittranslationx = (w/getchildcount()-mlinewidth)/2;

    initline();
  }
//初始化线
  private void initline(){
    mpath = new path();
    mpath.moveto(0,0);
    mpath.lineto(mlinewidth,0);

  }
//绘制线
  @override
  protected void dispatchdraw(canvas canvas) {
    canvas.save();
    //移动到该坐标后开始绘制
    canvas.translate(minittranslationx + mtranslationx,getheight());
    canvas.drawpath(mpath,mpaint);
    canvas.restore();
    super.dispatchdraw(canvas);
  }

  ////在viewpager的onpagescrolled监听方法中调用此方法。viewpager滑动时mtranslationx的距离跟着变化，实现线的滑动，position，offset由onpagescrolled传值
  public void scroll(int position ,float offset){
    int tabwidth = getwidth()/getchildcount();
    mtranslationx =(int) (tabwidth * offset +tabwidth * position);
    //请求重绘，调用dispatchdraw方法
    invalidate();
  }
}

第二步

在布局中使用该类：

layout\orderpicking

<com.hlw.stock.customlayout.viewpagerindicator
  android:id="@+id/indicator"
  android:layout_width="match_parent"
  android:layout_height="@dimen/xhdpi_40"
  android:gravity="center"
  android:background="@color/white"
  android:orientation="horizontal">

  <textview
  android:id="@+id/for_picking"
  android:layout_width="@dimen/xhdpi_60"
  android:layout_height="match_parent"
  android:layout_marginright="@dimen/xhdpi_60"
  android:clickable="true"
  android:gravity="center"
  android:onclick="onclick"
  android:text="待拣货"
  android:textcolor="@color/light_black"
  android:textsize="@dimen/xhdpi_14" />

  <textview
  android:id="@+id/has_been_picking"
  android:layout_width="@dimen/xhdpi_60"
  android:layout_height="match_parent"
  android:layout_marginright="@dimen/xhdpi_60"
  android:clickable="true"
  android:gravity="center"
  android:onclick="onclick"
  android:text="已拣货"
  android:textcolor="@color/light_black"
  android:textsize="@dimen/xhdpi_14"

  />

  <textview
  android:id="@+id/all"
  android:layout_width="@dimen/xhdpi_60"
  android:layout_height="match_parent"
  android:clickable="true"
  android:gravity="center"
  android:onclick="onclick"
  android:text="全部"
  android:textcolor="@color/light_black"
  android:textsize="@dimen/xhdpi_14" />
  </com.hlw.stock.customlayout.viewpagerindicator>

  <android.support.v4.view.viewpager
    android:id="@+id/orderpicking_date"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/white"></android.support.v4.view.viewpager>

第三步

在activity中完成viewpagerindicator与viewpager的关联

public class orderpickingactivity extends fragmentactivity implements view.onclicklistener {
  textview forpicking;
  textview hasbeenpicking;
  textview hasbeenpicking;
  viewpagerindicator mindicator;
  viewpager orderpickingdate;
  private list<fragment> mfragmentlist;
  private fragmentpageradapter orderpickingadapter;
  private viewpager.onpagechangelistener onpagechangelistener;
  //当前选中的indicator
  private textview currentitem;

   protected void oncreate(bundle savedinstancestate) {
       super.oncreate(savedinstancestate);
       requestwindowfeature(window.feature_no_title);
       setcontentview(r.layout.orderpicking);
     init();
     orderpickingdate.setadapter(orderpickingadapter);
     orderpickingdate.addonpagechangelistener();
     orderpickingdate.setcurrentitem(0);
       currentitem = forpicking;
         currentitem.settextcolor(color.parsecolor("#ffba00"));
  }
  private void init(){
    forpicking = (textview) findviewbyid(r.id.for_picking);
    hasbeenpicking = (textview) findviewbyid(r.id.has_been_picking);
    all = (textview) findviewbyid(r.id.all);
    mindicator=(viewpagerindicator)findviewbyid(r.id.indicator);
    orderpickingdate = (viewpager)findviewbyid(r.id.orderpicking_date);
    //初始化viewpager的item，并添加到list中
      mfragmentlist = new arraylist<>();
      orderpickingfragmentforpicking orderpickingfragmentforpicking = 
      new orderpickingfragmentforpicking();
      orderpickingfragmenthasbeenpicking orderpickingfragmenthasbeenpicking =
        new orderpickingfragmenthasbeenpicking();
      orderpickingfragmentall orderpickingfragmentall =
        new orderpickingfragmentall();
      mfragmentlist.add(orderpickingfragmentforpicking);
      mfragmentlist.add(orderpickingfragmenthasbeenpicking);
      mfragmentlist.add(orderpickingfragmentall);
      //设置viewpager的适配器；
      orderpickingadapter = new fragmentpageradapter(getsupportfragmentmanager()) {
        @override
        public int getcount() {
          return mfragmentlist.size();
        }
        @override
        public fragment getitem(int i) {
          return mfragmentlist.get(i);
        }
      };
      //设置viewpager监听事件
      onpagechangelistener = new viewpager.onpagechangelistener(){
        //滑动时，indicator下面的横线跟着滑动
        @override
        public void onpagescrolled(int i, float v, int i1) {
          mindicator.scroll(i, v);
        }
        //选中监听，改变indicator文字颜色
        @override
        public void onpageselected(int i) {
          switch (i) {
            case 0:
              if (currentitem == forpicking)
                return;
              forpicking.settextcolor(color.parsecolor("#ffba00"));
              currentitem.settextcolor(color.parsecolor("#646464"));
              currentitem = forpicking;
              break;
            case 1:
              if (currentitem == hasbeenpicking)
                return;
              hasbeenpicking.settextcolor(color.parsecolor("#ffba00"));
              currentitem.settextcolor(color.parsecolor("#646464"));
              currentitem = hasbeenpicking;
              break;
            case 2:
              if (currentitem == all)
                return;
              all.settextcolor(color.parsecolor("#ffba00"));
              currentitem.settextcolor(color.parsecolor("#646464"));
              currentitem = all;
          }
        }
        @override
        public void onpagescrollstatechanged(int i) {}
      });
  }
  @override
  public void onclick(view v) {
        switch (v.getid()) {
        case r.id.for_picking:
          orderpickingdate.setcurrentitem(0);
          break;
        case r.id.has_been_picking:
          orderpickingdate.setcurrentitem(1);
          break;
        case r.id.all:
          orderpickingdate.setcurrentitem(2);
          break;
        default:
          break;
  }
}

这就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。