Android实现图片自动轮播并且支持手势左右无限滑动

废话不多说了,先给大家上左右无限滑动的代码了。

1.左右无限滑动

public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawable.ym4}; //存放图片的数组 private List<ImageView> mList; //当前索引位置以及上一个索引位置 private static int index = 0, preIndex = 0; //是否需要轮播标志 private boolean isContinue = true; //定时器,用于实现轮播 private Timer timer = new Timer(); private MyHandler mHandler; public static class MyHandler extends Handler { private WeakReference<MainActivity> weakReference; public MyHandler(MainActivity activity) { weakReference = new WeakReference<>(activity); } @Override public void handleMessage(Message msg) { if (weakReference.get() != null) { index++; viewPager.setCurrentItem(index); } super.handleMessage(msg); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); addListener(); //让当前图片位于中间某个位置,目的就是为了开始能够左滑 viewPager.setCurrentItem(imageIds.length * 100); initRadioButton(imageIds.length);//注意这句和上面那句顺序不能写反,否则会出现第一个圆点无法显示选中状态 startSwitch(); } /** * 初始化控件 */ public void initView() { viewPager = (ViewPager) findViewById(R.id.viewpager); group = (RadioGroup) findViewById(R.id.group); } /** * 初始化数据 */ public void initData() { mList = new ArrayList<>(); viewPager.setAdapter(pagerAdapter); mHandler = new MyHandler(this); } /** * 添加监听 */ public void addListener() { viewPager.addOnPageChangeListener(onPageChangeListener); viewPager.setOnTouchListener(onTouchListener); } /** * 进行图片轮播 */ public void startSwitch() { //执行定时任务 timer.schedule(new TimerTask() { @Override public void run() { //首先判断是否需要轮播,是的话我们才发消息 if (isContinue) { mHandler.sendEmptyMessage(1); } } }, 3000, 3500);//延迟3秒,每隔3.5秒发一次消息; } /** * 根据图片个数初始化按钮 * @param length 图片所在集合长度 */ private void initRadioButton(int length) { for (int i = 0; i < length; i++) { ImageView imageview = new ImageView(this); imageview.setImageResource(R.drawable.rg_selector);//设置背景选择器 imageview.setPadding(20, 0, 0, 0);//设置每个按钮之间的间距 //将按钮依次添加到RadioGroup中 group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); //默认选中第一个按钮,因为默认显示第一张图片 group.getChildAt(0).setEnabled(false); } } /** * 根据当前触摸事件判断是否要轮播 */ View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //手指按下和划动的时候停止图片的轮播 case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: isContinue = false; break; default: isContinue = true; } return false;//注意这里只能返回false,如果返回true,Dwon就会消费掉事件,MOVE无法获得事件, // 导致图片无法滑动 } }; /** * 根据当前选中的页面设置按钮的选中 */ ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { index = position;//当前位置赋值给索引 setCurrentDot(index % imageIds.length);//因为只有四个按钮,所以我们在此要对长度区域,保证范围在0到4 } @Override public void onPageScrollStateChanged(int state) { } }; /** * 设置对应位置按钮的状态 * @param i 当前位置 */ private void setCurrentDot(int i) { if (group.getChildAt(i) != null) { group.getChildAt(i).setEnabled(false);//当前按钮选中,显示蓝色 } if (group.getChildAt(preIndex) != null) { group.getChildAt(preIndex).setEnabled(true);//上一个取消选中。显示灰色 preIndex = i;//当前位置变为上一个,继续下次轮播 } } PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { //返回一个比较大的值,目的是为了实现无限轮播 return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { position = position % imageIds.length;//因为position非常大,而我们需要的position不能大于图片集合长度 //所以在此取余 ImageView imageView = new ImageView(MainActivity.this); imageView.setImageResource(imageIds[position]); imageView.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(imageView); mList.add(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // 注意在此不要做任何操作,因为我们需要实现向左滑动,否则会产生IndexOutOfBoundsException } }; @Override protected void onDestroy() { super.onDestroy(); //页面销毁的时候取消定时器 if (timer != null) { preIndex = 0; timer.cancel(); } } }

2.单向滑动

public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawable.ym4}; //存放图片的数组 private List<ImageView> mList; //当前索引位置以及上一个索引位置 private static int index = 0, preIndex = 0; //是否需要轮播标志 private boolean isContinue = true; //定时器,用于实现轮播 private Timer timer = new Timer(); private MyHandler mHandler; public static class MyHandler extends Handler { private WeakReference<MainActivity> weakReference; public MyHandler(MainActivity activity) { weakReference = new WeakReference<>(activity); } @Override public void handleMessage(Message msg) { if (weakReference.get() != null) { index++; viewPager.setCurrentItem(index); } super.handleMessage(msg); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); addListener(); initRadioButton(imageIds.length); startSwitch(); } /** * 初始化控件 */ public void initView() { viewPager = (ViewPager) findViewById(R.id.viewpager); group = (RadioGroup) findViewById(R.id.group); } /** * 初始化数据 */ public void initData() { mList = new ArrayList<>(); viewPager.setAdapter(pagerAdapter); mHandler = new MyHandler(this); } /** * 添加监听 */ public void addListener() { viewPager.addOnPageChangeListener(onPageChangeListener); viewPager.setOnTouchListener(onTouchListener); } /** * 进行图片轮播 */ public void startSwitch() { //执行定时任务 timer.schedule(new TimerTask() { @Override public void run() { //首先判断是否需要轮播,是的话我们才发消息 if (isContinue) { mHandler.sendEmptyMessage(1); } } }, 3000, 3500);//延迟3秒,每隔3.5秒发一次消息; } /** * 根据图片个数初始化按钮 * @param length 图片所在集合长度 */ private void initRadioButton(int length) { for (int i = 0; i < length; i++) { ImageView imageview = new ImageView(this); imageview.setImageResource(R.drawable.rg_selector);//设置背景选择器 imageview.setPadding(20, 0, 0, 0);//设置每个按钮之间的间距 //将按钮依次添加到RadioGroup中 group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); //默认选中第一个按钮,因为默认显示第一张图片 group.getChildAt(0).setEnabled(false); } } /** * 根据当前触摸事件判断是否要轮播 */ View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //手指按下和划动的时候停止图片的轮播 case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: isContinue = false; break; default: isContinue = true; } return false;//注意这里只能返回false,如果返回true,Dwon就会消费掉事件,MOVE无法获得事件, // 导致图片无法滑动 } }; /** * 根据当前选中的页面设置按钮的选中 */ ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { index = position;//当前位置赋值给索引 setCurrentDot(index % imageIds.length);//因为只有四个按钮,所以我们在此要对长度区域,保证范围在0到4 } @Override public void onPageScrollStateChanged(int state) { } }; /** * 设置对应位置按钮的状态 * @param i 当前位置 */ private void setCurrentDot(int i) { if (group.getChildAt(i) != null) { group.getChildAt(i).setEnabled(false);//当前按钮选中,显示蓝色 } if (group.getChildAt(preIndex) != null) { group.getChildAt(preIndex).setEnabled(true);//上一个取消选中。显示灰色 preIndex = i;//当前位置变为上一个,继续下次轮播 } } PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { //返回一个比较大的值,目的是为了实现无限轮播 return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { position = position % imageIds.length;//因为position非常大,而我们需要的position不能大于图片集合长度 //所以在此取余 ImageView imageView = new ImageView(MainActivity.this); imageView.setImageResource(imageIds[position]); imageView.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(imageView); mList.add(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mList.get(position)); } }; @Override protected void onDestroy() { super.onDestroy(); //页面销毁的时候取消定时器 if (timer != null) { preIndex = 0; index = 0; timer.cancel(); } } }

3.加入一张图片的判断(最终版)

public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 // private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawable.ym4}; private int[] imageIds = {R.drawable.ym1}; //存放图片的数组 private List<ImageView> mList; //当前索引位置以及上一个索引位置 private static int index = 0, preIndex = 0; //是否需要轮播标志 private boolean isContinue = true; //定时器,用于实现轮播 private Timer timer = new Timer(); private MyHandler mHandler; public static class MyHandler extends Handler { private WeakReference<MainActivity> weakReference; public MyHandler(MainActivity activity) { weakReference = new WeakReference<>(activity); } @Override public void handleMessage(Message msg) { if (weakReference.get() != null) { index++; viewPager.setCurrentItem(index); } super.handleMessage(msg); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); addListener(); initRadioButton(imageIds.length);//注意这句和上面那句顺序不能写反,否则会出现第一个圆点无法显示选中状态 startSwitch(); } /** * 初始化控件 */ public void initView() { viewPager = (ViewPager) findViewById(R.id.viewpager); group = (RadioGroup) findViewById(R.id.group); } /** * 初始化数据 */ public void initData() { mList = new ArrayList<>(); viewPager.setAdapter(pagerAdapter); mHandler = new MyHandler(this); } /** * 添加监听 */ public void addListener() { viewPager.addOnPageChangeListener(onPageChangeListener); viewPager.setOnTouchListener(onTouchListener); } /** * 进行图片轮播 */ public void startSwitch() { //执行定时任务 timer.schedule(new TimerTask() { @Override public void run() { //首先判断是否需要轮播,是的话我们才发消息 if (isContinue) { if(imageIds.length!=1)//多于一张图片才轮播 mHandler.sendEmptyMessage(1); } } }, 3000, 3500);//延迟3秒,每隔3.5秒发一次消息; } /** * 根据图片个数初始化按钮 * @param length 图片所在集合长度 */ private void initRadioButton(int length) { for (int i = 0; i < length; i++) { ImageView imageview = new ImageView(this); if(length == 1){ imageview.setVisibility(View.GONE); return; } imageview.setImageResource(R.drawable.rg_selector);//设置背景选择器 imageview.setPadding(20, 0, 0, 0);//设置每个按钮之间的间距 //将按钮依次添加到RadioGroup中 group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); //默认选中第一个按钮,因为默认显示第一张图片 group.getChildAt(0).setEnabled(false); } } /** * 根据当前触摸事件判断是否要轮播 */ View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //手指按下和划动的时候停止图片的轮播 case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: isContinue = false; break; default: isContinue = true; } if(imageIds.length == 1){ return true;//1张图片不允许滑动 } return false;//注意这里只能返回false,如果返回true,Dwon就会消费掉事件,MOVE无法获得事件, // 导致图片无法滑动 } }; /** * 根据当前选中的页面设置按钮的选中 */ ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { index = position;//当前位置赋值给索引 setCurrentDot(index % imageIds.length);//因为只有四个按钮,所以我们在此要对长度区域,保证范围在0到4 } @Override public void onPageScrollStateChanged(int state) { } }; /** * 设置对应位置按钮的状态 * @param i 当前位置 */ private void setCurrentDot(int i) { if (group.getChildAt(i) != null) { group.getChildAt(i).setEnabled(false);//当前按钮选中,显示蓝色 } if (group.getChildAt(preIndex) != null) { group.getChildAt(preIndex).setEnabled(true);//上一个取消选中。显示灰色 preIndex = i;//当前位置变为上一个,继续下次轮播 } } PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { //返回一个比较大的值,目的是为了实现无限轮播 return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { position = position % imageIds.length;//因为position非常大,而我们需要的position不能大于图片集合长度 //所以在此取余 ImageView imageView = new ImageView(MainActivity.this); imageView.setImageResource(imageIds[position]); imageView.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(imageView); mList.add(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // 注意在此不要做任何操作,因为我们需要实现向左滑动,否则会产生IndexOutOfBoundsException container.removeView(mList.get(position)); } }; @Override protected void onDestroy() { super.onDestroy(); //页面销毁的时候取消定时器 if (timer != null) { preIndex = 0; index = 0; timer.cancel(); } } }

以上所述是小编给大家介绍的Android实现图片自动轮播并且支持手势左右无限滑动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-09-20 08:42:05

Android实现图片自动轮播并且支持手势左右无限滑动的相关文章

Android实现图片文字轮播特效_Android

本文实例讲解了Android实现图片文字轮播特效的详细代码,分享给大家供大家参考,具体内容如下 图片轮播是类似知乎日报上的一个轮播效果,如下图. 好了直接进入正题,首先是出示一下效果: MainActivity: import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService;

bootstrap如何实现图片自动轮播?bootstrap实现图片自动轮播的实例代码

bootstrap图片自动轮播效果图: 代码实现: <!DOCTYPE html> <htmllang="zh-CN"> <head>  <linkrel="stylesheet"href="bootstrap.min.css"/>  <linkrel="stylesheet"href="bootstrap-theme.min.css"/>  &l

bootstrap实现图片自动轮播_javascript技巧

bootstrap图片自动轮播效果图: 代码实现: <!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap-theme.min.css" />

js图片自动轮播代码分享(js图片轮播)_javascript技巧

1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

用box固定长宽实现图片自动轮播js代码_javascript技巧

这个小DEMO,主要用box固定长宽用于显示图片,将图片放入imagebox中,连接起来,每次换图片则将imagebox的style属性的margin-left改动,能形成轮播的效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

Bootstrap幻灯轮播如何支持触屏左右滑动手势?

最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/h

Android实现图片轮播效果的两种方法_Android

大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

JQuery 图片滚动轮播示例代码

 这篇文章主要介绍了JQuery实现图片滚动轮播,需要的朋友可以参考下 完整的项目在附件中   代码如下: <!DOCTYPE html>  <html>  <head>  <title>图片切换</title>  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>  <script ty

jquery实现定时自动轮播特效_jquery

这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的,也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序,建议想连贯学习的小伙伴把我之前的文章看一看,看完后再看这篇文章~~~~ 下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果:   对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版,免费的~~~你们懂得,就是卡卡的,真正的效果比这个速度慢,而且还是匀速,可以商用~~~所以上面的展示动画只能当做完成效果的参考.一.主体程序 <!DOCTYPE