基于 ViewPager 封装轮播图控件

2,060 阅读2分钟
原文链接: www.jianshu.com

本文重点介绍了ViewPager实现轮播,左右无限滑动,以及定时任务,在以后的项目中进行快速开发,避免了写很多繁琐的代码,使得维护起来更便利。

效果图:

screen.gif

一.设置自定义布局,ViewPager用来放轮播图,LinearLayout用来放指示器




    

    

    

二.当存在轮播图的时候初始化布局

if (imageUrls == null || imageUrls.length == 0) {
    return;
}
LayoutInflater.from(context).inflate(R.layout.view_ad_pager, this, true);
dotLayout = (LinearLayout) findViewById(R.id.ll_dot);
viewPager = (ViewPager) findViewById(R.id.viewPager_ad);
dotLayout.removeAllViews();//防止重复添加指示器

三.根据轮播图的多少初始化ImageView,同时从网络加载图片资源,这里采用的是Glide框架,当然你也可以换成其他图片请求框架。

for (int i = 0; i < imageUrls.length; i++) {
    ImageView pageView = new ImageView(context);
    Glide.with(context).load(imageUrls[i]).asBitmap().diskCacheStrategy(DiskCacheStrategy.RESULT).into(pageView);
    pageView.setScaleType(ImageView.ScaleType.FIT_XY);
    allPage[i] = pageView;

    final int index = i;
    pageView.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            //对点击图片进行跳转的路径进行判断
            if (imageHref == null || imageHref.length <= index || TextUtils.isEmpty(imageHref[index])) {
                return;
            }
        context.startActivity(new Intent(context, cls)
                .setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TOP)
                .putExtra(BaseWebActivity.WEB_URL, imageHref[index]));
        }
    });
}

四.当轮播图大于1张,且设置了显示指示器时绘制指示器

private void drawPageIndicator() {
if (imageUrls.length <= 1) {
    return;
}
for (int i = 0; i < imageUrls.length; i++) {
    ImageView dotView = new ImageView(context);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
     //指示器左右间隔
    params.leftMargin = 4;
    params.rightMargin = 4;
    dotView.setBackgroundResource(indicatorDrawableUnchecked);
    dotLayout.addView(dotView, params);
}
dotLayout.setGravity(pageIndicatorGravity);  //指示器位置
dotLayout.getChildAt(0).setBackgroundResource(indicatorDrawableChecked); //默认显示第一张图
}

接下来设置ViewPager的事件监听,当手动滑到第一张时还在滑动,就滑到最后一张。当滑到最后一张时还在滑动,就滑到第一张。

private class ADViewPagerChangeListener implements ViewPager.OnPageChangeListener {
  private boolean isScrolled;

  @Override
  public void onPageScrollStateChanged(int arg0) {
      switch (arg0) {
          case 1:// 手势滑动
              isScrolled = false;
              break;
          case 2:// 界面切换
              isScrolled = true;
              break;
          case 0:// 滑动结束
              if (viewPager.getCurrentItem() == viewPager.getAdapter().getCount() - 1 && !isScrolled) {// 当前为最后一张,此时从右向左滑,则切换到第一张
                  viewPager.setCurrentItem(0);
              } else if (viewPager.getCurrentItem() == 0 && !isScrolled) {// 当前为第一张,此时从左向右滑,则切换到最后一张
                  viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1);
              }
              break;
      }
  }

  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {}

  @Override
  public void onPageSelected(int arg0) {
      setCurrentDot(arg0);
  }
}

五.具体应用
1.在布局文件中加入ADViewPager



    

2.待轮播图路径请求成功时,根据需求在代码中设置参数

viewPager.setIndicatorDrawableChecked(R.drawable.shape_dot_checked) //当前指示点
                .setIndicatorDrawableUnchecked(R.drawable.shape_dot_unchecked) //非当前指示点
                .setAutoPlay(true) //是否开启自动轮播
                .setDisplayIndicator(true) //是否显示指示器
                .setIndicatorGravity(Gravity.CENTER) //指示器位置
                .setImageUri(imageUrls)  //图片路径
                .setBannerHref(imageHref)  //点击图片跳转的路径
                .setTargetActivity(BaseWebActivity.class)  //点击图片跳转的webView页面
                .startPlay();

当轮播图资源路径为空时设置默认显示的图片,只需设置ADViewPager的背景图即可

3.只有设置了开启自动轮播,且轮播图数量大于1的时候才会初始化定时器

public void startPlay(long delay, long period) {    
     initADViewPager();    
     if (isAutoPlay && imageUrls.length > 1) {        
            scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
            scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), delay, period, TimeUnit.SECONDS);   
     }
}

4.在 onDetachedFromWindow时关闭了定时器,移除了Handler

@Override
protected void onDetachedFromWindow() {    
       super.onDetachedFromWindow();    
       stopPlay();
}

private void stopPlay() {    
        if (scheduledExecutorService != null) {        
              scheduledExecutorService.shutdown();    
        }    
        if (viewPagerHandler != null) {        
              viewPagerHandler.removeCallbacksAndMessages(null);    
        }
}

源码:github.com/GitPhoenix/…