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

<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;  }}

这就完成了。

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

好想从现在开始抱着你,紧紧地抱着你,一直走到上帝面前。

android实现ViewPager的Indicator的实例代码

相关文章:

你感兴趣的文章:

标签云: