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）;}//完成布局后获取子控件@Overrideprotected void onFinishInflate（） {super.onFinishInflate（）;mChildView = getChildAt（0）;}//在onSizeChanged中获取宽和初始位置，并根据位置初始化线@Overrideprotected 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）;}//绘制线@Overrideprotected 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（）;}}

第二步
在布局中使用该类：

layoutorderpicking

<com.hlw.stock.customlayout.ViewPagerIndicatorandroid:id="@+id/indicator"android:layout_width="match_parent"android:layout_height="@dimen/xhdpi_40"android:gravity="center"android:background="@color/white"android:orientation="horizontal"><TextViewandroid: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" /><TextViewandroid: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"/><TextViewandroid: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.ViewPagerandroid: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;//当前选中的indicatorprivate 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（）） {@Overridepublic int getCount（） {return mFragmentList.size（）;}@Overridepublic Fragment getItem（int i） {return mFragmentList.get（i）;}};//设置ViewPager监听事件onPageChangeListener = new ViewPager.OnPageChangeListener（）{//滑动时，indicator下面的横线跟着滑动@Overridepublic void onPageScrolled（int i, float v, int i1） {mIndicator.scroll（i, v）;}//选中监听，改变indicator文字颜色@Overridepublic 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;}}@Overridepublic void onPageScrollStateChanged（int i） {}}）;}@Overridepublic 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;}}

这就完成了。

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