全面總結(jié)輪播圖

輪播圖作為一個(gè)被用爛了的功能,實(shí)在是太常見(jiàn)了. 雖然有統(tǒng)計(jì)說(shuō)十個(gè)人里面, 9.9個(gè)都不會(huì)去點(diǎn)它... 但是,你不能阻止產(chǎn)品依然喜歡用它. 嗯,這個(gè)地方不知道該放什么,那就來(lái)個(gè)輪播圖吧.

關(guān)于輪播圖的介紹有很多,但是在android里,可以實(shí)現(xiàn)這個(gè)功能的方法并不多.這篇文章,就是對(duì)這些方法做個(gè)總結(jié),算是一個(gè)記錄(有的方式,只介紹下思路,因?yàn)槲易罱K并不會(huì)采用).

方式一: 使用 ViewFlipper

ViewFlipper ,作為一個(gè) ViewGroup 它可以控制它的子view切換. 就自動(dòng)播放來(lái)說(shuō),它比viewpager更加強(qiáng)大,也更簡(jiǎn)單:

  • setAutoStart(true) ; // 設(shè)置自動(dòng)播放
  • showNext(); //下一頁(yè)
  • showPrevious(); //上一頁(yè)
  • setFlipInterval(5000);//設(shè)置播放間隔時(shí)間
  • setInAnimation(); //設(shè)置進(jìn)入的動(dòng)畫
  • setOutAnimation();//...

ViewFlipper關(guān)于自動(dòng)播放的API非常方便,并且它默認(rèn)就會(huì)無(wú)限循環(huán),可是它的缺點(diǎn)也很明顯,那就是不能響應(yīng)手勢(shì). 當(dāng)然,我們可以通過(guò)重寫 onTouch 方法,如果向左滑動(dòng),那就切換到下一頁(yè);向右滑動(dòng),就切到上一頁(yè). 但是就算這樣也僅僅只能簡(jiǎn)單的做下控制,并不能實(shí)時(shí)響應(yīng)手勢(shì)滑動(dòng)的距離,所以一般不會(huì)采用.感興趣的可以自行百度.

方式二:使用viewpager的第一種姿勢(shì)

這個(gè)是被很多人稱為 真.無(wú)限滾動(dòng) .光用文字可能不好表達(dá),容我簡(jiǎn)單的畫個(gè)草圖.

1.png

原理就是這樣,對(duì)源數(shù)據(jù)作下處理,將末尾數(shù)據(jù)復(fù)制一份,插入到最前面;將原來(lái)第一條數(shù)據(jù)復(fù)制到最后面. 然后在滑到頭的時(shí)候,偷偷重置下下標(biāo).這樣就讓人感覺(jué)無(wú)限滾動(dòng)了. 至于怎么 偷偷的切換 , 代碼如下:

addOnPageChangeListener(new OnPageChangeListener() {
    boolean needChange;
    int changeIndex;
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 內(nèi)容大于 1 ,才做輪播處理
        if(adapter == null || adapter.getCount() <= 1){
            needChange = false;
            return;
        }
       if(position == 0){// 0 -> 倒數(shù)第二個(gè)
           needChange = true;
           changeIndex = adapter.getCount() - 2;
       }else if(position == adapter.getCount() - 1){ // 最后 -> 下標(biāo)1
           needChange = true;
           changeIndex = 1;
       }else {
           needChange = false;
       }
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
       if (ViewPager.SCROLL_STATE_IDLE == state && needChange) {
          needChange = false;
          // 切換時(shí)不顯示動(dòng)畫
          setCurrentItem(changeIndex,false);
      }
    }
 });

這樣就實(shí)現(xiàn)了真正的無(wú)限滾動(dòng),然后再加個(gè)定時(shí)器做自動(dòng)播放,似乎就沒(méi)有任何問(wèn)題了. 但是,這種方式實(shí)現(xiàn)的輪播圖有兩個(gè)問(wèn)題

  • 有的圖片加載框架會(huì)水土不服,可能會(huì)在刷新數(shù)據(jù)的時(shí)候出現(xiàn)閃爍. 比如我使用 Glide的時(shí)候沒(méi)問(wèn)題,但是如果改用velloy,就會(huì)出現(xiàn).也許是我使用 velloy的姿勢(shì)不對(duì)?
  • 在有的手機(jī)上,快速的連續(xù)滑動(dòng)的時(shí)候,偶爾會(huì)卡頓.

因?yàn)樯厦娴膯?wèn)題,使我不得不放棄了 真.無(wú)限滾動(dòng)

方式三: 使用viewpager的第二種姿勢(shì)

這種方式的原理相對(duì)于 方式二 來(lái)說(shuō),簡(jiǎn)單的多,并且只能算 偽.無(wú)限滾動(dòng) .
就是在設(shè)置適配器的時(shí)候,getCount返回個(gè)非常大的數(shù)(Integer.MAX_VALUE), 然后讓數(shù)據(jù)不斷的重復(fù)再重復(fù)的顯示. 需要注意的是,一開(kāi)始的下標(biāo)不能為0,而是在中間的某個(gè)位置,這樣才能保證兩個(gè)方向都可以滑動(dòng)

老實(shí)說(shuō),如果方式二沒(méi)上那些問(wèn)題的話,身為強(qiáng)迫癥的我,是不會(huì)接受方式三的. 不過(guò)在使用方式三實(shí)現(xiàn)輪播圖的時(shí)候,也遇到幾個(gè)問(wèn)題,值得說(shuō)一下.

  1. 一開(kāi)始我擔(dān)心內(nèi)存占用較大,事實(shí)證明想太多了.因?yàn)関iewpager默認(rèn)只會(huì)初始化當(dāng)前位置,及當(dāng)前位置左右各一個(gè). 并且在代碼中,我也會(huì)對(duì)ImageView做復(fù)用處理,所以不用擔(dān)心內(nèi)存問(wèn)題.

  2. 還是數(shù)據(jù)刷新的問(wèn)題,前面我們說(shuō)過(guò),因?yàn)橐笥叶伎梢?無(wú)限滾動(dòng)",所以在 notifyDataSetChanged() 之后,需要通過(guò)
    viewPager.setCurrentItem(data.size() x 非常大的數(shù),false);讓viewpager默認(rèn)顯示在中間某個(gè)位置. 但這會(huì)引發(fā) ANR, 通過(guò)查看源碼,發(fā)現(xiàn)它內(nèi)部調(diào)用了
    void setCurrentItemInternal(int item, boolean smoothScroll, boolean always, int velocity)

    在該方法內(nèi)部,又發(fā)現(xiàn)了這個(gè)

     for (int i = 0; i < mItems.size(); i++) {    
         mItems.get(i).scrolling = true;
     }
    

    所以不難猜測(cè),就是因?yàn)檠h(huán)次數(shù)太多,才導(dǎo)致了 ANR 問(wèn)題.對(duì)這個(gè)問(wèn)題,研究了很久也沒(méi)有找到好的解決辦法.甚至僅僅只是setCurrentItem(1000,false),也有ANR的風(fēng)險(xiǎn).

    但奇怪的是,當(dāng)設(shè)置適配器之后,第一個(gè)調(diào)用 setCurrentItem 是沒(méi)有問(wèn)題的. 所以,我不得不放棄了通過(guò) notifyDataSetChanged 更新數(shù)據(jù)的方式,退而求其次,每次都重新設(shè)置適配器. 這樣在復(fù)用上做出妥協(xié),內(nèi)存占用肯定是有所增加的.還好,通過(guò)監(jiān)控可以發(fā)現(xiàn),多次刷新數(shù)據(jù)后,內(nèi)存并不會(huì)增加太多,而是會(huì)穩(wěn)定在一定范圍.

以上就是方式三實(shí)現(xiàn)輪播圖的原理了,當(dāng)然還有一些細(xì)節(jié)需要處理.

  • 自動(dòng)輪播
public synchronized void setPlaying(boolean playing){    
    if(!isPlaying && playing && viewPager.getAdapter() != null && viewPager.getAdapter().getCount() > 2){        
        handler.postDelayed(playTask,5000);        
        isPlaying = true;    
    }else if(isPlaying && !playing){        
        handler.removeCallbacksAndMessages(null);        
        isPlaying = false;   
    }
 }

 ...

 private Runnable playTask = new  Runnable(){    
    @Override    
    public void run() {        
         viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);        
         handler.postDelayed(this,5000);    
    }
 };
  • 事件處理,因?yàn)檩啿D常常會(huì)在 RecyclerView 或者 ScrollView里面,所以為了更好的兼容性,以及實(shí)現(xiàn)觸摸暫停,事件處理是有必要的.
 @Override
 public boolean dispatchTouchEvent(MotionEvent ev) {    
    switch (ev.getAction()) {        
      case MotionEvent.ACTION_DOWN:            
         startX = (int) ev.getX();            
         startY = (int) ev.getY();                       
         getParent().requestDisallowInterceptTouchEvent(true);            
         setPlaying(false);            
         break;        
     case MotionEvent.ACTION_MOVE:            
         int moveX = (int) ev.getX();            
         int moveY = (int) ev.getY();            
         int disX = moveX - startX;            
         int disY = moveY - startY;            
         getParent().requestDisallowInterceptTouchEvent(2 * Math.abs(disX) > Math.abs(disY));            
         setPlaying(false);            
         break;        
      case MotionEvent.ACTION_UP:        
      case MotionEvent.ACTION_CANCEL:            
         setPlaying(true);            
         break;   
     }    
     return super.dispatchTouchEvent(ev);
  }
  • 最后,因?yàn)檩啿ハ鄬?duì)來(lái)說(shuō)還是比較占用資源的,所以必要的優(yōu)化還是要有的,比如頁(yè)面不可見(jiàn)時(shí)自動(dòng)暫停,可見(jiàn)時(shí)恢復(fù)播放.
@Overrideprotected 
void onAttachedToWindow() {    
   super.onAttachedToWindow();    
   setPlaying(true);
}

@Override
protected void onDetachedFromWindow() {     
   super.onDetachedFromWindow();    
   setPlaying(false);
}

@Override
protected void onWindowVisibilityChanged(int visibility) {    
    if(visibility == View.GONE){        // 停止輪播        
       setPlaying(false);    
    }else if(visibility == View.VISIBLE){        // 開(kāi)始輪播        
       setPlaying(true);   
    }    
   super.onWindowVisibilityChanged(visibility);
}

另外作為一個(gè)高度獨(dú)立,可復(fù)用的組件,當(dāng)然要內(nèi)部就實(shí)現(xiàn)圓點(diǎn)指示器了,不過(guò)這里就不啰說(shuō)了.

最后看下效果( 不會(huì)做動(dòng)圖(┬_┬) )

S61023-153210.jpg

完整代碼點(diǎn)這里

PS: 一開(kāi)始我想使用泛型,可以接受任何實(shí)體集合,然后使用的時(shí)候,通過(guò)復(fù)寫方法,達(dá)到支持任何圖片加載框架. 后來(lái)又覺(jué)得沒(méi)有必要,所以內(nèi)部固定了采用Glide加載圖片,如果你想替換,也只是一行代碼的事. 同樣是支持任何數(shù)據(jù)類型,只需要讓原來(lái)的實(shí)體實(shí)現(xiàn)一個(gè)接口就可以了.

以上就是本人在實(shí)現(xiàn)輪播圖的過(guò)程中的思路,遇到的問(wèn)題,以及最終采用的方案. 也許有什么不對(duì)的地方,或者誰(shuí)有其它的想法,歡迎交流.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末校辩,一起剝皮案震驚了整個(gè)濱河市己莺,隨后出現(xiàn)的幾起案子游岳,更是在濱河造成了極大的恐慌萍悴,老刑警劉巖眯牧,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绘沉,死亡現(xiàn)場(chǎng)離奇詭異枉阵,居然都是意外死亡砂吞,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)函喉,“玉大人避归,你說(shuō)我怎么就攤上這事」芎牵” “怎么了梳毙?”我有些...
    開(kāi)封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)捐下。 經(jīng)常有香客問(wèn)我账锹,道長(zhǎng),這世上最難降的妖魔是什么坷襟? 我笑而不...
    開(kāi)封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任奸柬,我火速辦了婚禮,結(jié)果婚禮上婴程,老公的妹妹穿的比我還像新娘廓奕。我一直安慰自己,他們只是感情好档叔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布桌粉。 她就那樣靜靜地躺著,像睡著了一般衙四。 火紅的嫁衣襯著肌膚如雪铃肯。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天传蹈,我揣著相機(jī)與錄音押逼,去河邊找鬼。 笑死惦界,一個(gè)胖子當(dāng)著我的面吹牛挑格,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播表锻,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼恕齐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了瞬逊?” 一聲冷哼從身側(cè)響起显歧,我...
    開(kāi)封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎确镊,沒(méi)想到半個(gè)月后士骤,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蕾域,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年拷肌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了到旦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡巨缘,死狀恐怖添忘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情若锁,我是刑警寧澤搁骑,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站又固,受9級(jí)特大地震影響仲器,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜仰冠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一乏冀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧洋只,春花似錦辆沦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至舷礼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間郊闯,已是汗流浹背妻献。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留团赁,地道東北人育拨。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像欢摄,于是被迫代替她去往敵國(guó)和親熬丧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評(píng)論 25 707
  • 前言 目前市場(chǎng)上的APP中怀挠,輪播圖可以說(shuō)是很常見(jiàn)的析蝴。一個(gè)好的輪播圖,基本上適用于所有的APP绿淋。是時(shí)候打造一個(gè)自己的...
    帶心情去旅行閱讀 17,296評(píng)論 15 93
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)闷畸、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,094評(píng)論 4 62
  • 規(guī)則順序 select - from - where - group by - having - order by...
    d76d0c9d2b04閱讀 282評(píng)論 0 0
  • HoooChan閱讀 222評(píng)論 0 0