1. 程式人生 > >BannerViewpager 實現廣告輪播(定時輪播+手勢滑動)

BannerViewpager 實現廣告輪播(定時輪播+手勢滑動)

通過自定義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);// 圓點選中
            }
        }

    }