Android輪播圖控件的實現(xiàn)詳解(附GitHub開源鏈接)

輪播圖在Android開發(fā)中是非常常見的控件疲酌,一般App的首頁廣告和電商類App的商品詳情圖片都會用輪播圖來實現(xiàn)〔桓可是Android源生的控件中卻沒有能直接拿來使用的輪播圖控件渣刷,所以一般的輪播圖效果都需要我們自己去實現(xiàn)苦锨。今天我就給大家介紹一個我自己寫的輪播圖控件:CustomBanner苗桂。有需要的同學可以直接訪問我的GitHub使用該控件。下面我將為大家詳細介紹CustomBanner控件的實現(xiàn)思路和細節(jié)告组。
(說明:下面我貼出來的代碼只是CustomBanner的代碼摘要煤伟,想要看完整源碼的同學請到GitHub下載或引用依賴)
1、布局
輪播圖一般由一個可以左右滾動、承載圖片的主體控件和一個顯示當前位置的指示器組成便锨。CustomBanner的布局非常簡單围辙,直接繼承FrameLayout,內部添加兩個子View:一個ViewPager(可以左右滾動放案、承載圖片的主體控件)和一個LinearLayout(指示器容器)姚建。

public class CustomBanner<T> extends FrameLayout {

    private ViewPager mBannerViewPager;
    private LinearLayout mIndicatorLayout;

    //添加輪播圖ViewPager
    private void addBannerViewPager(Context context) {
        mBannerViewPager = new ViewPager(context);
        this.addView(mBannerViewPager);
    }

    //添加輪播圖指示器容器
    private void addIndicatorLayout(Context context) {
        mIndicatorLayout = new LinearLayout(context);
        LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        lp.gravity = analysisGravity(mIndicatorGravity);
        lp.setMargins(0, 0, 0, DensityUtils.dp2px(context, 8));
        mIndicatorLayout.setGravity(Gravity.CENTER);
        this.addView(mIndicatorLayout, lp);
    }
}

2、實現(xiàn)輪播圖的無限循環(huán)
輪播圖是需要左右無限循環(huán)滾動的吱殉,而ViewPager是有滾動邊界的掸冤。為了實現(xiàn)ViewPager循環(huán)滾動,我采用了網(wǎng)上一個很巧妙的實現(xiàn)方式友雳。就是ViewPager的實際長度是它的應有長度+2稿湿,在ViewPager的應有長度的頭尾各加一個節(jié)點。頭節(jié)點的數(shù)據(jù)跟ViewPager的最后一個數(shù)據(jù)一樣押赊,尾節(jié)點的數(shù)據(jù)跟ViewPager的第一個數(shù)據(jù)一樣饺藤。當ViewPager滾動到尾節(jié)點時,就無縫跳轉到第一個數(shù)據(jù)流礁,當ViewPager滾動到頭節(jié)點時涕俗,就無縫跳轉到最后一個數(shù)據(jù),由于跳轉的兩節(jié)點的數(shù)據(jù)是一樣的神帅,而且是無縫跳轉再姑,沒有過度動畫,所以用戶感覺不到ViewPager的顯示節(jié)點已經(jīng)改變枕稀,就給用戶一種ViewPager在無限循環(huán)的錯覺询刹。具體請看這里
由于多加了兩個節(jié)點萎坷,所以在處理ViewPager的position時凹联,實際的position和用戶所看到的position是不一樣的。比如:輪播圖有5張圖片哆档,用戶看到的也應該是5張圖片蔽挠,而實際上我們的ViewPager會有7張圖片,因為第1張圖片和第6張圖片是同一張圖片瓜浸,第7張圖片和第2張圖片是同一張圖片澳淑。這里可能很不好理解,但是一定要理解插佛,因為這是實現(xiàn)輪播圖循環(huán)輪播的關鍵杠巡。

     //ViewPager的實際長度是他的數(shù)據(jù)的長度+2
     @Override
    public int getCount() {
        return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2;
    }
//通過實際的position計算用戶所理解的position
private int getActualPosition(int position) {
        if (position == 0) {
            //如果是頭節(jié)點,返回最后一個數(shù)據(jù)的position
            //因為頭節(jié)點的數(shù)據(jù)和最后一個數(shù)據(jù)是一樣的雇寇。
            return mDatas.size() - 1;
        } else if (position == getCount() - 1) {
            //如果是尾節(jié)點氢拥,返回第一個數(shù)據(jù)的position
            //因為尾節(jié)點的數(shù)據(jù)和第一個數(shù)據(jù)是一樣的蚌铜。
            return 0;
        } else {
            //除了頭尾以外,position節(jié)點的數(shù)據(jù)是mDatas中的第position - 1的下標的數(shù)據(jù)
            return position - 1;
        }
    }

3嫩海、設置ViewPager的滾動速度
ViewPager有自己的mScroller屬性冬殃,負責控制ViewPager的滾動速度。但是ViewPager的默認滾動速度太快了叁怪,而且ViewPager并沒有提供方法設置mScroller的滾動速度也沒有提供方法設置mScroller审葬,所以我們需要通過反射用自己的mScroller替換掉ViewPager的mScroller,使我們可以完全控制和操作ViewPager的mScroller屬性奕谭。這不僅僅是實現(xiàn)我們自定義ViewPager的滾動速度涣觉,也是實現(xiàn)第2步中ViewPager無縫跳轉的關鍵。

    //通過反射替換掉mBannerViewPager的mScroller屬性
    private void replaceViewPagerScroll() {
        try {
            Field field = ViewPager.class.getDeclaredField("mScroller");
            field.setAccessible(true);
            mScroller = new ViewPagerScroller(mContext,
                    new AccelerateInterpolator());
            field.set(mBannerViewPager, mScroller);
        } catch (Exception e) {
        }
    }

    /**
     * 設置輪播圖的滾動速度
     *
     * @param scrollDuration
     */
    public CustomBanner<T> setScrollDuration(int scrollDuration) {
        mScroller.setScrollDuration(scrollDuration);
        return this;
    }
public class ViewPagerScroller extends Scroller {

    private int mScrollDuration = 550;
    //是否無縫跳轉
    private boolean sudden;

    public ViewPagerScroller(Context context) {
        super(context);
    }

    public ViewPagerScroller(Context context, Interpolator interpolator) {
        super(context, interpolator);
    }

    public ViewPagerScroller(Context context, Interpolator interpolator,
                             boolean flywheel) {
        super(context, interpolator, flywheel);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
    }

    public int getScrollDuration() {
        return mScrollDuration;
    }

    public void setScrollDuration(int scrollDuration) {
        this.mScrollDuration = scrollDuration;
    }

    public boolean isSudden() {
        return sudden;
    }

    public void setSudden(boolean zero) {
        this.sudden = zero;
    }
}

4展箱、實現(xiàn)ViewPager的自動輪播
這個實現(xiàn)起來非常的簡單旨枯。直接利用Handler延遲發(fā)送消息的功能來進行輪播滾動的計時,在消息的處理中改變ViewPager顯示的Item混驰,達到ViewPager的自動滾動效果攀隔,然后再Handler發(fā)送一個延遲消息,形成循環(huán)栖榨。

    private Handler mTimeHandler = new Handler();
    private Runnable mTurningTask = new Runnable() {
        @Override
        public void run() {
            if (isTurning && mBannerViewPager != null) {
                int page = mBannerViewPager.getCurrentItem() + 1;
                mBannerViewPager.setCurrentItem(page);
                mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
            }
        }
    };
    
    /**
     * 啟動輪播
     * @param intervalTime 輪播間隔時間
     * @return
     */
    public CustomBanner<T> startTurning(long intervalTime) {
        isTurning = true;
        mIntervalTime = intervalTime;
        mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
        return this;
    }

5昆汹、添加和更新指示器
指示器的指示點用指示器容器mIndicatorLayout來承載,當ViewPager滾動的時候婴栽,指示器也要相應的做更新

    //根據(jù)輪播圖的數(shù)量來添加指示器的點
    //指示器的點用ImageView來表示满粗,樣式由使用者自定義
    private void initIndicator(int count) {
        mIndicatorLayout.removeAllViews();
        if (count > 0) {
            for (int i = 0; i < count; i++) {
                ImageView imageView = new ImageView(mContext);
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
0, DensityUtils.dp2px(mContext, 2), 0);
                mIndicatorLayout.addView(imageView, lp);
            }
        }
    }

    /**
     * 更新指示器
     */
    private void updateIndicator() {
        int count = mIndicatorLayout.getChildCount();
        //獲取ViewPager當前顯示的Item。
        int currentPage = getCurrentItem();
        if (count > 0) {
            for (int i = 0; i < count; i++) {
                ImageView view = (ImageView) mIndicatorLayout.getChildAt(i);
                if (i == currentPage) {
                    //設置選中樣式
                    view.setImageResource(mIndicatorSelectRes);
                } else {
                    //設置未選中樣式
                    view.setImageResource(mIndicatorUnSelectRes);
                }
            }
        }
    }

6愚争、設置輪播圖數(shù)據(jù)
把輪播圖的基本功能都實現(xiàn)了之后映皆,接下來就是填充數(shù)據(jù)了。下面先看設置數(shù)據(jù)的方法:

    /**
     * 設置輪播圖數(shù)據(jù)
     * @param creator 創(chuàng)建和更新輪播圖View的接口
     * @param data   輪播圖數(shù)據(jù)
     * @return
     */
    public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) {
        mAdapter = new BannerPagerAdapter<T>(mContext, creator, data);
        mBannerViewPager.setAdapter(mAdapter);
        return this;
    }

代碼非常的簡單轰枝,其實就是給mBannerViewPager設置了一個Adapter捅彻。上面的setPages方法接收兩個參數(shù):
1、creator:這是一個ViewCreator對象鞍陨,ViewCreator是負責創(chuàng)建和更新輪播圖的接口步淹。
2、data:這是輪播圖的數(shù)據(jù)诚撵。
他們的泛型T是輪播圖的數(shù)據(jù)類型缭裆,輪播圖的數(shù)據(jù)類型可以是任何的類型。
下面是ViewCreator接口代碼

    /**
     * 創(chuàng)建和更新輪播圖View的接口
     * @param <T>
     */
    public interface ViewCreator<T> {
        //創(chuàng)建輪播圖的每個項的View
        View createView(Context context, int position);
        //更新輪播圖
        void updateUI(Context context, View view, int position, T data);
    }

createView方法的返回值是View而不是ImageView寿烟,所以CustomBanner可以支持輪播所有的布局澈驼,而不僅僅是ImageView,雖然我們大部分情況使用的都是ImageView筛武。
如果你現(xiàn)在還不清楚ViewCreator是干什么的盅藻,那么請看下面的代碼购桑。下面是輪播圖適配器BannerPagerAdapter的核心代碼,通過這段代碼氏淑,你應該就能很清晰的理解ViewCreator的作用了。

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {

        View view = views.get(position);

        if (view == null) {
            //mCreator就是調用者傳入的ViewCreator對象
            //通過mCreator創(chuàng)建輪播圖的布局硕噩,所以輪播圖的布局是由調用者創(chuàng)建的
            view = mCreator.createView(mContext, position);
            views.put(position, view);
        }
        
        final int item = getActualPosition(position);
        final T t = mData.get(item);
        
        //通過mCreator把更新輪播圖數(shù)據(jù)的操作交給調用者去實現(xiàn)
        mCreator.updateUI(mContext, view, item, t);
        container.addView(view);
        return view;
    }

CustomBanner的實現(xiàn)思路和代碼分析到這里就結束了假残。相信現(xiàn)在大家對于輪播圖的實現(xiàn)已經(jīng)有了一定的了解了。至于CustomBanner的使用炉擅,我將在下一章《Android輪播圖控件CustomBanner的使用講解》具體講解辉懒,歡迎閱讀。下面先給大家看一下CustomBanner的效果:

演示.gif

上面貼出來的代碼只是CustomBanner的代碼摘要谍失,完整的代碼請訪問我在GitHub中的CustomBanner項目眶俩。

文章已同步到我的CSDN博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市快鱼,隨后出現(xiàn)的幾起案子颠印,更是在濱河造成了極大的恐慌,老刑警劉巖抹竹,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件线罕,死亡現(xiàn)場離奇詭異,居然都是意外死亡窃判,警方通過查閱死者的電腦和手機钞楼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袄琳,“玉大人询件,你說我怎么就攤上這事∷舴” “怎么了宛琅?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長窗轩。 經(jīng)常有香客問我夯秃,道長,這世上最難降的妖魔是什么痢艺? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任仓洼,我火速辦了婚禮,結果婚禮上堤舒,老公的妹妹穿的比我還像新娘色建。我一直安慰自己,他們只是感情好舌缤,可當我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布箕戳。 她就那樣靜靜地躺著某残,像睡著了一般。 火紅的嫁衣襯著肌膚如雪陵吸。 梳的紋絲不亂的頭發(fā)上玻墅,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天,我揣著相機與錄音壮虫,去河邊找鬼澳厢。 笑死,一個胖子當著我的面吹牛囚似,可吹牛的內容都是我干的剩拢。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼饶唤,長吁一口氣:“原來是場噩夢啊……” “哼徐伐!你這毒婦竟也來了?” 一聲冷哼從身側響起募狂,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤办素,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后熬尺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體摸屠,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年粱哼,在試婚紗的時候發(fā)現(xiàn)自己被綠了季二。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡揭措,死狀恐怖胯舷,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情绊含,我是刑警寧澤桑嘶,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站躬充,受9級特大地震影響逃顶,放射性物質發(fā)生泄漏。R本人自食惡果不足惜充甚,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一以政、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧伴找,春花似錦盈蛮、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽殊轴。三九已至,卻和暖如春袒炉,著一層夾襖步出監(jiān)牢的瞬間旁理,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工我磁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留韧拒,地道東北人。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓十性,卻偏偏與公主長得像,于是被迫代替她去往敵國和親塑悼。 傳聞我的和親對象是個殘疾皇子劲适,可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,264評論 25 707
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,784評論 22 665
  • 她特別喜歡Hello Kitty霞势,所以我叫她Kitty女郎。 三年前的夏天斑鸦,我在大學宿舍里整理東西愕贡,一個瘦高個的女...
    故人老大閱讀 444評論 0 0
  • 未來的未來 我不懂 迷失是怎樣的方向 過去又過去 我不會 回憶起缺失的味道 現(xiàn)在看現(xiàn)在 欣賞著風景的鏡框 清晨的初...
    T茗亦T閱讀 103評論 0 0
  • 第一封 傾城如昨, 歲月如她巷屿, 這一世你是我擱淺的蒹葭固以。 第二封 轉山轉水, 不為經(jīng)綸嘱巾,不拜佛塔憨琳, 只為你說過最深...
    納蘭木兒閱讀 816評論 0 23