前言：經(jīng)常會(huì)看到有一些app的banner界面可以實(shí)現(xiàn)循環(huán)播放多個(gè)廣告圖片和手動(dòng)滑動(dòng)循環(huán)。本以為單純的ViewPager就可以實(shí)現(xiàn)這些功能。但是蛋疼的事情來(lái)了，ViewPager并不支持循環(huán)翻頁(yè)。所以要實(shí)現(xiàn)循環(huán)還得需要自己去動(dòng)手。自己在網(wǎng)上也找了些例子，本博文的Demo是結(jié)合自己找到的一些相關(guān)例子的基礎(chǔ)上去改造，也希望對(duì)讀者有用。
Demo實(shí)現(xiàn)的效果圖如下：
Demo代碼：
工程目錄如下圖：
廢話不多說(shuō)，上代碼。
1.主Activity代碼如下：
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; /** * 描述：主頁(yè) * * @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)來(lái) 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)來(lái) 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è)置圖片加載或解碼過(guò)程中發(fā)生錯(cuò)誤顯示的圖片 .cacheInMemory(true) // 設(shè)置下載的圖片是否緩存在內(nèi)存中 .cacheOnDisc(true) // 設(shè)置下載的圖片是否緩存在SD卡中 // .displayer(new RoundedBitmapDisplayer(20)) // 設(shè)置成圓角圖片 .build(); // 創(chuàng)建配置過(guò)得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代碼如下：
<?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類代碼如下：
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; // 手指松開(kāi)、頁(yè)面不滾動(dòng)時(shí)間，防止手機(jī)松開(kāi)后短時(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) { // 最后一頁(yè)時(shí)回到第一頁(yè) 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)不開(kāi)啟，開(kāi)啟前，請(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í)間，即沒(méi)多少秒切換到下一張視圖.默認(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; } /** * 頁(yè)面適配器 返回對(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)前頁(yè)面試圖在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)前頁(yè)面嵌套在另一個(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)聽(tīng)事件 * * @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)原理就不多說(shuō)了，代碼中都有相關(guān)的注釋。
以上所述是小編給大家介紹的Android實(shí)現(xiàn)Banner界面廣告圖片循環(huán)輪播（包括實(shí)現(xiàn)手動(dòng)滑動(dòng)循環(huán))，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
