在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用VIEwPager,然后利用handler每隔一定的时间将VIEwPager的currentItem设置为当前item的position+1即可。先来看看效果图吧:
就是实现这样的一个轮播广告的效果。
因为这个是自己为了练习仿照某旅游类App做的,所以这里的数据是使用抓包工具抓取的,准备数据等工作就不在这里赘述了,反正数据的添加大体都是相同的。我的思路是这样的,从网络上实时的获取数据(当然你也可以将数据写死),然后通过网络工具类和Json解析类完成对数据的解析与封装从List集合。根据集合的长度来决定VIEwPager有多少page页面,下面的小圆点有多少。在函数中首先要设置一个boolean类型的标志位,用来判断是否停止轮播的(我们要在此页面不可见(onStop()方法内)的时候结束轮播),定义一个全局变量来记录当前的小圆点的位置。
private boolean isstop = false; //标志位,判断是否停止轮播
private int prevIoUsPointEnale = 0; //标记上一个小圆点的位置
然后我们就要为VIEwPager的轮播做准备了,比如说动态的根据数据条目来生成小圆点,定义适配器等,代码如下:
/** * banner的图片轮播事件初始化 */ private voID initCycleEvent() { //根据解析到的图片的个数,初始化小圆点 linearLayout.LayoutParams params; for (int i = 0; i < imageVIEwList.size(); i++) { VIEw dot = new VIEw(getActivity()); dot.setBackgroundResource(R.drawable.point_background); params = new linearLayout.LayoutParams(15,15); params.leftmargin = 10; dot.setLayoutParams(params); dot.setEnabled(false); ll_dot_group.addVIEw(dot); } //定义匿名适配器 adapter = 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,final int position) { imageVIEwList.get(position % imageVIEwList.size()).setonClickListener(new VIEw.OnClickListener() { @OverrIDe public voID onClick(VIEw v) { Intent intent = new Intent(getActivity(),WebVIEwActivity.class); intent.putExtra("url",bannerList.get(position % imageVIEwList.size()).getUrl()); startActivity(intent); } }); container.addVIEw(imageVIEwList.get(position % imageVIEwList.size())); return imageVIEwList.get(position % imageVIEwList.size()); } @OverrIDe public voID destroyItem(VIEwGroup container,int position,Object object) { container.removeVIEw(imageVIEwList.get(position % imageVIEwList.size())); } }; vp_banner.setAdapter(adapter); //初始化第一个page页和第一个小圆点 vp_banner.setCurrentItem(0); ll_dot_group.getChildAt(0).setEnabled(true); //为vIEwPager设置监听 vp_banner.addOnPagechangelistener(new MyPagechangelistener()); }
这里小圆点我们没有用图片,而是用自定义的<selector>和<shape>结合来展示出来的。
<?xml version="1.0" enCoding="utf-8"?><selector xmlns:androID="http://schemas.androID.com/apk/res/androID"> <item androID:drawable="@drawable/point_bg_enable" androID:state_enabled="true"/> <item androID:drawable="@drawable/point_bg_normal" androID:state_enabled="false"/></selector>
小圆点获取焦点的时候显示的是这个<shape>资源文件:
<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval" > <corners androID:radius="3dp" /> <solID androID:color="#AAFFFFFF" /></shape>
失去焦点的时候:
<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval" > <corners androID:radius="3dp" /> <solID androID:color="#55000000" /></shape>
适配器PagerAdapter中的getCount()方法,这个方法是返回要展示生成的VIEwPager的page页的个数的,instantiateItem()方法(加载page页)的执行次数是根据getCount()的返回值来决定的,所以我们这里因为要"无限"循环,所以将其设置的大一些,使用INTEGER.MAX整数的最大值来表示。imageVIEwList是存储我们要展示的imageVIEw的集合,正常情况下不需要轮播的时候,我们直接根据position来addVIEw()即可,但是因为要实现轮播,所以我们利用position和imageVIEwList集合的长度使用求余的方法来确定图片的下标
position % imageVIEwList.size()
下面是定义适配器和动态生成标识图片位置的小圆点的代码:
/** * banner的图片轮播事件初始化 */ private voID initCycleEvent() { //根据解析到的图片的个数,初始化小圆点 linearLayout.LayoutParams params; for (int i = 0; i < imageVIEwList.size(); i++) { VIEw dot = new VIEw(getActivity()); dot.setBackgroundResource(R.drawable.point_background); params = new linearLayout.LayoutParams(15,Object object) { container.removeVIEw(imageVIEwList.get(position % imageVIEwList.size())); } }; vp_banner.setAdapter(adapter); //初始化第一个page页和第一个小圆点 vp_banner.setCurrentItem(0); ll_dot_group.getChildAt(0).setEnabled(true); //为vIEwPager设置监听 vp_banner.addOnPagechangelistener(new MyPagechangelistener()); }
记住在addVIEw()和removeVIEw()的时候都是要根据求余的值来找到对应位置的应该展示的imageVIEw。初始化工作完成,下面应该是完成对轮播的 *** 作了,这里我们开启一个线程来每相隔一定的时间,获取当前VIEwPager的page页的position,然后+1,再设置当前page页下标为这个新的值即可:
/** * 开启轮播线程的方法 */ private voID startBannerScrollThread() { new Thread(new Runnable() { @OverrIDe public voID run() { //先判断是否停止轮播 while (!isstop) { SystemClock.sleep(2000); handler.post(new Runnable() { @OverrIDe public voID run() { int newindex = vp_banner.getCurrentItem() + 1; vp_banner.setCurrentItem(newindex); } }); } } }).start(); }
当然,因为每个图片展示给我们的时候,在图片下方的指示性小圆点要有相应的变化,所以在VIEwPager中我们还要处理它的滑动事件,所以我们自定义了一个类,实现了VIEwPager.OnPagechangelistener接口,在onPageSelected()方法中处理相应的事件:
/*** vIEwPager滑动监听事件 */ class MyPagechangelistener implements VIEwPager.OnPagechangelistener { @OverrIDe public voID onPageScrolled(int position,float positionOffset,int positionOffsetPixels) { } @OverrIDe public voID onPageSelected(int position) { //获取新的一页的位置 int newposition = position % imageVIEwList.size(); //将上一个小圆点的背景设为默认那个 ll_dot_group.getChildAt(prevIoUsPointEnale).setEnabled(false); //设置当前page页的小圆点样式 ll_dot_group.getChildAt(newposition).setEnabled(true); //把新的位置赋值给prevIoUsPointEnale prevIoUsPointEnale = newposition; } @OverrIDe public voID onPageScrollStateChanged(int state) { } }
关键的代码和思路就是这样的,这里还有一篇我参照的文章,写的不错,下面把链接放在这里:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
总结以上是内存溢出为你收集整理的Android ViewPager实现图片轮播效果全部内容,希望文章能够帮你解决Android ViewPager实现图片轮播效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)