首页 > 系统 > Android > 正文

android使用ViewPager实现轮播效果

2019-12-12 03:04:41
字体:
来源:转载
供稿:网友

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解析,需要用到联网操作,一定要写上上网的权限:

运行效果:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表