android实现ViewPager的Indicator的实例代码-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

android实现ViewPager的Indicator的实例代码

虽然在android5.0中design中有了TabLayout来实现ViewPager的Indicator,简单好用。但这个是我自己实现的,学习了很多,记录在这里。效果图:

成都创新互联公司公司2013年成立,先为柯城等服务建站,柯城等地企业,进行企业商务咨询服务。为柯城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

android实现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



  

  

  
  

  

第三步

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

这就完成了。

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


标题名称:android实现ViewPager的Indicator的实例代码
本文网址:http://kswsj.cn/article/jgosgh.html

其他资讯