百行代码实现Android ViewPage指示器@慕课网原创_慕课网

先看下效果

随着ViewPager的滚动，顶部的IndicatorBar中的指示器和文字颜色进行相应的改变，实现起来也非常简单。
第一步：自定义属性
① 一屏展示Itembar的个数，如上图，一屏显示的Item为4个，
② Item的字体颜色
③ Item被选中后的字体颜色
④ Indicator的高度
⑤ Indicator的颜色
⑥ 设置title的文字
第二步：实现Indicatorbar和ViewPage的联动
我们只需为ViewPager添加一个OnPageChangeListener即可，回调方法如下

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
public void onPageSelected(int position);
public void onPageScrollStateChanged(int state);

我需要重点关注的是onPageScrolled()方法，先来看下它的三个参数
-- position ：当前显示的ViewPage Item的位置
-- positionOffset ：当前Item的偏移量比例，float类型，范围[0,1）
-- positionOffsetPixels :偏移的像素值
我们只需要关注前两个参数即可实现我们的需求。
这里为了简单，IndicatorBar可以直接继承LinerLayout，设置横向布局来实现，Indicator指示器，我们可以利用Canvas画布来实现。
接下来看下实现代码
首先我们需要声明几个成员变量

    // 一屏显示Item的个数
    private int mVisibleCount;
    // 指示器的高度
    private float mIndiHeight = 10;
    // 指示器颜色
    // 指示器初始化的位置
    private int mInitPosition = 0;
    private int mIndicatorColor;
    private int mTextColor;
    private int mTextSelectColor;

在onDraw方法中画出Indicator

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        // 平移画布
        canvas.translate(0, getHeight());
        mPaint.setColor(mIndicatorColor);
        canvas.drawRect(mInitPosition, -mIndiHeight, mInitPosition
                + getScreenWidth() / mVisibleCount, 0, mPaint);
        canvas.restore();
    }

创建IndicatorBar的Item，这里我们没有用自定义属性，对外暴露了一个方法，让用户进行设置，当然你也可以自定义属性，这里我们创建了IndicatorBar的Item，并为每个Item设置的监听事件

public void setTitles(List<String> titles) {
        if (titles != null && titles.size() > 0) {
            for (int i = 0; i < titles.size(); i++) {
                TextView tv = new TextView(getContext());
                tv.setTextColor(DEFAULT_TEXT_COLOR);
                tv.setText(titles.get(i));
                tv.setGravity(Gravity.CENTER);
                LinearLayout.LayoutParams lp = new LayoutParams(
                        getScreenWidth() / mVisibleCount,
                        LayoutParams.MATCH_PARENT);
                tv.setLayoutParams(lp);
                final int j = i;
                tv.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View v) {
                        mViewPager.setCurrentItem(j);
                    }
                });
                this.addView(tv);
            }
        }
    }

注入ViewPage并添加监听事件

public void setViewPager(ViewPager viewPager) {
        this.mViewPager = viewPager;
        mViewPager.addOnPageChangeListener(this);
        changeSelectTextColor(0);
    }

核心代码

@Override
    public void onPageScrolled(int position, float positionOffset,  int positionOffsetPixels) {
    // 根据ViewPage的滑动，修改指示器的初始位置，重绘View，实现指示器随ViewPage联动
    mInitPosition = (int) ((getScreenWidth() / mVisibleCount) * (position + positionOffset));
        invalidate();
    // 根据ViewPage的滑动，通过scollTo方法改变IndicatorBar的位置，使得在屏幕之外的Item得以显示
    if (position >= mVisibleCount - 2 && positionOffset > 0&& position < (getChildCount() - 2)) {
        scrollTo((int) ((position - mVisibleCount + 2 + positionOffset) * (getScreenWidth() / mVisibleCount)),0);
        }
    }

到此，带指示器的ViewPage就实现了，自定义属性和字体Color的改变的代码这里就不再贴了，在文尾有源码连接，有需要的同学可以去下载
和上篇[Android WheelView一样]博客一样，核心代码不足百行，就可是先ViewPage的指示器效果