欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

android使用ViewPager实现轮播效果

程序员文章站 2022-06-06 17:12:38
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,void,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,0,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, 0, 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实现轮播效果

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