支持橫向东跪、豎向無(wú)限滾動(dòng)和自定義指示器的廣告條BannerView和淘寶頭條效果

前言:有那么多的Banner框架畸陡,為什么還要重新寫呢鹰溜?其實(shí)不是由于第三方的太重、不好維護(hù)等原因丁恭,最致命的問題是第三方banner框架大多使用ViewPager實(shí)現(xiàn)曹动,而使用這種方式一般會(huì)伴隨兩個(gè)問題:

  • 1、如果適配器中g(shù)etItemCount()放回一個(gè)很大的數(shù)量return Integer.MAX_VALUE涩惑,可以很簡(jiǎn)單實(shí)現(xiàn)無(wú)線滾動(dòng)仁期,但是會(huì)產(chǎn)生ANR異常(我們公司項(xiàng)目以前就是這種方式實(shí)現(xiàn)),如果你也是或是你是用的第三方框架也是,那么你需要注意了
  • 2竭恬、如果適配器中g(shù)etItemCount()放回一個(gè)是真實(shí)size的倍數(shù)(很多框架都是返回3倍跛蛋,具體原因不細(xì)講了),代碼判斷循環(huán)痊硕,這種確實(shí)解決了無(wú)線循環(huán)赊级,也不會(huì)導(dǎo)致ANR,但是會(huì)有一個(gè)新的顯示問題岔绸,就是當(dāng)你滑動(dòng)到最后一條或是第一條需要顯示下一條的時(shí)候理逊,會(huì)生硬的直接換成下一頁(yè)內(nèi)容,會(huì)感覺頁(yè)面切換很生硬

替換banner實(shí)現(xiàn)方式前:公司項(xiàng)目使用了ViewPager 實(shí)現(xiàn)的無(wú)限滾動(dòng)廣告Banner
ANR異常統(tǒng)計(jì):到目前為止竟然有10幾頁(yè)之多盒揉,每一頁(yè)15條晋被,一條可能包含了上百次的ANR,這是多么恐怖的一個(gè)數(shù)字(假設(shè)15頁(yè)刚盈,每頁(yè)15條羡洛,每條100次,那么1515100=22500次)藕漱,實(shí)際上可能更多欲侮,下圖中第一條就有836次ARN

展示一部分

產(chǎn)生ANR 的原因:開篇已經(jīng)大致介紹,就是調(diào)用ViewPager.setCurrentItem()肋联,底層會(huì)去測(cè)量滾動(dòng)的偏移量威蕉,由于實(shí)現(xiàn)無(wú)線滾動(dòng)的方式是將適配器中間的getItemCount()方法返回一個(gè)無(wú)窮大的數(shù),所以在測(cè)量偏移量時(shí)會(huì)特別耗時(shí)橄仍,這樣就導(dǎo)致了ANR異常韧涨。

解決方案: 使用RecyclerView 實(shí)現(xiàn)的無(wú)限滾動(dòng)Banner,徹底解決調(diào)用ViewPager.setCurrentItem()導(dǎo)致的 ANR 異常 侮繁,并做到頁(yè)面切換絲滑順暢

先來一波效果圖展示(demo偏丑虑粥,無(wú)關(guān)緊要,注意效果)

普通橫向banner.gif

3d橫向banner.gif

豎向3d.gif

指示器.gif

頭條.gif

屬性介紹

 <!--廣告條-->
    <declare-styleable name="BannerView">
        <!--時(shí)間-->
        <attr name="interval" />
        <!--方向-->
        <attr name="orientation" format="enum">
            <enum name="horizontal" value="0" />
            <enum name="vertical" value="1" />
        </attr>
        <!--自動(dòng)播放-->
        <attr name="autoPlaying" format="boolean"/>
        <!--item間的間距-->
        <attr name="itemSpace" format="integer"/>
        <!--中間的item大小和設(shè)置item大小的比例-->
        <attr name="centerScale" format="float"/>
        <!--手指滑動(dòng)時(shí)鼎天,banner移動(dòng)的的速度-->
        <attr name="moveSpeed" format="float"/>
        <!--數(shù)據(jù)為空時(shí),展示的view-->
        <attr name="empty_layout" format="reference" />

    </declare-styleable>

接入并使用框架

添加依賴
//在工程的gradle中添加jitpack倉(cāng)庫(kù)
allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
dependencies {
            //在module的gradle中添加依賴
            implementation 'com.github.93Laer:BannerView_master:v1.0.1'
    }

重新同步一下

使用步驟:3+2

第一步:布局

<com.example.laitianbing.bannerview_master.banner_view.BannerView
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/bannerBackground"
        app:autoPlaying="true"
        app:empty_layout="@layout/empty_view"
        app:interval="3000" />

第二步:找到控件
mBanner = findViewById(R.id.banner);
第三部:綁定適配器暑竟,并放入初始化數(shù)據(jù)源

 mAdapter = new BannerAdapter<Item>(this, itemLayout, items) {
            @Override
            public void convert(ViewHolder holder, final Item item) {
                //書寫自己的處理邏輯
                holder.setImage(R.id.iv_image, item.imgRes);
                holder.setText(R.id.tv_name, item.url);
                holder.itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        WebActivity.start(BannerActivity.this, item.url);
                    }
                });
            }
        };
        mBanner.setAdapter(mAdapter);

第四部:添加指示器(不顯示指示器就沒有此步驟)

        //創(chuàng)建指示器
        mCircleIndicator = new RectIndicator(this, RectIndicator.SHAPE_CIRCLE);
        //設(shè)置指示器長(zhǎng)和寬.
        mCircleIndicator.setIndicatorSize(10, 10);
        //設(shè)置指示器之間的間距
        mCircleIndicator.setItemMargin(20);
        //設(shè)置指示器顯示在banner的底部的中間
        mCircleIndicator.setRules(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.CENTER_HORIZONTAL);
        //設(shè)置指示器顯示距離banner底部10dp
        mCircleIndicator.setMargins(0, 0, 0, 10);
        //添加指示器
        mBanner.addIndicator(mCircleIndicator);

第五部:刷新數(shù)據(jù)(不刷新數(shù)據(jù)就沒有此步驟)
mAdapter.setDatas(DataHelper.getItems());

使用進(jìn)階提示:

  • 1斋射、在出廠前已將指示器分為圖形指示器和文本指示器兩類,如果想自定義圖形指示器則直接繼承BaseIndicator即可
  • 2育勺、在添加指示器的時(shí)候,你可以像在RelativeLayout中設(shè)置子view的位置一樣設(shè)置指示器的位置罗岖,換句話說 你可以指定指示器顯示在banner中的任意位置
  • 3涧至、可以自定義指示器,但是 必須繼承view且實(shí)現(xiàn)Indicator接口 桑包,換句話說任意View南蓬,只要實(shí)現(xiàn)Indicator接口,它就可以成為指示器哑了,如果還不懂赘方,那就看TextIndicator實(shí)現(xiàn)
  • 4、如果項(xiàng)目中要實(shí)現(xiàn)想淘寶弱左,京東的頭條那種垂直滾動(dòng)窄陡,使用該框架就可以輕松完成

項(xiàng)目鏈接:BannerView_master

最后感謝大家的閱讀,如果對(duì)你有幫助還請(qǐng)點(diǎn)贊鼓勵(lì)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拆火,一起剝皮案震驚了整個(gè)濱河市跳夭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌们镜,老刑警劉巖币叹,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異模狭,居然都是意外死亡颈抚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門胞皱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邪意,“玉大人,你說我怎么就攤上這事反砌∥砉恚” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵宴树,是天一觀的道長(zhǎng)策菜。 經(jīng)常有香客問我,道長(zhǎng)酒贬,這世上最難降的妖魔是什么又憨? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮锭吨,結(jié)果婚禮上蠢莺,老公的妹妹穿的比我還像新娘。我一直安慰自己零如,他們只是感情好躏将,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布锄弱。 她就那樣靜靜地躺著,像睡著了一般祸憋。 火紅的嫁衣襯著肌膚如雪会宪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天蚯窥,我揣著相機(jī)與錄音掸鹅,去河邊找鬼。 笑死拦赠,一個(gè)胖子當(dāng)著我的面吹牛巍沙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播矛紫,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼赎瞎,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了颊咬?” 一聲冷哼從身側(cè)響起务甥,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎喳篇,沒想到半個(gè)月后敞临,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡麸澜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年挺尿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片炊邦。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡编矾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出馁害,到底是詐尸還是另有隱情窄俏,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布碘菜,位于F島的核電站凹蜈,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏忍啸。R本人自食惡果不足惜仰坦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望计雌。 院中可真熱鬧悄晃,春花似錦、人聲如沸凿滤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至眷细,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鹃祖,已是汗流浹背溪椎。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恬口,地道東北人校读。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像祖能,于是被迫代替她去往敵國(guó)和親歉秫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)养铸、插件雁芙、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,102評(píng)論 4 62
  • Banner 基本上所有的App首頁(yè)都包含一個(gè)輪播器,一般稱之為Banner钞螟。通過這一個(gè)組件可以實(shí)現(xiàn)以下幾個(gè)功能:...
    獅_子歌歌閱讀 1,613評(píng)論 0 2
  • 第九章:意義:或概念和理解 導(dǎo)讀題:1兔甘、用杜威的觀點(diǎn)解釋“一個(gè)人只能看到他所能看到的”一句話的意思。我們看到某種活...
    素以為絢兮2013閱讀 930評(píng)論 0 3
  • 一本故事書 游離在這個(gè)世界 但 每個(gè)讀者都是個(gè)江湖人士 或平淡或璀璨 可每個(gè)讀者都有很多大大小小的故事 如果每個(gè)都...
    隨心一筆閱讀 189評(píng)論 0 0
  • 12月7日鳞滨,由省教育廳聯(lián)合省衛(wèi)生健康委起草的《廣東省綜合防控兒童青少年近視實(shí)施方案(征求意見稿)》公布洞焙。《實(shí)施方案...
    新頁(yè)芃芃閱讀 257評(píng)論 0 0