android viewpager框架,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

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">

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" />

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"

/>

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" />

android:id="@+id/orderpicking_date"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="@color/white">

第三步

在activity中完成ViewPagerIndicator与Viewpager的关联

public class OrderPickingActivity extends FragmentActivity implements View.OnClickListener {

TextView forPicking;

TextView hasBeenPicking;

TextView hasBeenPicking;

ViewPagerIndicator mIndicator;

ViewPager orderPickingDate;

private List 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;

}

}

这就完成了。

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