2. 程式人生 > >Viewpager實現 輪播廣告欄（BannerPager）

Viewpager實現 輪播廣告欄（BannerPager）

阿新 • • 發佈：2018-12-11

實現這個功能的目前已經有很多種方式了，譬如說繼承ViewGroup仿ViewPager通過adapter迴圈add、dstory指定的item，使用fragment新增移除view的方式，設定viewpager的索引條目達到上限==。以上幾種方式屬於Banner的常用選擇，其中動效做的非常出色的如程式碼家的ImageSlider，曾經在專案中也引用過，不過在使用的過程中出現了記憶體開銷過大的問題，1張圖片也可以左右輪迴切換的問題，不得不說是個硬傷。後來遇到了一種新的方式，於是分享出來給大家。

Banner和viewpgaer的最大區別是Banner可以在itemPosition=0和itemPosition=size-1之間來回無縫切換，因此我們理想狀態是作如下處理的：當滑動到itemPosition=0的時候，左側有對應itemPosition=0到itemPosition=size-1的view；當滑動到itemPosition=size-1的時候，右側有對應itemPosition=0到itemPosition=size-1的view。這是我們一般直接的做法：設定viewpager的索引條目達到上限。然而開銷的問題讓我們會想到複用，結合listview的adapter的viewholder形式，可能會採取第i屏的第itemPosition=position的view複用第1屏的itemPosition=position的view。這樣的做法看似不錯，但是對於擁有著程式設計師思維的我們覺得這僅僅是一個邏輯不夠嚴密，過程不夠完美，存在潛藏的隱患的idea。於是兩條道路，優化or另闢蹊徑。

其實再做上述過程中的考慮時候，我們想到了複用，想到了設定size=Integer.MAX_VALUE實現itemPosition=0和itemPosition=size-1之間的切換，但是仔細考慮一下，我們也僅僅需要實現itemPosition=0和itemPosition=size-1之間的切換，就可以交給viewpager本身的機制來完成剩下頁卡之間的輪播。假設一共需要展示4個view，於是畫圖如下：

... item=2 -> item=3 -> item=0 -> item=1 -> item=2 -> item=3 -> item=0 -> item=1
 
 ...

也就是說我們發現可以考慮當itemPosition=3的時候下一屏itemPosition=0的view就是當前屏被滑動過去itemPosition=0的View，用來代替無限size=Integer.MAX_VALUE的實現方式，然而這樣難點又回到瞭如和實現兩者之間的無動畫切換。於是我們想到實現size=Integer.MAX_VALUE的本質其實就是對viewpager不停的addView和destoryView，當滑動到itemPosition=0的時候在左側新增一個itemPosition=3的view，當滑動到itemPosition=3的時候在右側新增一個itemPosition=0的view，但是後續的itemPosition=1和itemPosition=2的view就可以不用我們手動add進去，因為viewpager的本質會自動預設itemPosition=3左側、itemPosition=0右側存在itemPosition=1、2的view，因此上述圖我們可以簡化成：

                       |<—————————————|     
itemPosition    3  ->  0  ->  1  ->  2  ->  3  ->  0
                |—————————————>|

於是我們把addView簡化成了addView(0,item3View)和addView(5,item0View),而當載入到這兩個view的時候我們認為它載入的其實就是itemPosition=3和itemPosition=0的view。認為這個詞語在程式碼中的體現就是set，因此當我們在首尾各添加了一個view之後可以寫出如下程式碼：

if(getCurrentPosition() == 0){
    setCurrentPosition(4);
}
if(getCurrentPosition() == 5){
    setCurrentPosition(1);
}

注：getCurrentPosition() == 0的時候其實相當於把item4的佈局加到了item0的前面，此時資料就是item4的資料，所以把頁面設定到item4；getCurrentPosition() == 5的時候其實相當於把item0的佈局加到了item4的後面，此時資料就是item0的資料，所以把頁面設定到item0

完整程式碼：

package com.systoon.business.home.holder;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.systoon.business.home.bean.HomeActivityBean;
import com.systoon.business.home.utils.CommonUtils;
import com.systoon.business.home.view.HomeNewsListActivity;
import com.systoon.toon.R;
import com.systoon.toon.common.utils.DateUtils;
import com.systoon.toon.common.utils.ScreenUtil;

import java.util.ArrayList;
import java.util.List;

public class QlLHomeNewsViewHolder extends BaseMainAppViewHolder {

    private final Activity mActivity;
    private ViewPager mViewpager;
    private LinearLayout mIndicateRoot;

    private LinearLayout mRootEmpty;
    private LinearLayout contentRoot;
    private TextView mTitle;
    private TextView mTime;
    private int currentItem;
    private TextView mMore;
    private List<HomeActivityBean> datas;
    private ArrayList<View> viewList;
    private int count;
    private long delayTime = 3000;
    private ViewPager.OnPageChangeListener mOnPageChangeListener;
    private WeakHandler handler = new WeakHandler();

    public QlLHomeNewsViewHolder(View itemView, ViewGroup parent, List<HomeActivityBean> mList,
                                 Activity activity) {
        super(itemView);
        mViewpager = (ViewPager) itemView.findViewById(R.id.news_banner);
        mIndicateRoot = (LinearLayout) itemView.findViewById(R.id.dot_indicate_root);
        contentRoot = (LinearLayout) itemView.findViewById(R.id.content_root);

        mTitle = (TextView) itemView.findViewById(R.id.news_title);
        mTime = (TextView) itemView.findViewById(R.id.time);
        mMore = (TextView) itemView.findViewById(R.id.btn_more);

        mActivity = activity;
        datas = mList;

    }

    @Override
    public void bindHolder(HomeActivityBean bean, int position) {
        super.bindHolder(bean, position);
        viewList = new ArrayList<>();
        final List<HomeActivityBean.ExtrasData> list = bean.getDataList();

        if (list != null) {

            count = list.size();
            mIndicateRoot.removeAllViews();
            View dot;

            if (count > 1) {// 多於一個輪播
                for (int i = 0; i < count + 2; i++) {
                    viewList.add(LayoutInflater.from(itemView.getContext()).inflate(R.layout
                                    .ql_home_show_type_banner_item_img,
                            null, false));

                    if (i < count) {
                        dot = new View(itemView.getContext());
                        mIndicateRoot.addView(dot, ScreenUtil.dp2px(6), ScreenUtil.dp2px(6));
                        setMargins(dot, ScreenUtil.dp2px(3), 0, ScreenUtil.dp2px(3), 0);
                    }
                }
            } else if (count == 1) {
                viewList.add(LayoutInflater.from(itemView.getContext()).inflate(R.layout
                                .ql_home_show_type_banner_item_img,
                        null, false));
            } else {// TODO 空介面處理

            }


            /**
             * banner
             */
            if (count > 0)
                mViewpager.setAdapter(new PagerAdapter() {


                    @Override
                    public int getCount() {
                        return count > 1 ? count + 2 : count;
                    }

                    @Override
                    public boolean isViewFromObject(View view, Object object) {
                        return view == object;
                    }

                    @Override
                    public Object instantiateItem(final ViewGroup container, int position)
                    {//必須實現，例項化
                        View view = viewList.get(position);
                        final ImageView img = (ImageView) view.findViewById(R.id.img_content);
                        final HomeActivityBean.ExtrasData items;

                        if (count > 1) {
                            if (position == 0) {
                                items = list.get(count - 1);

                            } else if (position == count + 1) {
                                items = list.get(0);
                            } else {
                                items = list.get(position - 1);
                            }
                        } else {
                            items = list.get(position);
                        }

                        showImgRoundCrop("", img, img.getContext());
                        img.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                if (TextUtils.isEmpty(items.getDescription())) {
                                    CommonUtils.goActivityH5(mActivity, items.getActivityId());
                                } else {

                                    CommonUtils.toNewsDetail(mActivity, items.getNewsId());
                                }
                                //  跳轉
                            }
                        });


                        container.addView(view);
                        return view;
                    }

                    @Override
                    public void destroyItem(ViewGroup container, int position, Object object)
                    {//必須實現，銷燬
                        container.removeView(viewList.get(position));
                    }

                });


            mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int
                        positionOffsetPixels) {
                    if (mOnPageChangeListener != null) {
                        mOnPageChangeListener.onPageScrolled(toRealPosition(position, count),
                                positionOffset, positionOffsetPixels);
                    }

                }

                @Override
                public void onPageSelected(int position) {


                    currentItem = position;
                    if (mOnPageChangeListener != null) {
                        mOnPageChangeListener.onPageSelected(toRealPosition(position, count));
                    }
                    //   mPageIndex.setText(new StringBuilder().append(toRealPosition(position,
                    // count) + 1).append("/").append(count).toString());


                    if (mIndicateRoot.getChildCount() > 1) {// 多餘一個
                        HomeActivityBean.ExtrasData items = list.get(toRealPosition(position,
                                count));
                        for (int i = 0; i < mIndicateRoot.getChildCount(); i++) {
                            if (i == toRealPosition(position, count)) {
                                mIndicateRoot.getChildAt(i).setBackgroundResource(R.drawable
                                        .icon_interact_news_banner_white_dot);

                                mTitle.setText(TextUtils.isEmpty(items.getTitle()) ? "" : items
                                        .getTitle());
                                mTime.setText(TextUtils.isEmpty(items.getUpdateTime()) ? "" :
                                        DateUtils.convertToTime(Long.parseLong(items
                                                        .getUpdateTime())
                                                , "yyyy年MM月dd日"));
                            } else {
                                mIndicateRoot.getChildAt(i).setBackgroundResource(R.drawable
                                        .icon_interact_news_banner_gray_dot);
                            }
                        }
                    }
                }

                @Override
                public void onPageScrollStateChanged(int state) {
                    if (mOnPageChangeListener != null) {
                        mOnPageChangeListener.onPageScrollStateChanged(state);
                    }

                    switch (state) {
                        case 0://No operation
                            if (currentItem == 0) {
                                //  viewPager.setCurrentItem(count+1, false);
                                mViewpager.setCurrentItem(count, false);
                            } else if (currentItem == count + 1) {
                                // viewPager.setCurrentItem(0, false);
                                mViewpager.setCurrentItem(1, false);
                            }
                            break;
                        case 1://start Sliding
                            if (currentItem == count + 1) {
                                // viewPager.setCurrentItem(0, false);
                                mViewpager.setCurrentItem(1, false);
                            } else if (currentItem == 0) {
                                //  viewPager.setCurrentItem(count+1, false);
                                mViewpager.setCurrentItem(count, false);
                            }
                            break;
                        case 2://end Sliding
                            break;
                    }
                }
            });


          /*  if (datas.size() - 1 == position) {
                mLine.setVisibility(View.GONE);
            } else {
                mLine.setVisibility(View.VISIBLE);
            }
*/
            mViewpager.setCurrentItem(1);
            //TODO 設定偏移  mViewpager.setOffscreenPageLimit(count + 2);


            mMore.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    HomeNewsListActivity.launcher(mMore.getContext());
                }
            });

            if (count > 1)
                startAutoPlay();

        }


    }

    public void setOnPageChangeListener(ViewPager.OnPageChangeListener onPageChangeListener) {
        mOnPageChangeListener = onPageChangeListener;
    }

    private int toRealPosition(int position, int count) {
        int realPosition = (position - 1) % count;
        if (realPosition < 0)
            realPosition += count;
        return realPosition;
    }

    public void startAutoPlay() {
        handler.removeCallbacks(task);
        handler.postDelayed(task, delayTime);
    }

    private final Runnable task = new Runnable() {
        @Override
        public void run() {

            if (count > 1) {
                currentItem = currentItem % (count + 1) + 1;
                if (currentItem == 1) {
                    mViewpager.setCurrentItem(currentItem, false);
                    handler.postDelayed(task, delayTime);
                } else {
                    mViewpager.setCurrentItem(currentItem);
                    handler.postDelayed(task, delayTime);
                }
            }
        }
    };

    public void stopAutoPlay() {
        handler.removeCallbacks(task);
    }
}

原文地址：https://blog.csdn.net/byxyrq/article/details/51481773

相關推薦

Viewpager實現 輪播廣告欄（BannerPager）

實現這個功能的目前已經有很多種方式了，譬如說繼承ViewGroup仿ViewPager通過adapter迴圈add、dstory指定的item，使用fragment新增移除view的方式，設定viewpager的索引條目達到上限==。以上幾種方式屬於Banner的常用選擇，其中動效做的非

Jquery和純JS實現輪播圖（一）--左右切換式

var cur = 0, //當前的圖片序號 imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組 imgLen = imgLis.length, //獲取圖片的

ViewPager打造輪播圖（Banner）\引導頁（Guide）

前言 今年7月時，在Github釋出了一個開源的Banner庫，雖然Star不多，但還是有少部分人使用。 Banner效果： 昨天，有使用此庫的同學提出需求，想在引導頁的時候用這個庫並且最後一頁有進入按鈕如何實現，為滿足他的需求，也方便更多開發者是

Jquery和純JS實現輪播圖（二）--淡入淡出切換式

之前有寫過一篇輪播圖，是左右切換式的，可以參考 Jquery和純JS實現輪播圖（一）–左右切換式 今天分享一下淡入淡出式的輪播圖，同樣也是用純js和Jquery兩種方法來實現： JQUERY實現

JS實現定時操作 圖片輪播效果（setInterval）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=functi

Android框架之路——Banner實現輪播圖（RecyclerView新增Header）

一、簡介 Banner能實現迴圈播放多個廣告圖片和手動滑動迴圈等功能。因為原生ViewPager並不支援迴圈翻頁， 要實現迴圈還得需要自己去動手。Banner框架可以進行不同樣式、不同動畫設定， 以及完善的api方法能滿足大部分軟體首頁輪播圖效果的需求。

JS原生程式碼實現輪播圖（無左右滑動，底下圓點按鈕）

先上效果圖： 由於動態圖太大，所以只能截圖了；大致效果，圖片輪播的過程中，底下的灰色提示漸漸出現； 現在來說實現思路：        HTML部分： <div id="content"> <img id="img1" /> &

自定義ViewGroup和FrameLayout實現輪播圖（包括底部小圓點）

廣告輪播圖在現在的APP首頁比較常見，主要的實現方式有兩種，一種是通過ViewPager，一種是通過自定義ViewGroup。前者的實現方式比較簡便，本篇文章講的是第二種方法，有人說用ViewPager不是更方便嗎，的確，但是我們通過自己定義ViewGroup，

焦點輪播圖（7）原生JS實現焦點輪播圖--完整程式碼

輪播圖終於更完了，附上完整程式碼： <html> <head> <meta charset="utf-8" /> <title>焦點輪播圖</title> <style type=

JS實現八種焦點輪播圖（下）

佈局同（上），略 5.定時上下無縫滾動 思路： 1.思路1： 將ul複製一份，但滾動一半距離重新歸位；（大型網站效能略低）； 2.思路2： 通過相對定位,將第一個li移動到最後，再將ul和

RecyclerView實現廣告輪播圖（一）

　　平時都是用RecyclerView實現列表，RecyclerView的強大毋庸置疑，今天就用它來實現廣告輪播圖。 　　 　　效果如下 　　首先，在activity_main.xml裡定義佈局 　　 <RelativeLayout

JS實現八種焦點輪播圖（上）

注：基於完美運動框架move2.js而完成的八種焦點錄播圖 基本佈局： <div id="box"> <ul id="ul">

js實現圖片3D輪播效果（收藏）

3D的圖片輪播效果很炫，寫到這裡只是為了不丟程式碼，不為別的。效果預覽：html程式碼：<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t

Android 實現輪播效果（利用開源控制元件）

首先匯入依賴 implementation 'com.youth.banner:banner:1.4.10' 在佈局檔案中新

輪播圖（一）

left margin font ges opacity onload rgb absolut pin <style>　　*{ margin:0; padding:0; list-style:none; }　　.box{ width:520px; height:

vue慕課網音樂項目手記：5-手寫滾動輪播圖（上）

flow overflow box cor 慕課 efs PE osi 通過 在這一節，會封裝一些公用的函數來添加classname，改變image的寬度。 具體如下： 首先：封裝一個slider的組件 <template> <div cl

11.輪播圖（練習）

current cor ext 技術 one 練習 func children script 效果圖： 源代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset

jQuery文字輪播特效（轉）

閒談：離開學校那座象牙塔已經也有大半年的事件了，生活中不再充滿了茫然只有忙碌。連續加班加點大半個月，做的活動專案終於算是告一段落了，而今天也將是考驗其真正價值的時候，現在將這次開發中遇到的問題做一下總結。 專案背景： 這次的專案主要是做一次全國酒店人氣排名的營銷活動，主要是基於在微信中傳播，預計訪問量達到億

關於輪播圖（1）

不瞞大家說，輪播圖簡直是我的噩夢，就像是論文之於大學生[受虐滑稽][受虐滑稽] 簡單輪播圖 最簡單的輪播圖，用WebAPI做的，點選圖片底下的數字跳轉到相對應的圖片。 1、首先把結構寫出來 <div class="box" id="box"> <div

完整輪播圖（4）

我們終於迎來了最完整的輪播圖 當然還是WebAPI做的 依舊和之前一樣，結構樣式只給程式碼，script裡面會有一些註釋 有的圖片路徑可能會報錯什麼的，因為我本來使用的是本地圖片，然後換成了臨時百度的圖片，圖片路徑出錯了你們要自己換圖片，反正是不要指望我了，嘻嘻 一、結構 <d