ViewPager实现轮播广告图
轮播广告在现在的应用中比较常见，下面就来实现下该功能(文章参考了网上流传的黑马的视频教程)先来看下具体的实现效果： 实现思路： 1.为ViewPager设置数据源，实现ViewPager的滚动 2.将圆点指示器与ViewPager的页面对应起来 3.实现左右滑动均能无限循环 4.实现自动播放 5.实现当手指滑动的时候取消自动播发 首先需要说明的就是在这篇文章里并没有同时实现左右循环滑动和手指触碰自动停止的功能，这个问题还没有解决，留待以后再解决，也希望有知道的朋友在下面留言，先谢谢拉。 1.首先我们定义布局文件，用来显示Banner 这里我们采用对的是相对布局RelativeLayout，当然也可以采用帧布局FrameLayout。布局文件activity_mian.xml代码： <?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.qc.admin.mylunbotu.MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="160dp"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:layout_alignParentBottom="true" android:background="#66000000" android:gravity="center_horizontal" android:orientation="vertical" android:padding="5dp"> <TextView android:id="@+id/tv_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxLines="1" android:text="这是图片描述" android:textColor="@android:color/white"/> <!--用来填充圆点指示器的容器--> <LinearLayout android:id="@+id/point_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:orientation="horizontal"/> </LinearLayout> </RelativeLayout> </RelativeLayout> 2.初始化圆点指示器 这里我们提供的图片数据和显示的文本数据都是静态的，直接从数组资源中获得的，如： //图片资源id数组 imageResIds=newint[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e}; //文本描述 contentDescs=newString[]{ "巩俐不低俗，我就不能低俗", "扑树又回来啦！再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀" }; 我们可以自己定义两个shape，来显示圆点指示器的两种不同显示状态，然后再定义一个selector，将它设置为控件的背景(ImageView)，通过其setEnable(Boolean bool)方法可以自动的决定使用哪个图片。代码分别如下： a.正常状态下，灰色圆点，point_normal.xml： <?xmlversion="1.0"encoding="utf-8"?> <shapexmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="5dp" android:height="5dp"/> <solidandroid:color="#44000000"/> </shape> b.点击状态下，白色圆点 point_pressed.xml: <?xmlversion="1.0"encoding="utf-8"?> <shapexmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <sizeandroid:width="5dp"android:height="5dp"/> <solidandroid:color="#FFFFFFFF"/> </shape> c.设置背景时的xml文件， point_bg.xml: <selectorxmlns:android="http://schemas.android.com/apk/res/android"> <itemandroid:state_enabled="true"android:drawable="@drawable/point_pressed"/> <itemandroid:state_enabled="false"android:drawable="@drawable/point_normal"/> </selector> 具体代码： privatevoidinitData(){ //图片资源id数组 imageResIds=newint[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e}; //文本描述 contentDescs=newString[]{ "巩俐不低俗，我就不能低俗", "扑树又回来啦！再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀" }; imageViewList=newArrayList<>(); LinearLayout.LayoutParamsmParams=newLinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); mParams.leftMargin=15; mParams.topMargin=2; ImageViewimageView; ImageViewpointView; //初始化要展示的ImageView,并添加圆点指示器 for(inti=0;i<imageResIds.length;i++){ //初始化图片 imageView=newImageView(this); imageView.setBackgroundResource(imageResIds[i]); imageViewList.add(imageView); //初始化指示器 pointView=newImageView(this); pointView.setBackgroundResource(R.drawable.point_bg); pointView.setLayoutParams(mParams); if(i==0){ textView.setText(contentDescs[0]); pointView.setEnabled(true); }else{ pointView.setEnabled(false); } mPointsLayout.addView(pointView); } } 注意：创建shape文件的时候，如果找不到，可以切换到project目录下，在drawable目录下右键，new->Drawable resource file ,得到如下界面： 将selector直接改为shape即可 3.为ViewPager设置适配器 classMyAdapterextendsPagerAdapter{ //1.返回条目的总数 @Override publicintgetCount(){ //returnimageViewList.size(); returnInteger.MAX_VALUE; } //2.返回要显示的条目，并创建条目 @Override publicObjectinstantiateItem(ViewGroupcontainer,intposition){ //container:容器，其实也就是ViewPager //position:当前要显示的条目的位置 intnewPosition=position%imageViewList.size(); ImageViewimageView=imageViewList.get(newPosition); //a.将View对象添加到container容器中 container.addView(imageView); //b.把View对象返回给框架，适配器 returnimageView; } //3.销毁条目，其实就是将要销毁的对象object从container中移除出去就好了 @Override publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){ container.removeView((View)object); } //4.指定复用的判断逻辑（一般为固定写法） @Override publicbooleanisViewFromObject(Viewview,Objectobject){ //当滑动到新的条目之后，又返回回来，view是否可以被复用 returnview==object; } } 在这里我们实现的是伪无限循环，其实就是将我们的第一项设置为一个很大的数的中间位置(Integer.MAX_VALUE)，这样当我们向左向右滑动的时候，将返回的position对数据的大小进行取模运算%，根据相应的位置设置相应的图片或者文字即可。这样就实现了向右向左都是无限循环了。 4.实现自动播放 我们当然可以直接开启一个线程，在里面设置ViewPager的当前项，但是直接使用Handler更便于进行控机制，因为我们可以为ViewPager设置滚动监听器。自动播放控制代码： privatevoidstartRun(){ mHandler=newHandler(); mHandler.postDelayed(mTaskRunnable,delayMillis); } //该线程一直运行着，知道activity被销毁，此时将isActivityAlive设置为false finalRunnablemTaskRunnable=newRunnable(){ @Override publicvoidrun(){ //如果activity未被销毁，就一直执行该线程 //在ViewPager的OnPageChangeListener方法中决定是否将isAutoRun置反 if(isActivityAlive){ if(isAutoRun){ viewPager.setCurrentItem((viewPager.getCurrentItem()+1)%imageViewList.size()); mHandler.postDelayed(mTaskRunnable,delayMillis); }else{ mHandler.postDelayed(mTaskRunnable,delayMillis); } } } }; 为ViewPager设置滚动监听器，这里我们直接让当前类实现ViewPager.OnPageChangeListener接口，实现其中的抽象方法： @Override publicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels){ } @Override publicvoidonPageSelected(intposition){ intnewPosition=position%imageViewList.size(); textView.setText(contentDescs[newPosition]); //先将上一个置位false，将当前位置置位true，这样可以使得初始化的时候就在第一个位置 //（因为previousSelectedItem的未赋值时候的初始值默认为0） mPointsLayout.getChildAt(previousSelectedItem).setEnabled(false); mPointsLayout.getChildAt(newPosition).setEnabled(true); previousSelectedItem=newPosition; } @Override publicvoidonPageScrollStateChanged(intstate){ switch(state){ //静止状态 caseSCROLL_STATE_IDLE: isAutoRun=true; break; //拖拽中 caseSCROLL_STATE_DRAGGING: isAutoRun=false; break; //拖拽后松手，自动回到最终位置的过程 caseSCROLL_STATE_SETTLING: isAutoRun=true; break; } } 这里面我们就实现了当手指滑动的时候停止自动播放，当手指抬起的时候又开始了自动播放。但是，注意，你以为这些代码组合起来就能实现循环滚动的同时还能手指控制是否自动播放?好吧，我当时也是这样以为的，运行后会报错： java.lang.IllegalStateException:Thespecifiedchildalreadyhasaparent.YoumustcallremoveView()onthechild'sparentfirst. 意思是我们待加入的子视图已经有了一个父视图，需要调用它的父视图的removeView()方法来将其移除，之后再添加，然而事实证明并没有什么卵用。留待以后解决吧，在只能牺牲掉无线循环了，这里我们需要将getCount方法中的返回值改成我们数据的大小就好了： @Override publicintgetCount(){ returnimageViewList.size(); //returnInteger.MAX_VALUE; } 然后将之前设置的默认的第一项： privatevoidinitAdapter(){ intfirstPosition=Integer.MAX_VALUE/2-(Integer.MAX_VALUE/2%imageViewList.size()); //viewPager.setOffscreenPageLimit(imageViewList.size()); viewPager.setAdapter(newMyAdapter()); //设置从中间的某个位置开始滑动，从而能够实现向左向右的循环滑动 viewPager.setCurrentItem(firstPosition); } 改为： privatevoidinitAdapter(){ viewPager.setAdapter(newMyAdapter()); //设置从中间的某个位置开始滑动，从而能够实现向左向右的循环滑动 viewPager.setCurrentItem(0); } 可能说了这么多，看的都混了，在最后就贴一下完整的源码吧(支持自动播放、手指控制，但是不支持左右无限循环)。 packagecom.qc.admin.mylunbotu; importandroid.os.Bundle; importandroid.os.Handler; importandroid.support.v4.view.PagerAdapter; importandroid.support.v4.view.ViewPager; importandroid.support.v7.app.AppCompatActivity; importandroid.view.View; importandroid.view.ViewGroup; importandroid.widget.ImageView; importandroid.widget.LinearLayout; importandroid.widget.TextView; importjava.util.ArrayList; importjava.util.List; importstaticandroid.support.v4.view.ViewPager.SCROLL_STATE_DRAGGING; importstaticandroid.support.v4.view.ViewPager.SCROLL_STATE_IDLE; importstaticandroid.support.v4.view.ViewPager.SCROLL_STATE_SETTLING; publicclassMainActivityextendsAppCompatActivityimplementsViewPager.OnPageChangeListener{ privateViewPagerviewPager; privateint[]imageResIds; privateList<ImageView>imageViewList; privateLinearLayoutmPointsLayout; privateString[]contentDescs; privateintpreviousSelectedItem; privateTextViewtextView; privateHandlermHandler; booleanisAutoRun=true; booleanisActivityAlive=true; privateintdelayMillis=2000; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化视图 initViews(); //初始化数据 initData(); //初始化适配器 initAdapter(); //开始自动播放 startRun(); } privatevoidstartRun(){ mHandler=newHandler(); mHandler.postDelayed(mTaskRunnable,delayMillis); } //该线程一直运行着，知道activity被销毁，此时将isActivityAlive设置为false finalRunnablemTaskRunnable=newRunnable(){ @Override publicvoidrun(){ //如果activity未被销毁，就一直执行该线程 //在ViewPager的OnPageChangeListener方法中决定是否将isAutoRun置反 if(isActivityAlive){ if(isAutoRun){ viewPager.setCurrentItem((viewPager.getCurrentItem()+1)%imageViewList.size()); mHandler.postDelayed(mTaskRunnable,delayMillis); }else{ mHandler.postDelayed(mTaskRunnable,delayMillis); } } } }; privatevoidinitAdapter(){ //intfirstPosition=Integer.MAX_VALUE/2-(Integer.MAX_VALUE/2%imageViewList.size()); //viewPager.setOffscreenPageLimit(imageViewList.size()); viewPager.setAdapter(newMyAdapter()); //设置从中间的某个位置开始滑动，从而能够实现向左向右的循环滑动 //viewPager.setCurrentItem(firstPosition); viewPager.setCurrentItem(0); } privatevoidinitData(){ //图片资源id数组 imageResIds=newint[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e}; //文本描述 contentDescs=newString[]{ "巩俐不低俗，我就不能低俗", "扑树又回来啦！再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀" }; imageViewList=newArrayList<>(); LinearLayout.LayoutParamsmParams=newLinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); mParams.leftMargin=15; mParams.topMargin=2; ImageViewimageView; ImageViewpointView; //初始化要展示的ImageView,并添加圆点指示器 for(inti=0;i<imageResIds.length;i++){ //初始化图片 imageView=newImageView(this); imageView.setBackgroundResource(imageResIds[i]); imageViewList.add(imageView); //初始化指示器 pointView=newImageView(this); pointView.setBackgroundResource(R.drawable.point_bg); pointView.setLayoutParams(mParams); if(i==0){ textView.setText(contentDescs[0]); pointView.setEnabled(true); }else{ pointView.setEnabled(false); } mPointsLayout.addView(pointView); } } privatevoidinitViews(){ viewPager=(ViewPager)findViewById(R.id.viewpager); viewPager.addOnPageChangeListener(this); textView=(TextView)findViewById(R.id.tv_desc); //用来添加圆点指示器 mPointsLayout=(LinearLayout)findViewById(R.id.point_container); } @Override publicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels){ } @Override publicvoidonPageSelected(intposition){ intnewPosition=position%imageViewList.size(); textView.setText(contentDescs[newPosition]); //先将上一个置位false，将当前位置置位true，这样可以使得初始化的时候就在第一个位置 //（因为previousSelectedItem的未赋值时候的初始值默认为0） mPointsLayout.getChildAt(previousSelectedItem).setEnabled(false); mPointsLayout.getChildAt(newPosition).setEnabled(true); previousSelectedItem=newPosition; } @Override publicvoidonPageScrollStateChanged(intstate){ switch(state){ //静止状态 caseSCROLL_STATE_IDLE: isAutoRun=true; break; //拖拽中 caseSCROLL_STATE_DRAGGING: isAutoRun=false; break; //拖拽后松手，自动回到最终位置的过程 caseSCROLL_STATE_SETTLING: isAutoRun=true; break; } } //创建一个MyAdapter类，继承自PagerAdapter来为ViewPager设置适配器 classMyAdapterextendsPagerAdapter{ //1.返回条目的总数 @Override publicintgetCount(){ returnimageViewList.size(); //returnInteger.MAX_VALUE; } //2.返回要显示的条目，并创建条目 @Override publicObjectinstantiateItem(ViewGroupcontainer,intposition){ //container:容器，其实也就是ViewPager //position:当前要显示的条目的位置 intnewPosition=position%imageViewList.size(); ImageViewimageView=imageViewList.get(newPosition); //a.将View对象添加到container容器中 container.addView(imageView); //b.把View对象返回给框架，适配器 returnimageView; } //3.销毁条目，其实就是将要销毁的对象object从container中移除出去就好了 @Override publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){ container.removeView((View)object); } //4.指定复用的判断逻辑（一般为固定写法） @Override publicbooleanisViewFromObject(Viewview,Objectobject){ //当滑动到新的条目之后，又返回回来，view是否可以被复用 returnview==object; } } @Override protectedvoidonDestroy(){ isActivityAlive=false; super.onDestroy(); } } 作者：i_seek_u 来源：51CTO
