简单实现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;
    }
   }
  };
 }

 /**
  * 初始化数据 以及拿到数据后的各种设置
  * 可以是网络地址 也可是项目图片数据
  * @param imageUrls
  */
 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();
 }

 /**
  * 设置标题
  * @param titles
  */
 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);
  }
 }

 /**
  * 获取显示图片view
  */
 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);
  }
 }

 /**
  * 设置UI
  */
 private void setUI(){
  adapter=new BannerAdapter();
  viewPager.setAdapter(adapter);
  viewPager.addOnPageChangeListener(onPageChangeLis);
  viewPager.setCurrentItem(1);
  handler.postDelayed(runnable,bannerTime);
 }

 /**
  * viewPage改变监听
  */
 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;
   }
  }
 };


 /**
  * 设置指示器和标题切换
  * @param position
  */
 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 # 轮播图 # Android实现轮播图片展示效果 # Android实现炫酷轮播图效果 # Android使用viewpager实现自动无限轮播图 # Android实现ViewPage轮播图效果 # Android ViewPager实现轮播图效果 # Android开发实现的自动换图片、轮播图效果示例 # Android如何使用RecyclerView打造首页轮播图 # android实现banner轮播图无限轮播效果 # Android自定义控件实现优雅的广告轮播图 # Android自定义轮播图效果 # 切换到 # 第一页 # 的是 # 还可以 # 下一页 # 不太 # 小圆点 # 没有什么 # 大神 # 第二个 # 看不出 # 可以实现 # 当我们 # 自带 # 很明显 # 第三方 # 第一张 # 好啦 # 先看 # 大家多多

返回目录在线咨询

上一篇：Python算法系统学习路线第514讲_核心原理与实战案例详解【教程】
下一篇：免费字体设计制作网站有哪些,vscode设计网页如何将字体居中？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

简单实现android轮播图

您的项目需求