效果圖：

?

該banner功能有自動切換圖片，點擊圖片可以自定義事件，手動滑動切換，異步加載圖片

代碼說話：

布局文件：

?

<!-- 廣告位 --><FrameLayoutandroid:id="@+id/new_recommend"android:layout_width="fill_parent"android:layout_height="wrap_content" ><com.cyou.cmall.ui.HorizontalViewPagerandroid:id="@+id/viewpager"android:layout_width="fill_parent"android:layout_height="fill_parent" /><LinearLayoutandroid:id="@+id/ll_indicator"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="horizontal"android:paddingBottom="8dp"android:paddingLeft="26dip" /></FrameLayout>

布局文件中我自定義了一個HorizontalViewPager，它是在viewpager的基礎上做了一些修改，之所以這樣做是因為，項目中使用到了下拉刷新控件，該布局最外層還有一個scrollview，會導致scrollview將手勢事件攔截，而viewpager得不到滑動手勢

?

下面是HorizontalViewPager的代碼，如果不需要處理滑動手勢，完全可以使用系統的viewpager控件

?

/*** 復寫該控件是因為在PullToRefreshScrollView中，viewpager無法水平滑動** @author wangwei_cs*/ public class HorizontalViewPager extends ViewPager {private GestureDetector mGestureDetector;public HorizontalViewPager(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public HorizontalViewPager(Context context) {super(context);init(context);}private void init(Context context) {mGestureDetector = new GestureDetector(context, new YScrollDetector());}@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {boolean dispatchTouchEvent = super.dispatchTouchEvent(ev);if (dispatchTouchEvent) {if (mGestureDetector.onTouchEvent(ev)) {//請求父類放棄事件的處理requestDisallowInterceptTouchEvent(true);}}return dispatchTouchEvent;}class YScrollDetector extends SimpleOnGestureListener {@Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2,float distanceX, float distanceY) {// 如果我們滾動更接近水平方向,返回true,自己處理，否則，讓出處理權限return (Math.abs(distanceX) > Math.abs(distanceY));}} } </span>

言歸正傳：在程序oncreate方法中調用一下方法

?

/*** 初始化推薦廣告專區*/private void initRecommendAd() {HorizontalViewPager mViewPager = (HorizontalViewPager) findViewById(R.id.viewpager);mIndicatorLayout = (LinearLayout) findViewById(R.id.ll_indicator);FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(android.widget.FrameLayout.LayoutParams.MATCH_PARENT, height * 24 / 100);mViewPager.setLayoutParams(params);AdImagePagerAdapter mPagerAdapter = new AdImagePagerAdapter(mCxt, imageUrls, new ViewPagerItemClickListener() {@Overridepublic void OnViewPagerItemClick(int position) {if (imageUrls.size() > 0) {if (imageUrls.size() == 1) {boolean enable = urlEnable(imageUrls.get(0));if (enable) {handleClickEvent(position);}} else {handleClickEvent(position);}}}});List<String> lastAdUrls = getLastAdUrls();if (lastAdUrls == null || lastAdUrls.size() == 0) {// 沒有記錄上一次廣告url信息,添加一個無效url路徑imageUrls.add(Constants.INVALID_URL);LogHelper.e(TAG, "no last ad record");} else {LogHelper.e(TAG, "show last ad record");imageUrls.addAll(lastAdUrls);}mAdComponent = new RecommendAdComponent(mCxt, mViewPager, mPagerAdapter, imageUrls, 5000,mIndicatorLayout);mAdComponent.startUpAdComponent();mPagerAdapter.notifyDataSetChanged();}

?

?

下面是AdImagePagerAdapter的源碼

?

import java.util.List;import android.content.Context; import android.graphics.Bitmap; import android.support.v4.view.PagerAdapter; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ImageView; import android.widget.ProgressBar; import android.widget.Toast;import com.nostra13.universalimageloader.core.DisplayImageOptions; import com.nostra13.universalimageloader.core.ImageLoader; import com.nostra13.universalimageloader.core.assist.FailReason; import com.nostra13.universalimageloader.core.assist.ImageScaleType; import com.nostra13.universalimageloader.core.assist.SimpleImageLoadingListener; import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;/*** 無限循環adapter* * @author wangwei_cs*/ public class AdImagePagerAdapter extends PagerAdapter {protected static final String TAG = "AdImagePagerAdapter";private List<String> imageUrls;private LayoutInflater inflater;private Context mCxt;private ViewPagerItemClickListener mListener;protected ImageLoader imageLoader;private DisplayImageOptions options;public AdImagePagerAdapter(Context context, List<String> imageUrls, ViewPagerItemClickListener listener) {this.imageUrls = imageUrls;this.mCxt = context;inflater = LayoutInflater.from(context);this.mListener = listener;imageLoader = ImageLoader.getInstance();options = new DisplayImageOptions.Builder().showImageForEmptyUri(R.drawable.ad_default).showImageOnFail(R.drawable.ad_default).showImageOnLoading(R.drawable.ad_default).resetViewBeforeLoading(true).cacheOnDisc(true).imageScaleType(ImageScaleType.EXACTLY).bitmapConfig(Bitmap.Config.RGB_565).considerExifParams(true).displayer(new FadeInBitmapDisplayer(300)).build();}@Overridepublic int getCount() {if (imageUrls.size() < 2) {return imageUrls.size();}return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {final int index = position % imageUrls.size();View view = inflater.inflate(R.layout.item_pager_image, container, false);assert view != null;ImageView imageView = (ImageView) view.findViewById(R.id.image);final ProgressBar spinner = (ProgressBar) view.findViewById(R.id.img_loading);imageLoader.displayImage(imageUrls.get(index), imageView, options,new SimpleImageLoadingListener() {@Overridepublic void onLoadingStarted(String imageUri, View view) {spinner.setVisibility(View.VISIBLE);}@Overridepublic void onLoadingFailed(String imageUri, View view, FailReason failReason) {String message = null;switch (failReason.getType()) {case IO_ERROR:message = "Input/Output error";break;case DECODING_ERROR:message = "Image can't be decoded";break;case NETWORK_DENIED:message = "Downloads are denied";break;case OUT_OF_MEMORY:message = "Out Of Memory error";break;case UNKNOWN:message = "Unknown error";break;}LogHelper.e(TAG, message);spinner.setVisibility(View.GONE);}@Overridepublic void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {spinner.setVisibility(View.GONE);}});view.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (mListener !=null) {mListener.OnViewPagerItemClick(index);}}});container.addView(view);return view;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);} }

?

?

?

?

下面是重點的RecommendAdComponent自定義的廣告推薦組件

?

import android.annotation.SuppressLint; import android.content.Context; import android.os.Handler; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.support.v4.view.ViewPager.PageTransformer; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.LinearLayout; import java.util.List; import java.util.Timer; import java.util.TimerTask;/*** 展示廣告輪轉的組件* * @author wangwei_cs*/ public class RecommendAdComponent {/*** 無效的圖片切換時間，如果為0 表示不自動切換*/public static final int SWITCH_TIME_INVALID = 0;private Context mCxt;// 圖片url集合private List<String> mImgUrls;// 圖片切換時間private int mSwitchTime;//自動滾動的定時器 private Timer mTimer;// 顯示圓點指示器的布局private LinearLayout mIndicatorLayout;private ViewPager mViewPager;private PagerAdapter mPagerAdapter;private int currentIndex; // 當前頁面,在0和getSize()直接private int pagerCurrent;//在viewpager中，的當前頁面，取值在0和Integer.MAX_VALUE之間private boolean timeRunning;/*** @param context* @param viewpager viewPager組件* @param pagerAdapter* @param adUrls 裝有圖片url的集合* @param switchTime 圖片切換時間(ms) {@link RecommendAdComponent#SWITCH_TIME_INVALID}：不自動切換* @param indicatorLayout 顯示圓點指示器的布局*/public RecommendAdComponent(Context context, ViewPager viewpager, PagerAdapter pagerAdapter, List<String> adUrls, int switchTime,LinearLayout indicatorLayout) {this.mCxt = context;this.mViewPager = viewpager;this.mPagerAdapter = pagerAdapter;this.mImgUrls = adUrls;this.mSwitchTime = switchTime;this.mIndicatorLayout = indicatorLayout;initIndicatorLayout();mViewPager.setOnPageChangeListener(new MyOnPageChangeListener()); // setViewpagerAnimator();}/*** 初始化指示器*/private void initIndicatorLayout() {ImageView iv = null;if (mIndicatorLayout != null && getSize() < 2) {// 如果只有一第圖時不顯示圓點容器mIndicatorLayout.setVisibility(View.INVISIBLE);} else if (mIndicatorLayout != null) {mIndicatorLayout.setVisibility(View.VISIBLE);for (int i = 0; i < getSize(); i++) {iv = new ImageView(mCxt);iv.setTag(i);int padding = mCxt.getResources().getDimensionPixelSize(R.dimen.indicator_padding);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);params.setMargins(padding, 0, padding, 0);mIndicatorLayout.addView(iv, params);}}}private void resetIndicatorLayout() {mIndicatorLayout.removeAllViews();initIndicatorLayout();}/*** 給viewPager設置動畫*/private void setViewpagerAnimator(){if (mViewPager !=null) {PageTransformer pageTransformer=new PageTransformer() {@Overridepublic void transformPage(View view, float arg1) { // view.setAnimation(AnimationUtils.loadAnimation(mCxt, android.R.anim.slide_out_right));view.setAnimation(AnimationUtils.loadAnimation(mCxt, R.anim.right_in));}};mViewPager.setPageTransformer(true, pageTransformer);}}/*** 獲取圖片集合的size* * @return*/private int getSize() {return (mImgUrls == null ? 0 : mImgUrls.size());}public boolean isEmpty() {return (mImgUrls == null);}/*** 開啟組件*/public void startUpAdComponent() {currentIndex = 0;pagerCurrent = 0;mViewPager.setAdapter(mPagerAdapter);mViewPager.setCurrentItem(currentIndex);updateIndicator(currentIndex);startTimer();}/*** 更新組件中adapter數據*/public void updateAdComponent() {stopTimer();resetIndicatorLayout();mPagerAdapter.notifyDataSetChanged();startUpAdComponent();}/*** 在頁面銷毀的時候調用該方法*/public void stopAdComponent() {stopTimer();}/*** 停止自動滾動的任務*/public void stopTimer() {timeRunning = false;if (mTimer != null) {mTimer.cancel();mTimer = null;}}/*** 開始自動滾動的任務，注意，只有圖片個數大于1的時候才會自動滾動*/public void startTimer() {timeRunning = true;if (mTimer == null && getSize() > 1 && mSwitchTime > 0) {mTimer = new Timer();mTimer.schedule(new PagerTimerTask(), mSwitchTime, mSwitchTime);}}private class PagerTimerTask extends TimerTask {@Overridepublic void run() {currentIndex++;pagerCurrent++;mHandler.sendEmptyMessage(0);}}private class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int position) {pagerCurrent = position;currentIndex = position % getSize();// 更新當前頁面updateIndicator(currentIndex);}}/*** 更新圓點指示器*/private void updateIndicator(int position) {if (!isEmpty() && position < getSize()) {if (getSize() > 1) {resetAllIndicator(getSize());// 重置所有的指示器為為選擇狀態View v = mIndicatorLayout.findViewWithTag(position);if (v != null) {v.setBackgroundResource(R.drawable.circle_indicator_selected);// 點亮}}}}/*** 重置所有的指示器*/private void resetAllIndicator(int size) {if (mIndicatorLayout != null) {for (int i = 0; i < size; i++) {View v = mIndicatorLayout.findViewWithTag(i);if (v != null) {v.setBackgroundResource(R.drawable.circle_indicator_normal);}}}}@SuppressLint("HandlerLeak")private Handler mHandler = new Handler() {public void handleMessage(android.os.Message msg) {mViewPager.setCurrentItem(pagerCurrent);};}; }

?

當網絡加載圖片url列表成功之后，只需調用mAdComponent.updateAdComponent();即可

例如我的代碼

?

private void updateAdSources(List<HomeBannerDTO> list) {imageUrls.clear();for (HomeBannerDTO dto : list) {imageUrls.add(dto.getUrl());}mBannerList.clear();mBannerList.addAll(list);//更新banner組件mAdComponent.updateAdComponent();LogHelper.d(TAG, "updateAdComponent .....");SettingsMgr.setLastRecommendAdList(mCxt, mBannerList);}

?

總結

以上是生活随笔為你收集整理的广告banner：手动滑动切换，自动切换，点击跳转，异步加载网络图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。