虽然在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;
}
}
这就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
