android使用ViewPager实现轮播效果

概述ViewPager：一个可以实现视图左右滑动切换的控件。ViewPager的基本使用：ViewPager的视图需要通过PagerAdapter来实现显示。

VIEwPager：一个可以实现视图左右滑动切换的控件。

VIEwPager的基本使用：

VIEwPager的视图需要通过PagerAdapter来实现显示。

PagerAdapter的主要方法：

  ● getCount 视图的数量

  ● instantiateItem 添加视图

  ● destroyItem 销毁视图

  ● isVIEwFromObject 是否由对象创建视图

VIEwPager的常用方法：

setAdapter 设置适配器

addOnPagechangelistener 监听页面切换的状态

setCurrentItem 设置当前页面的索引

实现广告轮播

技术点分析：

1、网络连接

2、JsON解析

3、VIEwPager的初始化

4、图片的异步加载

5、圆点指示器的实现

使用selector+shape实现圆点图片

动态创建ImageVIEw添加到集合中，同时添加到布局中

在VIEwPager切换事件中，切换圆点状态

6、自动切换效果

使用Handler的post方法，定时执行代码
资源文件：
mydot.xml //创建圆点资源，放在drawable文件下

<?xml version="1.0" enCoding="utf-8"?> <selector xmlns:androID="http://schemas.androID.com/apk/res/androID" >  <item androID:state_enabled="true">   <shape androID:shape="oval">    <size androID:wIDth="5dp" androID:height="5dp"/>    <solID androID:color="#fff"/>   </shape>  </item>   <item androID:state_enabled="false">   <shape androID:shape="oval">    <size androID:wIDth="5dp" androID:height="5dp"/>    <solID androID:color="#8EE5EE"/>   </shape>  </item>  </selector> 

布局文件：

activity_main.xml

<relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:tools="http://schemas.androID.com/tools"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  tools:context=".MainActivity" >   <ListVIEw   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:ID="@+ID/lv_List" /> </relativeLayout> 

activity_banner.xml

<FrameLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:tools="http://schemas.androID.com/tools"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  tools:context=".MainActivity" >   <androID.support.v4.vIEw.VIEwPager   androID:ID="@+ID/vp_image"   androID:layout_wIDth="wrap_content"   androID:layout_height="150dp"   androID:layout_gravity="center" />  <linearLayout   androID:layout_wIDth="match_parent"   androID:layout_height="40dp"   androID:ID="@+ID/layout"   androID:layout_gravity="bottom"   androID:gravity="center"   androID:orIEntation="horizontal"   ></linearLayout> </FrameLayout> 

java代码

ImageLoader.java //该代码是通过URL获取图片资源

package cn.edu.huse.banner_re.util; import androID.graphics.Bitmap; import androID.graphics.BitmapFactory; import androID.os.AsyncTask; import java.io.IOException; import java.io.inputStream; import java.net.httpURLConnection; import java.net.MalformedURLException; import java.net.URL;  /**  * 图片加载的工具类  * @author xray  *  */ public class ImageLoader {   /**   * 图片加载完成的回调接口   * 添加URL参数，用于做图片错位判断   */  public interface OnImageLoadListener{   //完成图片加载   voID onImageLoadComplete(String url,Bitmap bitmap);  }    private OnImageLoadListener mListener;    /**   * 启动图片加载任务   * @param urlStr   * @param Listener   */  public voID loadImage(String urlStr,OnImageLoadListener Listener){   this.mListener = Listener;   new ImageLoadTask().execute(urlStr);  }    /**   * 图片加载任务   * @author xray   *   */  class ImageLoadTask extends AsyncTask<String,VoID,ImageLoadTask.UrlAndBitmap>{      @OverrIDe   protected UrlAndBitmap doInBackground(String... params) {        try {     //创建URL，指定图片地址     URL url = new URL(params[0]);     //打开连接获得httpURLConnection对象     httpURLConnection conn = (httpURLConnection) url.openConnection();     //获得文件输入流     inputStream stream = conn.getinputStream();     //把输入流转换为图片     Bitmap bmp = BitmapFactory.decodeStream(stream);     //关闭流     stream.close();     return new UrlAndBitmap(params[0],bmp);    } catch (MalformedURLException e) {     e.printstacktrace();    } catch (IOException e) {     e.printstacktrace();    }    return null;   }    //包装图片地址和图片   class UrlAndBitmap{    String url;    Bitmap bitmap;    public UrlAndBitmap(String url,Bitmap bitmap) {     this.url = url;     this.bitmap = bitmap;    }   }      @OverrIDe   protected voID onPostExecute(UrlAndBitmap result) {    //进行接口回调    if(mListener != null){     mListener.onImageLoadComplete(result.url,result.bitmap);    }   }  } } 

JsONLoader.java
//读取服务器Json

package cn.edu.huse.banner_re.util;  import androID.os.AsyncTask;  import java.io.IOException; import java.io.inputStream; import java.net.httpURLConnection; import java.net.MalformedURLException; import java.net.URL;  /**  * 读取服务器JsON的工具类  * @author xray  *  */ public class JsONLoader {    public interface OnjsONLoadListener{   voID onjsONLoadComplete(String Json);  }    private OnjsONLoadListener mListener;    public voID loadJsON(String urlStr,OnjsONLoadListener Listener){   this.mListener = Listener;   new JsONLoadTask().execute(urlStr);  }    class JsONLoadTask extends AsyncTask<String,String>{    @OverrIDe   protected String doInBackground(String... params) {    try {     URL url = new URL(params[0]);     httpURLConnection conn = (httpURLConnection) url.openConnection();     inputStream inputStream = conn.getinputStream();     byte[] buffer = new byte[1024];     int len = 0;     //StringBuffer 线程安全，性能低 VS StringBuilder 线程不安全，性能高     StringBuilder strB = new StringBuilder();     while((len = inputStream.read(buffer)) != -1){      //将字节码转换为String      String str = new String(buffer,len);      strB.append(str);     }     inputStream.close();     return strB.toString();    } catch (MalformedURLException e) {     e.printstacktrace();    } catch (IOException e) {     e.printstacktrace();    }    return null;   }    @OverrIDe   protected voID onPostExecute(String result) {    if(mListener != null){     mListener.onjsONLoadComplete(result);    }   }   } } 

MyVIEwPagerAdapter.java

package cn.edu.huse.banner_re.adapter;  import java.util.List;  import androID.support.v4.vIEw.PagerAdapter; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup; import androID.Widget.ImageVIEw;  /**  * 图片轮播的适配器  * @author Lenovo  *  */ public class MyVIEwPagerAdapter extends PagerAdapter {   private List<ImageVIEw> mData;    public MyVIEwPagerAdapter(List<ImageVIEw> mData) {   this.mData = mData;  }  //返回视图的数量  @OverrIDe  public int getCount() {   return mData.size();  }    @OverrIDe  public boolean isVIEwFromObject(VIEw arg0,Object arg1) {   return arg0 == arg1;  }   //销毁图片  @OverrIDe  public voID destroyItem(VIEwGroup container,int position,Object object) {   container.removeVIEw(mData.get(position));  }    //添加图片  @OverrIDe  public Object instantiateItem(VIEwGroup container,int position) {   container.addVIEw(mData.get(position));   return mData.get(position);  }   } 

MainActivity.java

package cn.edu.huse.banner_re;  import java.util.ArrayList; import java.util.List;  import org.Json.JsONArray; import org.Json.JsONObject;  import androID.app.Activity; import androID.graphics.Bitmap; import androID.os.Bundle; import androID.os.Handler; import androID.support.v4.vIEw.VIEwPager; import androID.support.v4.vIEw.VIEwPager.OnPagechangelistener; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.vIEw.VIEw.OnClickListener; import androID.Widget.ArrayAdapter; import androID.Widget.ImageVIEw; import androID.Widget.linearLayout; import androID.Widget.ListVIEw; import androID.Widget.Radiobutton; import cn.edu.huse.banner_re.adapter.MyVIEwPagerAdapter; import cn.edu.huse.banner_re.util.ImageLoader; import cn.edu.huse.banner_re.util.ImageLoader.OnImageLoadListener; import cn.edu.huse.banner_re.util.JsONLoader; import cn.edu.huse.banner_re.util.JsONLoader.OnjsONLoadListener;  public class MainActivity extends Activity implements OnClickListener{   public static final String URL_GIFT = "http://www.1688wan.com/mAJAX.action?method=getGiftList&pageno=1";  public static final String URL_BASE = "http://www.1688wan.com";  private ListVIEw mLv;  //放置圆点图片的布局  private linearLayout mLayout;  private VIEwPager mPager;  //保存vIEwpager上图片的集合  private List<ImageVIEw> mImageVIEws;  //保存圆点图片的集合  private List<ImageVIEw> mDotVIEws;  //当前图片  private ImageVIEw mDotVIEw;  //当前下标  private int mIndex;  private Handler mHandler = new Handler();   @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentVIEw(R.layout.activity_main);   //初始化vIEwpager   initVIEwPager();  }   private voID initVIEwPager() {   new JsONLoader().loadJsON(URL_GIFT,new OnjsONLoadListener() {    @OverrIDe    public voID onjsONLoadComplete(String Json) {     //得到图片的地址     List<String> List = josnPare(Json);     //初始化主控件     initVIEw();     //将图片显示到vIEwpager中     initimageVIEws(List);     //为VIEwPager设置适配器     mPager.setAdapter(new MyVIEwPagerAdapter(mImageVIEws));     //加载圆点图片     initDot(mImageVIEws.size());     //实现图片的轮播     mPager.postDelayed(new Runnable() {      @OverrIDe      public voID run() {       //下标自动++       mIndex++;       //当下标到最后时，就重新来过       if(mIndex >= mImageVIEws.size()){        mIndex = 0;       }       //设置图片       mPager.setCurrentItem(mIndex);       //重复调用       mHandler.postDelayed(this,1500);      }     },1500);     //添加页码滑动的监听，实现圆点图片的切换     mPager.setonPagechangelistener(new OnPagechangelistener() {            //页选中后调用      @OverrIDe      public voID onPageSelected(int arg0) {       //改变原来的圆点图片的状态       mDotVIEw.setEnabled(true);       //更新当前的圆点图片       mDotVIEw = mDotVIEws.get(arg0);       //将当前选中的圆点设为选中状态       mDotVIEw.setEnabled(false);       //更新下标       mIndex = arg0;      }       //滑动中途调用      @OverrIDe      public voID onPageScrolled(int arg0,float arg1,int arg2) {             }       //页面滑动状态修改      @OverrIDe      public voID onPageScrollStateChanged(int arg0) {             }     });    }   });  }    /**获取圆点图片函数   * @param count vIEwpager上图片的数量   */  private voID initDot(int count){   mDotVIEws = new ArrayList<ImageVIEw>();   linearLayout.LayoutParams params = new linearLayout.LayoutParams(     linearLayout.LayoutParams.WRAP_CONTENT,linearLayout.LayoutParams.WRAP_CONTENT);   //设置边距   params.setmargins(5,5,0);   for(int i = 0; i < count; i++){    ImageVIEw image = new ImageVIEw(this);    //设置圆点图片    image.setimageResource(R.drawable.mydot);    //设置图片的位置，方便后面的取值    image.setTag(i);    //设置监听    image.setonClickListener(this);    //添加到布局中    mLayout.addVIEw(image,params);    //将圆点图片保存到集合中    mDotVIEws.add(image);   }   mDotVIEw = mDotVIEws.get(0);   mDotVIEw.setEnabled(false);  }    /**   *显示图片的函数   */  private voID initimageVIEws(List<String> List) {   mImageVIEws = new ArrayList<ImageVIEw>();   for(String str : List){    final ImageVIEw imageVIEw = new ImageVIEw(this);    //设置默认图片    imageVIEw.setimageResource(R.drawable.ic_launcher);    new ImageLoader().loadImage(URL_BASE+str,new OnImageLoadListener() {          @OverrIDe     public voID onImageLoadComplete(String url,Bitmap bitmap) {      if(bitmap != null){       imageVIEw.setimageBitmap(bitmap);      }     }    });    //将ImageVIEw保存到集合中    mImageVIEws.add(imageVIEw);   }     }  /**   * JsON解析获取图片的地址   * @param url   * @return   */  private List<String> josnPare(String url){   List<String> List = new ArrayList<String>();   try {    JsONObject jobj = new JsONObject(url);    JsONArray array = jobj.getJsONArray("ad");    for(int i = 0; i < array.length(); i++){     JsONObject obj = (JsONObject) array.get(i);     List.add(obj.getString("iconurl"));    }   } catch (Exception e) {    e.printstacktrace();   }   return List;  }    /**   * 初始化控件   */  private voID initVIEw() {   //找到控件   mLv = (ListVIEw) findVIEwByID(R.ID.lv_List);      VIEw vIEw = LayoutInflater.from(this).inflate(R.layout.activity_banner,null);   mPager = (VIEwPager)vIEw.findVIEwByID(R.ID.vp_image);   //圆点图片布局   mLayout = (linearLayout)vIEw.findVIEwByID(R.ID.layout);   //模拟数据   List<String> mList = new ArrayList<String>();   for(int i = 0; i < 20; i++){    mList.add("条目--"+i);   }   //创建适配器   ArrayAdapter<String> mAdapter = new ArrayAdapter<String>(this,androID.R.layout.simple_List_item_1,androID.R.ID.text1,mList);   //设置头部视图   mLv.addheaderVIEw(vIEw);   //设置适配器   mLv.setAdapter(mAdapter);   /*//圆点图片布局   mLayout = (linearLayout)findVIEwByID(R.ID.layout);*/  }      /**   * 圆点图片的监听事件   */  @OverrIDe  public voID onClick(VIEw arg0) {   //获取该圆点图片的位置   int index = Integer.parseInt(arg0.getTag().toString());   //将vIEwpager的图片显示成下标为index的图片   mPager.setCurrentItem(index);   //将原来的设置成默认值   mDotVIEw.setEnabled(true);   //保存新的值   mDotVIEw = (ImageVIEw) arg0;   //将新的值改变成false   mDotVIEw.setEnabled(false);   //更新下标   mIndex = index;  }  } 

注意：因为这里用到了Json解析，需要用到联网 *** 作，一定要写上上网的权限：

运行效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的android使用ViewPager实现轮播效果全部内容，希望文章能够帮你解决android使用ViewPager实现轮播效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。