android viewpage 代码添加view,百行代码实现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 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的指示器效果