BannerViewpager 實現廣告輪播(定時輪播+手勢滑動)
阿新 • • 發佈:2019-01-24
通過自定義viewpager控制元件實現廣告頁效果,能夠定時翻頁,動態新增item和dot數量,並封裝了點選回撥,功能比較完善,使用簡單。
定時滾動部分使用Timer這個類
/** 處理定時滾動任務 */ @SuppressLint("HandlerLeak") private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); if(listImgs.size() == 0) return; curIndex = (curIndex + 1)%listImgs.size(); setCurrentItem(curIndex); } }; /** 停止自動滾動任務 */ public void stopTimer() { if (mTimer != null) { mTimer.cancel(); mTimer = null; } } /** 開始自動滾動任務 圖片大於1張才滾動 */ public void startTimer() { if (mTimer == null && listImgs.size() > 1) { mTimer = new Timer(); mTimer.schedule(new TimerTask() { public void run() { handler.sendMessage(handler.obtainMessage(1)); } }, scrollTime, scrollTime); } }
Timer的schedule方法來開始計時,需要傳入3個引數1個TimerTask(其實是個runnable),和兩個時間的引數分別表示延遲執行task的時間和每隔多少時間執行一次,timertask就是每次需要執行的工作。
此外,timertask並不是在主執行緒執行,所以無法直接修改ui,所以需要寫個handler來執行滑動viewpager的操作
start方法是用來初始化image並開啟viewpager的任務的。
1。兩個list分別表示本地的圖片和服務端的圖片(title,url),在沒網路,我們就載入本地圖片
2.focuseId 就是小圓點顯示的背景資源(它所關聯的圖片出於顯示狀態)
3.normalId 小圓點關聯的圖片出於隱藏狀態 需要顯示的背景資源
4.ovalLayout 指的是用來新增小圓點的佈局,因為要根據圖片資源的數量動態新增小圓點的數量
public void start(Context context, List<AdBean> list, List<AdBean> adsId, LinearLayout ovalLayout, int focusedId, int normalId){ stopTimer(); this.mContext = context; this.mUrllist = list; this.mAdsId = adsId; this.mOvalLayout = ovalLayout; this.mFocusedId = focusedId; this.mNormalId = normalId; this.curIndex = 0; init(); initOvalLayout(); ImagePaperAdapter adapter = new ImagePaperAdapter(listImgs); this.setAdapter(adapter); this.setCurrentItem(0); this.addOnPageChangeListener(new MyPageChangeListener(this)); startTimer(); }
private void init(){
listImgs = new ArrayList<ImageView>(); // 圖片組
int len = mUrllist.size() != 0 ? mUrllist.size() : mAdsId.size();
for (int i = 0; i < len; i++) {
ImageView imageview = new ImageView(mContext); // 例項化ImageView的物件
imageview.setScaleType(ImageView.ScaleType.FIT_XY); // 設定縮放方式
imageview.setLayoutParams(new Gallery.LayoutParams( Gallery.LayoutParams.MATCH_PARENT, Gallery.LayoutParams.MATCH_PARENT));
if (mUrllist.size() == 0) {// 本地載入圖片
imageview.setImageResource(Integer.valueOf(mAdsId.get(i).url)); // 為ImageView設定要顯示的圖片
imageview.setScaleType(ImageView.ScaleType.CENTER_CROP);
} else { // 網路載入圖片
// ImageLoader.getInstance().displayImage(mUrllist.get(i).getImageUrl(), imageview, ImageLoaderUtils.getOptions());
imageview.setScaleType(ImageView.ScaleType.CENTER_CROP );
}
final int imagePosition = i;
imageview.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(onItemClickListener != null)
onItemClickListener.onItemClick(imagePosition);
}
});
listImgs.add(imageview);
}
}
注:網路載入圖片那部分程式碼註釋掉了,大家根據自己需要新增
最後是滑動監聽部分程式碼
private class MyPageChangeListener implements OnPageChangeListener{
boolean isAutoPlay = false;
private BannerViewPager bannerViewPager;
public MyPageChangeListener(BannerViewPager bannerViewPager){
this.bannerViewPager = bannerViewPager;
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
switch (arg0) {
case 1:// 手勢滑動,空閒中
isAutoPlay = false;
System.out.println(" 手勢滑動,空閒中");
break;
case 2:// 介面切換中
isAutoPlay = true;
stopTimer();
System.out.println(" 介面切換中");
break;
case 0:// 滑動結束,即切換完畢或者載入完畢
if (bannerViewPager.getCurrentItem() == bannerViewPager.getAdapter().getCount() - 1 && !isAutoPlay) {
bannerViewPager.setCurrentItem(0);
}
else if (bannerViewPager.getCurrentItem() == 0 && !isAutoPlay) {
bannerViewPager.setCurrentItem(bannerViewPager.getAdapter().getCount() - 1);
}
System.out.println(" 當前介面 " + bannerViewPager.getCurrentItem());
startTimer();
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int pos) {
// TODO Auto-generated method stub
//這裡面動態改變小圓點的被背景,來實現效果
curIndex = pos;
for(int i=0;i < listImgs.size();i++){
mOvalLayout.getChildAt(i).setBackgroundResource(mNormalId); // 圓點取消
if(i == curIndex)
mOvalLayout.getChildAt(curIndex).setBackgroundResource(mFocusedId);// 圓點選中
}
}
}