android使用ViewPager實(shí)現(xiàn)輪播效果

更新時(shí)間：2017年04月17日 11:49:37 作者：ITqingliang

這篇文章主要為大家詳細(xì)介紹了android使用ViewPager實(shí)現(xiàn)輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

ViewPager：一個(gè)可以實(shí)現(xiàn)視圖左右滑動(dòng)切換的控件。

ViewPager的基本使用：

ViewPager的視圖需要通過PagerAdapter來(lái)實(shí)現(xiàn)顯示。

PagerAdapter的主要方法：

● getCount 視圖的數(shù)量

● instantiateItem 添加視圖

● destroyItem 銷毀視圖

● isViewFromObject 是否由對(duì)象創(chuàng)建視圖

ViewPager的常用方法：

setAdapter 設(shè)置適配器

addOnPageChangeListener 監(jiān)聽頁(yè)面切換的狀態(tài)

setCurrentItem 設(shè)置當(dāng)前頁(yè)面的索引

實(shí)現(xiàn)廣告輪播

技術(shù)點(diǎn)分析：

1、網(wǎng)絡(luò)連接

2、JSON解析

3、ViewPager的初始化

4、圖片的異步加載

5、圓點(diǎn)指示器的實(shí)現(xiàn)

使用selector+shape實(shí)現(xiàn)圓點(diǎn)圖片

動(dòng)態(tài)創(chuàng)建ImageView添加到集合中，同時(shí)添加到布局中

在ViewPager切換事件中，切換圓點(diǎn)狀態(tài)

6、自動(dòng)切換效果

使用Handler的post方法，定時(shí)執(zhí)行代碼
資源文件：
mydot.xml //創(chuàng)建圓點(diǎn)資源，放在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 { 
 
 /** 
  * 圖片加載完成的回調(diào)接口 
  * 添加URL參數(shù)，用于做圖片錯(cuò)位判斷 
  */ 
 public interface OnImageLoadListener{ 
  //完成圖片加載 
  void onImageLoadComplete(String url, Bitmap bitmap); 
 } 
  
 private OnImageLoadListener mListener; 
  
 /** 
  * 啟動(dòng)圖片加載任務(wù) 
  * @param urlStr 
  * @param listener 
  */ 
 public void loadImage(String urlStr,OnImageLoadListener listener){ 
  this.mListener = listener; 
  new ImageLoadTask().execute(urlStr); 
 } 
  
 /** 
  * 圖片加載任務(wù) 
  * @author xray 
  * 
  */ 
 class ImageLoadTask extends AsyncTask<String,Void,ImageLoadTask.UrlAndBitmap>{ 
   
  @Override 
  protected UrlAndBitmap doInBackground(String... params) { 
    
   try { 
    //創(chuàng)建URL，指定圖片地址 
    URL url = new URL(params[0]); 
    //打開連接獲得HttpURLConnection對(duì)象 
    HttpURLConnection conn = (HttpURLConnection) url.openConnection(); 
    //獲得文件輸入流 
    InputStream stream = conn.getInputStream(); 
    //把輸入流轉(zhuǎn)換為圖片 
    Bitmap bmp = BitmapFactory.decodeStream(stream); 
    //關(guān)閉流 
    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) { 
   //進(jìn)行接口回調(diào) 
   if(mListener != null){ 
    mListener.onImageLoadComplete(result.url,result.bitmap); 
   } 
  } 
 } 
}

JSONLoader.java
//讀取服務(wù)器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; 
 
/** 
 * 讀取服務(wù)器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){ 
     //將字節(jié)碼轉(zhuǎn)換為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; 
 } 
 //返回視圖的數(shù)量 
 @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; 
 //放置圓點(diǎn)圖片的布局 
 private LinearLayout mLayout; 
 private ViewPager mPager; 
 //保存viewpager上圖片的集合 
 private List<ImageView> mImageViews; 
 //保存圓點(diǎn)圖片的集合 
 private List<ImageView> mDotViews; 
 //當(dāng)前圖片 
 private ImageView mDotView; 
 //當(dāng)前下標(biāo) 
 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設(shè)置適配器 
    mPager.setAdapter(new MyViewPagerAdapter(mImageViews)); 
    //加載圓點(diǎn)圖片 
    initDot(mImageViews.size()); 
    //實(shí)現(xiàn)圖片的輪播 
    mPager.postDelayed(new Runnable() { 
     @Override 
     public void run() { 
      //下標(biāo)自動(dòng)++ 
      mIndex++; 
      //當(dāng)下標(biāo)到最后時(shí)，就重新來(lái)過 
      if(mIndex >= mImageViews.size()){ 
       mIndex = 0; 
      } 
      //設(shè)置圖片 
      mPager.setCurrentItem(mIndex); 
      //重復(fù)調(diào)用 
      mHandler.postDelayed(this, 1500); 
     } 
    }, 1500); 
    //添加頁(yè)碼滑動(dòng)的監(jiān)聽，實(shí)現(xiàn)圓點(diǎn)圖片的切換 
    mPager.setOnPageChangeListener(new OnPageChangeListener() { 
      
     //頁(yè)選中后調(diào)用 
     @Override 
     public void onPageSelected(int arg0) { 
      //改變?cè)瓉?lái)的圓點(diǎn)圖片的狀態(tài) 
      mDotView.setEnabled(true); 
      //更新當(dāng)前的圓點(diǎn)圖片 
      mDotView = mDotViews.get(arg0); 
      //將當(dāng)前選中的圓點(diǎn)設(shè)為選中狀態(tài) 
      mDotView.setEnabled(false); 
      //更新下標(biāo) 
      mIndex = arg0; 
     } 
      //滑動(dòng)中途調(diào)用 
     @Override 
     public void onPageScrolled(int arg0, float arg1, int arg2) { 
       
     } 
      //頁(yè)面滑動(dòng)狀態(tài)修改 
     @Override 
     public void onPageScrollStateChanged(int arg0) { 
       
     } 
    }); 
   } 
  }); 
 } 
  
 /**獲取圓點(diǎn)圖片函數(shù) 
  * @param count viewpager上圖片的數(shù)量 
  */ 
 private void initDot(int count){ 
  mDotViews = new ArrayList<ImageView>(); 
  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( 
    LinearLayout.LayoutParams.WRAP_CONTENT, 
    LinearLayout.LayoutParams.WRAP_CONTENT); 
  //設(shè)置邊距 
  params.setMargins(5, 0, 5, 0); 
  for(int i = 0; i < count; i++){ 
   ImageView image = new ImageView(this); 
   //設(shè)置圓點(diǎn)圖片 
   image.setImageResource(R.drawable.mydot); 
   //設(shè)置圖片的位置，方便后面的取值 
   image.setTag(i); 
   //設(shè)置監(jiān)聽 
   image.setOnClickListener(this); 
   //添加到布局中 
   mLayout.addView(image, params); 
   //將圓點(diǎn)圖片保存到集合中 
   mDotViews.add(image); 
  } 
  mDotView = mDotViews.get(0); 
  mDotView.setEnabled(false); 
 } 
  
 /** 
  *顯示圖片的函數(shù) 
  */ 
 private void initImageViews(List<String> list) { 
  mImageViews = new ArrayList<ImageView>(); 
  for(String str : list){ 
   final ImageView imageView = new ImageView(this); 
   //設(shè)置默認(rèn)圖片 
   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); 
  //圓點(diǎn)圖片布局 
  mLayout = (LinearLayout)view.findViewById(R.id.layout); 
  //模擬數(shù)據(jù) 
  List<String> mList = new ArrayList<String>(); 
  for(int i = 0; i < 20; i++){ 
   mList.add("條目--"+i); 
  } 
  //創(chuàng)建適配器 
  ArrayAdapter<String> mAdapter = new ArrayAdapter<String>(this, 
    android.R.layout.simple_list_item_1, 
    android.R.id.text1, 
    mList); 
  //設(shè)置頭部視圖 
  mLv.addHeaderView(view); 
  //設(shè)置適配器 
  mLv.setAdapter(mAdapter); 
  /*//圓點(diǎn)圖片布局 
  mLayout = (LinearLayout)findViewById(R.id.layout);*/ 
 } 
  
  
 /** 
  * 圓點(diǎn)圖片的監(jiān)聽事件 
  */ 
 @Override 
 public void onClick(View arg0) { 
  //獲取該圓點(diǎn)圖片的位置 
  int index = Integer.parseInt(arg0.getTag().toString()); 
  //將viewpager的圖片顯示成下標(biāo)為index的圖片 
  mPager.setCurrentItem(index); 
  //將原來(lái)的設(shè)置成默認(rèn)值 
  mDotView.setEnabled(true); 
  //保存新的值 
  mDotView = (ImageView) arg0; 
  //將新的值改變成false 
  mDotView.setEnabled(false); 
  //更新下標(biāo) 
  mIndex = index; 
 } 
 
}

注意：因?yàn)檫@里用到了json解析，需要用到聯(lián)網(wǎng)操作，一定要寫上上網(wǎng)的權(quán)限：