前言：經(jīng)常會(huì)看到有一些app的banner界面可以實(shí)現(xiàn)循環(huán)播放多個(gè)廣告圖片和手動(dòng)滑動(dòng)循環(huán)。本以為單純的ViewPager就可以實(shí)現(xiàn)這些功能。但是蛋疼的事情來了，ViewPager并不支持循環(huán)翻頁。所以要實(shí)現(xiàn)循環(huán)還得需要自己去動(dòng)手。自己在網(wǎng)上也找了些例子，本博文的Demo是結(jié)合自己找到的一些相關(guān)例子的基礎(chǔ)上去改造，也希望對(duì)讀者有用。

? Demo實(shí)現(xiàn)的效果圖如下：

??

? ?

? ?Demo代碼：

? ? ?工程目錄如下圖：

??

? ? ? 廢話不多說，上代碼。

? ? 1.主Activity代碼如下：

[java] view plaincopy

package?com.stevenhu.android.phone.ui;??

??

import?java.util.ArrayList;??

import?java.util.List;??

??

import?com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;??

import?com.nostra13.universalimageloader.core.DisplayImageOptions;??

import?com.nostra13.universalimageloader.core.ImageLoader;??

import?com.nostra13.universalimageloader.core.ImageLoaderConfiguration;??

import?com.nostra13.universalimageloader.core.assist.QueueProcessingType;??

import?com.stevenhu.android.phone.bean.ADInfo;??

import?com.stevenhu.android.phone.utils.ViewFactory;??

??

import?android.annotation.SuppressLint;??

import?android.app.Activity;??

import?android.os.Bundle;??

import?android.view.View;??

import?android.widget.ImageView;??

import?android.widget.Toast;??

import?cn.androiddevelop.cycleviewpager.lib.CycleViewPager;??

import?cn.androiddevelop.cycleviewpager.lib.CycleViewPager.ImageCycleViewListener;??

/**?

?*?描述：主頁?

?*?

?*?@author?stevenhu?

?*?@version?2015年5月8日?上午10:47:37?

?*/??

public?class?MainActivity?extends?Activity?{??

??

????private?List<ImageView>?views?=?new?ArrayList<ImageView>();??

????private?List<ADInfo>?infos?=?new?ArrayList<ADInfo>();??

????private?CycleViewPager?cycleViewPager;??

??????

????private?String[]?imageUrls?=?{"http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg",??

????????????"http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg",??

????????????"http://pic18.nipic.com/20111215/577405_080531548148_2.jpg",??

????????????"http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg",??

????????????"http://pic.58pic.com/58pic/12/64/27/55U58PICrdX.jpg"};??

??????

????@Override??

????protected?void?onCreate(Bundle?savedInstanceState)?{??

????????super.onCreate(savedInstanceState);??

????????setContentView(R.layout.ui_main);??

????????configImageLoader();??

????????initialize();??

????}??

??????

????@SuppressLint("NewApi")??

????private?void?initialize()?{??

??????????

????????cycleViewPager?=?(CycleViewPager)?getFragmentManager()??

????????????????.findFragmentById(R.id.fragment_cycle_viewpager_content);??

??????????

????????for(int?i?=?0;?i?<?imageUrls.length;?i?++){??

????????????ADInfo?info?=?new?ADInfo();??

????????????info.setUrl(imageUrls[i]);??

????????????info.setContent("圖片-->"?+?i?);??

????????????infos.add(info);??

????????}??

??????????

????????//?將最后一個(gè)ImageView添加進(jìn)來??

????????views.add(ViewFactory.getImageView(this,?infos.get(infos.size()?-?1).getUrl()));??

????????for?(int?i?=?0;?i?<?infos.size();?i++)?{??

????????????views.add(ViewFactory.getImageView(this,?infos.get(i).getUrl()));??

????????}??

????????//?將第一個(gè)ImageView添加進(jìn)來??

????????views.add(ViewFactory.getImageView(this,?infos.get(0).getUrl()));??

??????????

????????//?設(shè)置循環(huán)，在調(diào)用setData方法前調(diào)用??

????????cycleViewPager.setCycle(true);??

??

????????//?在加載數(shù)據(jù)前設(shè)置是否循環(huán)??

????????cycleViewPager.setData(views,?infos,?mAdCycleViewListener);??

????????//設(shè)置輪播??

????????cycleViewPager.setWheel(true);??

??

????????//?設(shè)置輪播時(shí)間，默認(rèn)5000ms??

????????cycleViewPager.setTime(2000);??

????????//設(shè)置圓點(diǎn)指示圖標(biāo)組居中顯示，默認(rèn)靠右??

????????cycleViewPager.setIndicatorCenter();??

????}??

??????

????private?ImageCycleViewListener?mAdCycleViewListener?=?new?ImageCycleViewListener()?{??

??

????????@Override??

????????public?void?onImageClick(ADInfo?info,?int?position,?View?imageView)?{??

????????????if?(cycleViewPager.isCycle())?{??

????????????????position?=?position?-?1;??

????????????????Toast.makeText(MainActivity.this,??

????????????????????????"position-->"?+?info.getContent(),?Toast.LENGTH_SHORT)??

????????????????????????.show();??

????????????}??

??????????????

????????}??

??

????};??

??????

????/**?

?????*?配置ImageLoder?

?????*/??

????private?void?configImageLoader()?{??

????????//?初始化ImageLoader??

????????@SuppressWarnings("deprecation")??

????????DisplayImageOptions?options?=?new?DisplayImageOptions.Builder().showStubImage(R.drawable.icon_stub)?//?設(shè)置圖片下載期間顯示的圖片??

????????????????.showImageForEmptyUri(R.drawable.icon_empty)?//?設(shè)置圖片Uri為空或是錯(cuò)誤的時(shí)候顯示的圖片??

????????????????.showImageOnFail(R.drawable.icon_error)?//?設(shè)置圖片加載或解碼過程中發(fā)生錯(cuò)誤顯示的圖片??

????????????????.cacheInMemory(true)?//?設(shè)置下載的圖片是否緩存在內(nèi)存中??

????????????????.cacheOnDisc(true)?//?設(shè)置下載的圖片是否緩存在SD卡中??

????????????????//?.displayer(new?RoundedBitmapDisplayer(20))?//?設(shè)置成圓角圖片??

????????????????.build();?//?創(chuàng)建配置過得DisplayImageOption對(duì)象??

??

????????ImageLoaderConfiguration?config?=?new?ImageLoaderConfiguration.Builder(getApplicationContext()).defaultDisplayImageOptions(options)??

????????????????.threadPriority(Thread.NORM_PRIORITY?-?2).denyCacheImageMultipleSizesInMemory()??

????????????????.discCacheFileNameGenerator(new?Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO).build();??

????????ImageLoader.getInstance().init(config);???????

????}??

}??

? ?2.主文件ui_main.xml代碼如下： [html] view plaincopy

<?xml?version="1.0"?encoding="utf-8"?>??

<LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??

????android:layout_width="match_parent"??

????android:layout_height="match_parent"??

????android:orientation="vertical"?>??

??????

??

????<fragment??

????????android:id="@+id/fragment_cycle_viewpager_content"??

????????android:name="cn.androiddevelop.cycleviewpager.lib.CycleViewPager"??

????????android:layout_width="match_parent"??

????????android:layout_height="180dip"?/>??

???????

???????

????<RelativeLayout???

????????android:layout_width="fill_parent"??

????????android:layout_height="0dip"??

????????android:layout_weight="1">??

??????????

????????<TextView???

????????????android:layout_width="wrap_content"??

????????????android:layout_height="wrap_content"??

????????????android:layout_centerInParent="true"??

????????????android:text="content"/>??

????</RelativeLayout>??

??????

</LinearLayout>??

? ?3.CycleViewPager類代碼如下： [java] view plaincopy

package?cn.androiddevelop.cycleviewpager.lib;??

??

import?java.util.ArrayList;??

import?java.util.List;??

??

import?android.annotation.SuppressLint;??

import?android.app.Fragment;??

import?android.os.Bundle;??

import?android.os.Message;??

import?android.support.v4.view.PagerAdapter;??

import?android.support.v4.view.ViewPager.OnPageChangeListener;??

import?android.view.LayoutInflater;??

import?android.view.View;??

import?android.view.View.OnClickListener;??

import?android.view.ViewGroup;??

import?android.widget.FrameLayout;??

import?android.widget.ImageView;??

import?android.widget.LinearLayout;??

import?android.widget.RelativeLayout;??

??

import?com.stevenhu.android.phone.bean.ADInfo;??

import?com.stevenhu.android.phone.ui.R;??

??

/**?

?*?實(shí)現(xiàn)可循環(huán)，可輪播的viewpager?

?*/??

@SuppressLint("NewApi")??

public?class?CycleViewPager?extends?Fragment?implements?OnPageChangeListener?{??

??????

????private?List<ImageView>?imageViews?=?new?ArrayList<ImageView>();??

????private?ImageView[]?indicators;??

????private?FrameLayout?viewPagerFragmentLayout;??

????private?LinearLayout?indicatorLayout;?//?指示器??

????private?BaseViewPager?viewPager;??

????private?BaseViewPager?parentViewPager;??

????private?ViewPagerAdapter?adapter;??

????private?CycleViewPagerHandler?handler;??

????private?int?time?=?5000;?//?默認(rèn)輪播時(shí)間??

????private?int?currentPosition?=?0;?//?輪播當(dāng)前位置??

????private?boolean?isScrolling?=?false;?//?滾動(dòng)框是否滾動(dòng)著??

????private?boolean?isCycle?=?false;?//?是否循環(huán)??

????private?boolean?isWheel?=?false;?//?是否輪播??

????private?long?releaseTime?=?0;?//?手指松開、頁面不滾動(dòng)時(shí)間，防止手機(jī)松開后短時(shí)間進(jìn)行切換??

????private?int?WHEEL?=?100;?//?轉(zhuǎn)動(dòng)??

????private?int?WHEEL_WAIT?=?101;?//?等待??

????private?ImageCycleViewListener?mImageCycleViewListener;??

????private?List<ADInfo>?infos;??

??

????@Override??

????public?View?onCreateView(LayoutInflater?inflater,?ViewGroup?container,??

????????????Bundle?savedInstanceState)?{??

????????View?view?=?LayoutInflater.from(getActivity()).inflate(??

????????????????R.layout.view_cycle_viewpager_contet,?null);??

??

????????viewPager?=?(BaseViewPager)?view.findViewById(R.id.viewPager);??

????????indicatorLayout?=?(LinearLayout)?view??

????????????????.findViewById(R.id.layout_viewpager_indicator);??

??

????????viewPagerFragmentLayout?=?(FrameLayout)?view??

????????????????.findViewById(R.id.layout_viewager_content);??

??

????????handler?=?new?CycleViewPagerHandler(getActivity())?{??

??

????????????@Override??

????????????public?void?handleMessage(Message?msg)?{??

????????????????super.handleMessage(msg);??

????????????????if?(msg.what?==?WHEEL?&&?imageViews.size()?!=?0)?{??

????????????????????if?(!isScrolling)?{??

????????????????????????int?max?=?imageViews.size()?+?1;??

????????????????????????int?position?=?(currentPosition?+?1)?%?imageViews.size();??

????????????????????????viewPager.setCurrentItem(position,?true);??

????????????????????????if?(position?==?max)?{?//?最后一頁時(shí)回到第一頁??

????????????????????????????viewPager.setCurrentItem(1,?false);??

????????????????????????}??

????????????????????}??

??

????????????????????releaseTime?=?System.currentTimeMillis();??

????????????????????handler.removeCallbacks(runnable);??

????????????????????handler.postDelayed(runnable,?time);??

????????????????????return;??

????????????????}??

????????????????if?(msg.what?==?WHEEL_WAIT?&&?imageViews.size()?!=?0)?{??

????????????????????handler.removeCallbacks(runnable);??

????????????????????handler.postDelayed(runnable,?time);??

????????????????}??

????????????}??

????????};??

??

????????return?view;??

????}??

??

????public?void?setData(List<ImageView>?views,?List<ADInfo>?list,?ImageCycleViewListener?listener)?{??

????????setData(views,?list,?listener,?0);??

????}??

??

????/**?

?????*?初始化viewpager?

?????*??

?????*?@param?views?

?????*????????????要顯示的views?

?????*?@param?showPosition?

?????*????????????默認(rèn)顯示位置?

?????*/??

????public?void?setData(List<ImageView>?views,?List<ADInfo>?list,?ImageCycleViewListener?listener,?int?showPosition)?{??

????????mImageCycleViewListener?=?listener;??

????????infos?=?list;??

????????this.imageViews.clear();??

??

????????if?(views.size()?==?0)?{??

????????????viewPagerFragmentLayout.setVisibility(View.GONE);??

????????????return;??

????????}??

??

????????for?(ImageView?item?:?views)?{??

????????????this.imageViews.add(item);??

????????}??

??

????????int?ivSize?=?views.size();??

??

????????//?設(shè)置指示器??

????????indicators?=?new?ImageView[ivSize];??

????????if?(isCycle)??

????????????indicators?=?new?ImageView[ivSize?-?2];??

????????indicatorLayout.removeAllViews();??

????????for?(int?i?=?0;?i?<?indicators.length;?i++)?{??

????????????View?view?=?LayoutInflater.from(getActivity()).inflate(??

????????????????????R.layout.view_cycle_viewpager_indicator,?null);??

????????????indicators[i]?=?(ImageView)?view.findViewById(R.id.image_indicator);??

????????????indicatorLayout.addView(view);??

????????}??

??

????????adapter?=?new?ViewPagerAdapter();??

??

????????//?默認(rèn)指向第一項(xiàng)，下方viewPager.setCurrentItem將觸發(fā)重新計(jì)算指示器指向??

????????setIndicator(0);??

??

????????viewPager.setOffscreenPageLimit(3);??

????????viewPager.setOnPageChangeListener(this);??

????????viewPager.setAdapter(adapter);??

????????if?(showPosition?<?0?||?showPosition?>=?views.size())??

????????????showPosition?=?0;??

????????if?(isCycle)?{??

????????????showPosition?=?showPosition?+?1;??

????????}??

????????viewPager.setCurrentItem(showPosition);??

??

????}??

??

????/**?

?????*?設(shè)置指示器居中，默認(rèn)指示器在右方?

?????*/??

????public?void?setIndicatorCenter()?{??

????????RelativeLayout.LayoutParams?params?=?new?RelativeLayout.LayoutParams(??

????????????????RelativeLayout.LayoutParams.WRAP_CONTENT,??

????????????????RelativeLayout.LayoutParams.WRAP_CONTENT);??

????????params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);??

????????params.addRule(RelativeLayout.CENTER_HORIZONTAL);??

????????indicatorLayout.setLayoutParams(params);??

????}??

??

????/**?

?????*?是否循環(huán)，默認(rèn)不開啟，開啟前，請(qǐng)將views的最前面與最后面各加入一個(gè)視圖，用于循環(huán)?

?????*??

?????*?@param?isCycle?

?????*????????????是否循環(huán)?

?????*/??

????public?void?setCycle(boolean?isCycle)?{??

????????this.isCycle?=?isCycle;??

????}??

??

????/**?

?????*?是否處于循環(huán)狀態(tài)?

?????*??

?????*?@return?

?????*/??

????public?boolean?isCycle()?{??

????????return?isCycle;??

????}??

??

????/**?

?????*?設(shè)置是否輪播，默認(rèn)不輪播,輪播一定是循環(huán)的?

?????*??

?????*?@param?isWheel?

?????*/??

????public?void?setWheel(boolean?isWheel)?{??

????????this.isWheel?=?isWheel;??

????????isCycle?=?true;??

????????if?(isWheel)?{??

????????????handler.postDelayed(runnable,?time);??

????????}??

????}??

??

????/**?

?????*?是否處于輪播狀態(tài)?

?????*??

?????*?@return?

?????*/??

????public?boolean?isWheel()?{??

????????return?isWheel;??

????}??

??

????final?Runnable?runnable?=?new?Runnable()?{??

??

????????@Override??

????????public?void?run()?{??

????????????if?(getActivity()?!=?null?&&?!getActivity().isFinishing()??

????????????????????&&?isWheel)?{??

????????????????long?now?=?System.currentTimeMillis();??

????????????????//?檢測(cè)上一次滑動(dòng)時(shí)間與本次之間是否有觸擊(手滑動(dòng))操作，有的話等待下次輪播??

????????????????if?(now?-?releaseTime?>?time?-?500)?{??

????????????????????handler.sendEmptyMessage(WHEEL);??

????????????????}?else?{??

????????????????????handler.sendEmptyMessage(WHEEL_WAIT);??

????????????????}??

????????????}??

????????}??

????};??

??

????/**?

?????*?釋放指示器高度，可能由于之前指示器被限制了高度，此處釋放?

?????*/??

????public?void?releaseHeight()?{??

????????getView().getLayoutParams().height?=?RelativeLayout.LayoutParams.MATCH_PARENT;??

????????refreshData();??

????}??

??

????/**?

?????*?設(shè)置輪播暫停時(shí)間，即沒多少秒切換到下一張視圖.默認(rèn)5000ms?

?????*??

?????*?@param?time?

?????*????????????毫秒為單位?

?????*/??

????public?void?setTime(int?time)?{??

????????this.time?=?time;??

????}??

??

????/**?

?????*?刷新數(shù)據(jù)，當(dāng)外部視圖更新后，通知刷新數(shù)據(jù)?

?????*/??

????public?void?refreshData()?{??

????????if?(adapter?!=?null)??

????????????adapter.notifyDataSetChanged();??

????}??

??

????/**?

?????*?隱藏CycleViewPager?

?????*/??

????public?void?hide()?{??

????????viewPagerFragmentLayout.setVisibility(View.GONE);??

????}??

??

????/**?

?????*?返回內(nèi)置的viewpager?

?????*??

?????*?@return?viewPager?

?????*/??

????public?BaseViewPager?getViewPager()?{??

????????return?viewPager;??

????}??

??

????/**?

?????*?頁面適配器?返回對(duì)應(yīng)的view?

?????*??

?????*?@author?Yuedong?Li?

?????*??

?????*/??

????private?class?ViewPagerAdapter?extends?PagerAdapter?{??

??

????????@Override??

????????public?int?getCount()?{??

????????????return?imageViews.size();??

????????}??

??

????????@Override??

????????public?boolean?isViewFromObject(View?arg0,?Object?arg1)?{??

????????????return?arg0?==?arg1;??

????????}??

??

????????@Override??

????????public?void?destroyItem(ViewGroup?container,?int?position,?Object?object)?{??

????????????container.removeView((View)?object);??

????????}??

??

????????@Override??

????????public?View?instantiateItem(ViewGroup?container,?final?int?position)?{??

????????????ImageView?v?=?imageViews.get(position);??

????????????if?(mImageCycleViewListener?!=?null)?{??

????????????????v.setOnClickListener(new?OnClickListener()?{??

??????????????????????

????????????????????@Override??

????????????????????public?void?onClick(View?v)?{??

????????????????????????mImageCycleViewListener.onImageClick(infos.get(currentPosition?-?1),?currentPosition,?v);??

????????????????????}??

????????????????});??

????????????}??

????????????container.addView(v);??

????????????return?v;??

????????}??

??

????????@Override??

????????public?int?getItemPosition(Object?object)?{??

????????????return?POSITION_NONE;??

????????}??

????}??

??

????@Override??

????public?void?onPageScrollStateChanged(int?arg0)?{??

????????if?(arg0?==?1)?{?//?viewPager在滾動(dòng)??

????????????isScrolling?=?true;??

????????????return;??

????????}?else?if?(arg0?==?0)?{?//?viewPager滾動(dòng)結(jié)束??

????????????if?(parentViewPager?!=?null)??

????????????????parentViewPager.setScrollable(true);??

??

????????????releaseTime?=?System.currentTimeMillis();??

??

????????????viewPager.setCurrentItem(currentPosition,?false);??

??????????????

????????}??

????????isScrolling?=?false;??

????}??

??

????@Override??

????public?void?onPageScrolled(int?arg0,?float?arg1,?int?arg2)?{??

????}??

??

????@Override??

????public?void?onPageSelected(int?arg0)?{??

????????int?max?=?imageViews.size()?-?1;??

????????int?position?=?arg0;??

????????currentPosition?=?arg0;??

????????if?(isCycle)?{??

????????????if?(arg0?==?0)?{??

????????????????currentPosition?=?max?-?1;??

????????????}?else?if?(arg0?==?max)?{??

????????????????currentPosition?=?1;??

????????????}??

????????????position?=?currentPosition?-?1;??

????????}??

????????setIndicator(position);??

????}??

??

????/**?

?????*?設(shè)置viewpager是否可以滾動(dòng)?

?????*??

?????*?@param?enable?

?????*/??

????public?void?setScrollable(boolean?enable)?{??

????????viewPager.setScrollable(enable);??

????}??

??

????/**?

?????*?返回當(dāng)前位置,循環(huán)時(shí)需要注意返回的position包含之前在views最前方與最后方加入的視圖，即當(dāng)前頁面試圖在views集合的位置?

?????*??

?????*?@return?

?????*/??

????public?int?getCurrentPostion()?{??

????????return?currentPosition;??

????}??

??

????/**?

?????*?設(shè)置指示器?

?????*??

?????*?@param?selectedPosition?

?????*????????????默認(rèn)指示器位置?

?????*/??

????private?void?setIndicator(int?selectedPosition)?{??

????????for?(int?i?=?0;?i?<?indicators.length;?i++)?{??

????????????indicators[i]??

????????????????????.setBackgroundResource(R.drawable.icon_point);??

????????}??

????????if?(indicators.length?>?selectedPosition)??

????????????indicators[selectedPosition]??

????????????????????.setBackgroundResource(R.drawable.icon_point_pre);??

????}??

??

????/**?

?????*?如果當(dāng)前頁面嵌套在另一個(gè)viewPager中，為了在進(jìn)行滾動(dòng)時(shí)阻斷父ViewPager滾動(dòng)，可以?阻止父ViewPager滑動(dòng)事件?

?????*?父ViewPager需要實(shí)現(xiàn)ParentViewPager中的setScrollable方法?

?????*/??

????public?void?disableParentViewPagerTouchEvent(BaseViewPager?parentViewPager)?{??

????????if?(parentViewPager?!=?null)??

????????????parentViewPager.setScrollable(false);??

????}??

??

??????

????/**?

?????*?輪播控件的監(jiān)聽事件?

?????*??

?????*?@author?minking?

?????*/??

????public?static?interface?ImageCycleViewListener?{??

??

????????/**?

?????????*?單擊圖片事件?

?????????*??

?????????*?@param?position?

?????????*?@param?imageView?

?????????*/??

????????public?void?onImageClick(ADInfo?info,?int?postion,?View?imageView);??

????}??

}??

? ? ?CycleViewPager類為實(shí)現(xiàn)可循環(huán)，可輪播的ViewPager的核心類，繼承自Fragment，具體實(shí)現(xiàn)原理就不多說了，代碼中都有相關(guān)的注釋。

? ok，接下來的其他類就不多說了。自己下載Demo學(xué)習(xí)吧。

?? 本博文Demo下載鏈接地址如下：

? ?http://download.csdn.net/detail/stevenhu_223/8675717

? ?另外，還有一種通過自定義ViewPager實(shí)現(xiàn)和本博文相同效果的廣告界面Demo，這里就不再貼代碼，可以通過如下地址下載：

? ?http://download.csdn.net/detail/stevenhu_223/8697903

總結(jié)

以上是生活随笔為你收集整理的Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。