android学习记录6：实现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(onPageChangeListener);
         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;
    }
}

这就完成了。