viewpager实现自动循环轮播图

 更新时间:2021年1月2日 21:51  点击:1444

本文实例为大家分享了viewpager自动循环轮播图的具体代码,供大家参考,具体内容如下

布局文件

android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <androidx.viewpager.widget.ViewPager
   android:id="@+id/vp_adv"
   android:layout_width="match_parent"
   android:layout_height="160dp"/>
<LinearLayout
   android:id="@+id/View_indicator"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_below="@id/vp_adv"
   android:layout_marginTop="-25dp"
   android:orientation="horizontal"
   android:gravity="right">
  </LinearLayout>
 </RelativeLayout>
</LinearLayout>

核心代码

public class MainActivity extends AppCompatActivity {
 private ImageView indicator;//表示圆点指示器
 private ImageView [] indicators;//保存圆点指示器的数组
 private boolean iscontinue = true;
 private ViewPager viewPager;
 private ViewGroup viewGroup;
 private ArrayList<Fragment> fragments;
 List<Integer> imgs = null;
 private AtomicInteger index = new AtomicInteger();
 private Handler viewHandler= new Handler(){
  @Override
  public void handleMessage(@NonNull Message msg) {
   super.handleMessage(msg);
   viewPager.setCurrentItem(msg.what);
  }
 };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView();
 }
 public void initView(){
  viewPager=findViewById(R.id.vp_adv);
  viewGroup=findViewById(R.id.View_indicator);
  //四张广告图片加载到集合中进行保存
  List<View> listPics = new ArrayList<>();
  ImageView img1 = new ImageView(this);
  img1.setBackgroundResource(R.mipmap.food1);
  listPics.add(img1);
  ImageView img2 = new ImageView(this);
  img1.setBackgroundResource(R.mipmap.shop2);
  listPics.add(img2);
  ImageView img3 = new ImageView(this);
  img1.setBackgroundResource(R.mipmap.shop3);
  listPics.add(img3);
  ImageView img4 = new ImageView(this);
  img1.setBackgroundResource(R.mipmap.shop4);
  listPics.add(img4);
  initFragments();
  //动态设置四个圆点属性
  indicators = new ImageView[listPics.size()];
  for(int i=0;i<indicators.length;i++){
   indicator = new ImageView(this);
   indicator.setLayoutParams(new LinearLayout.LayoutParams(40,40));
   indicator.setPadding(5,5,5,5);
   indicators[i] = indicator;
   if(i == 0){
    indicators[i].setBackgroundResource(R.drawable.ic_launcher_background);
   }else{
    indicators[i].setBackgroundResource(R.drawable.ic_launcher_foreground);
   }
   viewGroup.addView(indicators[i]);
  }
  //设置ViewPager适配器
  viewPager.setAdapter(new pagerAdapter(getSupportFragmentManager()));

  //设置viewPager监听器
  viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

   }

   @Override
   public void onPageSelected(int position) {
    index.getAndSet(position);
    for(int i = 0;i <indicators.length; i ++){
     if(i ==position){
      indicators[i].setBackgroundResource(R.drawable.a1);
     }else{
      indicators[i].setBackgroundResource(R.drawable.a2);
     }
    }

   }

   @Override
   public void onPageScrollStateChanged(int state) {

   }
  });
  viewPager.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View view, MotionEvent motionEvent) {
    switch (motionEvent.getAction()){
     case MotionEvent.ACTION_DOWN:
      iscontinue = false;
      break;
     case MotionEvent.ACTION_UP:
      iscontinue = true;
      break;
    }
    return false;
   }
  });
  //使用多线程切换UI
  new Thread(new Runnable() {
   @Override
   public void run() {
    while (true){
     if(iscontinue){
      viewHandler.sendEmptyMessage(index.get());
      whatOption();
     }
    }

   }
  }).start();
 }
 private void whatOption(){
  index.incrementAndGet();//将当前位置+1;
  if(index.get()>indicators.length-1){
   index.getAndAdd(-4);
  }
  try {
   Thread.sleep(2000);
  } catch (InterruptedException e) {
   e.printStackTrace();
  }
 }
 private void initFragments() {
  imgs = new ArrayList<Integer>();
  imgs.add(R.mipmap.timg1);
  imgs.add(R.mipmap.timg2);
  imgs.add(R.mipmap.timg3);
  imgs.add(R.mipmap.timg4);

 }
 class pagerAdapter extends FragmentPagerAdapter{

  public pagerAdapter(FragmentManager fm) {
   super(fm);
  }

  @Override
  public Fragment getItem(int arg0) {
   //得到要显示的对象并初始化图片
   MyFragment fm = new MyFragment();
   fm.setUrl(imgs.get(arg0));

   return fm;
  }

  @Override
  public int getCount() {
   return imgs.size();
  }

 }
}

class MyPagerAdapter extends PagerAdapter{
 private List<View> viewList;
 public MyPagerAdapter(List<View>viewList){
  this.viewList = viewList;
 }

 @Override
 public int getCount() {
  return viewList.size();
 }

 @Override
 public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
  return view==object;
 }

 @NonNull
 @Override
 public Object instantiateItem(@NonNull ViewGroup container, int position) {
  container.addView(viewList.get(position));
  return viewList.get(position);
 }

 @Override
 public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
  container.removeView(viewList.get(position));
 }
}

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

[!--infotagslink--]

相关文章

  • vue+rem自定义轮播图效果

    这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果,手指触摸左滑和右滑,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
  • JS轮播图的实现方法

    这篇文章主要为大家详细介绍了JS轮播图的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-25
  • 使用jquery实现轮播图效果

    这篇文章主要为大家详细介绍了使用jquery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-01-02
  • 基于jquery实现轮播图效果

    这篇文章主要为大家详细介绍了基于jquery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
  • 原生javascript+CSS实现轮播图效果

    这篇文章主要为大家详细介绍了原生javascript+CSS实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-18
  • 原生Js 实现的简单无缝滚动轮播图的示例代码

    这篇文章主要介绍了原生Js 实现的简单无缝滚动轮播图的示例代码,帮助大家更好的理解喝学习使用js,感兴趣的朋友可以了解下...2021-05-11
  • 基于JavaScript实现轮播图效果

    这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-01-02
  • 利用BootStrap的Carousel.js实现轮播图动画效果

    这篇文章主要介绍了利用BootStrap的Carousel.js实现轮播图动画效果的相关资料,需要的朋友可以参考下...2017-01-09
  • JavaScript实现简易轮播图最全代码解析(ES6面向对象)

    这篇文章主要为大家详细介绍了JavaScript实现简易轮播图最全代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-09
  • JavaScript实现循环轮播图

    这篇文章主要为大家详细介绍了JavaScript实现循环轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-11
  • js实现无缝轮播图插件封装

    这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-31
  • JS实现炫酷轮播图

    这篇文章主要为大家详细介绍了JS实现炫酷轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-09
  • jquery插件实现轮播图效果

    这篇文章主要为大家详细介绍了jquery插件实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-19
  • Swift实现3D轮播图效果

    这篇文章主要为大家详细介绍了Swift实现3D轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
  • jquery实现轮播图效果

    本文介绍了jquery实现轮播图效果示例代码。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-19
  • js制作轮播图效果

    这篇文章主要为大家详细介绍了js制作轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-18
  • jQuery实现简单的轮播图效果

    这篇文章主要为大家详细介绍了jQuery实现简单的轮播图效果,实现自动播放,能手动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-13
  • JavaScript实现轮播图案例

    这篇文章主要为大家详细介绍了JavaScript实现轮播图案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-01
  • 用JS实现轮播图效果(二)

    这篇文章主要介绍了用JS实现轮播图效果(二)的相关资料,需要的朋友可以参考下...2016-07-01