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;
  }
}

这就完成了。

您可能感兴趣的文章:Android实现Tab布局的4种方式（Fragment+TabpageIndicator+ViewPager）教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)Android 利用ViewPager+GridView实现首页导航栏布局分页效果Android 中 TabHost与ViewPager结合实现首页导航效果Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果Android ViewPager制作新手导航页(动态加载)iOS中UIActivityIndicatorView的用法及齿轮等待动画实例Android改变ExpandableListView的indicator图标实现方法基于Jquery Bar Indicator 插件实现进度条展示效果Android动态给ViewPager添加Indicator导航