简单实现android轮播图

轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考

目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getShowView()方法中修改

1.定时切换

通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现

2.无限轮播效果

如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可以实现轮播的效果
但是 有两个问题

切换从最后一页切换到第一页的时候有一个很明显的回滚效果 不是我们想要的 当我们手动滑动的时候 在第一页和最后一页的时候 无法继续左右滑动 因为已经没有下一页了

先看张图（偷来的）

不得不说这位兄弟的图p的很形象 简直完美

虽然看到的是三张图 实际上是五张 数据多的时候也按照这种方式添加数据 当view4的时候自动切换到view5时 进行判断让到切换到view2 这样造成的感觉就是最后一张下来是第一张
我们利用viewpage自带的方法切换界面立即切换没有滚动效果 当图片一样的时候是看不出图片变化的
setCurrentItem(int item, boolean smoothScroll)

第二个参数设置false 界面切换的时候无滚动效果 默认true

好啦 接下来看代码

public class BannerViewPager extends FrameLayout {
  private ViewPager viewPager;
  private TextView tvTitle;
  private LinearLayout indicatorGroup;
  private BannerAdapter adapter;
  private List<String> titles;//标题集合
  private List imageUrls;//图片数据
  private List<View> views;//轮播图显示
  private ImageView [] tips;//保存显示的小圆点
  private int count;//保存imageUrls的总数
  private int bannerTime=2500;//轮播图的间隔时间
  private int currentItem=0;//轮播图的当前选中项
  private long releaseTime = 0;//保存触发时手动滑动的时间 进行判断防止滑动之后立即轮播
  private final int START=10;
  private final int STOP=20;
  private Context context;
  private Handler handler;
  private final Runnable runnable=new Runnable() {
    @Override
    public void run() {
      long now=System.currentTimeMillis();
      if (now-releaseTime>bannerTime-500){
        handler.sendEmptyMessage(START);
      }else{
        handler.sendEmptyMessage(STOP);
      }
    }
  };
  public BannerViewPager(Context context) {
    super(context);
  }
  public BannerViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context=context;
    titles=new ArrayList<>();
    titles.add("标题1");
    titles.add("标题2");
    titles.add("标题3");
    imageUrls=new ArrayList();
    views=new ArrayList<>();
    init(context,attrs);
  }
  private void init(final Context context, AttributeSet attrs){
    View view= LayoutInflater.from(context).inflate(R.layout.layout_banner,this);
    viewPager= (ViewPager) view.findViewById(R.id.banner_view_pager);
    tvTitle= (TextView) view.findViewById(R.id.banner_title);
    indicatorGroup= (LinearLayout) view.findViewById(R.id.banner_indicator);
    handler=new Handler(){
      @Override
      public void handleMessage(Message msg) {
        super.handleMessage(msg);
        switch (msg.what){
          case START:
            viewPager.setCurrentItem(currentItem+1);
            handler.removeCallbacks(runnable);
            handler.postDelayed(runnable,bannerTime);
            break;
          case STOP:
            releaseTime=0;
            handler.removeCallbacks(runnable);
            handler.postDelayed(runnable,bannerTime);
            break;
        }
      }
    };
  }
  
  public void setData(List<?> imageUrls){
    this.imageUrls.clear();
    this.count=imageUrls.size();
    this.imageUrls.add(imageUrls.get(count-1));
    this.imageUrls.addAll(imageUrls);
    this.imageUrls.add(imageUrls.get(0));
    initIndicator();
    getShowView();
    setUI();
  }
  
  public void setTitles(List<String> titles){
    this.titles.clear();
    this.titles.addAll(titles);
  }
  
  private void initIndicator(){
    tips=new ImageView[count];
    LinearLayout.LayoutParams layoutParams = new LinearLayout.
        LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    layoutParams.height=10;
    layoutParams.width=10;
    layoutParams.leftMargin = 5;// 设置点点点view的左边距
    layoutParams.rightMargin = 5;// 设置点点点view的右边距
    for (int i=0;i<count;i++){
      ImageView imageView=new ImageView(context);
      if (i == 0) {
        imageView.setBackgroundResource(R.drawable.shape_circle_red);
      } else {
        imageView.setBackgroundResource(R.drawable.shape_circle_white);
      }
      tips[i] = imageView;
      indicatorGroup.addView(imageView, layoutParams);
    }
  }
  
  private void getShowView(){
    for (int i=0;i<imageUrls.size();i++){
      ImageView imageView=new ImageView(context);
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
      if (imageUrls.get(i) instanceof String){
      }else{
        imageView.setImageResource((Integer) imageUrls.get(i));
      }
      views.add(imageView);
    }
  }
  
  private void setUI(){
    adapter=new BannerAdapter();
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(onPageChangeLis);
    viewPager.setCurrentItem(1);
    handler.postDelayed(runnable,bannerTime);
  }
  
  private ViewPager.OnPageChangeListener onPageChangeLis=new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
      //计算当前页的下标
      int max = views.size() - 1;
      int temp = position;
      currentItem = position;
      if (position == 0) {
        currentItem = max - 1;
      } else if (position == max) {
        currentItem = 1;
      }
      temp = currentItem - 1;
      setIndicatorAndTitle(temp);
    }
    @Override
    public void onPageScrollStateChanged(int state) {
      currentItem=viewPager.getCurrentItem();
      switch (state) {
        case 0:
          //Log.e("aaa","=====静止状态======");
          if (currentItem == 0) {
            viewPager.setCurrentItem(count, false);
          } else if (currentItem == count + 1) {
            viewPager.setCurrentItem(1, false);
          }
          break;
        case 1:
//        Log.e("aaa","=======手动拖拽滑动时调用====");
          releaseTime = System.currentTimeMillis();
          if (currentItem == count + 1) {
            viewPager.setCurrentItem(1, false);
          } else if (currentItem == 0) {
            viewPager.setCurrentItem(count, false);
          }
          break;
        case 2:
//        Log.e("aaa","=======自动滑动时调用====");
          break;
      }
    }
  };
  
  private void setIndicatorAndTitle(int position){
    tvTitle.setText(titles.get(position));
    for (int i=0;i<tips.length;i++){
      if (i==position){
        tips[i].setBackgroundResource(R.drawable.shape_circle_red);
      }else{
        tips[i].setBackgroundResource(R.drawable.shape_circle_white);
      }
    }
  }
  
  class BannerAdapter extends PagerAdapter{
    @Override
    public int getCount() {
      return views.size();
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
      return view==object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      container.addView(views.get(position));
      return views.get(position);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      container.removeView((View) object);
    }
  }
}

Activity代码

BannerViewPager banner= (BannerViewPager) findViewById(R.id.banner);
    List<Integer> imageUrl=new ArrayList<>();
    imageUrl.add(R.mipmap.aiyo);
    imageUrl.add(R.mipmap.dipang1);
    imageUrl.add(R.mipmap.ic_launcher);
    banner.setData(imageUrl);

最后提供两个GitHub上大神封装好的轮播图

建议不太会的同学先搞清楚基本的逻辑在使用第三方库

https://github.com/youth5201314/banner
Https://github.com/binGoogolapple/BGABanner-Android

您可能感兴趣的文章:Android ViewPager实现轮播图效果Android自定义控件实现简单的轮播图控件Android自定义控件实现优雅的广告轮播图Android实现ViewPage轮播图效果Android实现炫酷轮播图效果Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件Android如何使用RecyclerView打造首页轮播图Android开发在轮播图片上加入点击事件的方法Android实现轮播图无限循环效果Flutter实现轮播图效果