03-AndroidImageSlider實現廣告輪播條

一、廣告輪播條的簡介

廣告輪播條在HTML網頁設計以及APP界面設計中非常常見,如下圖所示。在Android中,實現的方式可以是自定義ViewPager來實現,但是我們程序員中流傳的一句名言,“不要重復造輪子”。因此我們也可以通過網上已經有的開源項目來進行開發,拿來主義,直接拿來用就可以了,這樣極大地加快了我們的開發速度。

二、AndroidImageSlider簡介

AndroidImageSlider是GitHub上的一個非常火的開源項目,由“代碼家”出品,他的網址是

https://github.com/daimajia/AndroidImageSlider

下面的用法介紹很多都是參考他的GitHub主頁的常規用法,因此建議大家學習使用開源項目的時候直接參考GitHub主頁的用法介紹。

下圖是AndroidImageSlider的架構,最核心的類是SliderLayout,他繼承自相對布局,包含了可以左右滑動切換的SliderView,以及頁面指示器PagerIndicator,也就是上圖中的4個小圓點。這兩個都可以自定義,常規的用法是:使用TextSliderView+自定義PagerIndicator,下面對常規用法就行介紹。

三、AndroidImageSlider實現廣告輪播條

1、參考GithHub中AndroidImageSlider主頁的介紹,首先將需要的三個依賴項目引入進來,他們分別是:(版本是楠妹妹寫這個筆記的時候的最新版)
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'

建議全部的依賴項目統一使用最新的版本,因為依賴的項目之間可能也會存在依賴,如果不想出現版本沖突問題,最后全部使用最新版,解決辦法就是直接在Android Studio里面搜索下載,如下圖所示(注意:GithHub主頁上面寫的不一定是最新版)。

2、在布局文件中放置SliderLayout以及PagerIndicator。注意布局中我是通過相對布局把PagerIndicator壓在SliderLayout之上的。代碼都可以在GitHub上找到參考。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <com.daimajia.slider.library.Indicators.PagerIndicator
            android:id="@+id/custom_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="10dp"
            custom:selected_color="@color/colorPrimary"
            custom:selected_height="3dp"
            custom:selected_padding_left="2dp"
            custom:selected_padding_right="2dp"
            custom:selected_width="16dp"
            custom:shape="rect"
            custom:unselected_color="#55333333"
            custom:unselected_height="3dp"
            custom:unselected_padding_left="2dp"
            custom:unselected_padding_right="2dp"
            custom:unselected_width="16dp"
            />

    </com.daimajia.slider.library.SliderLayout>
</RelativeLayout>

3、代碼實現,主要步驟是:

  • 準備好要顯示的數據,包括圖片和圖片描述等。

  • 新建若干個TextSliderView并且設置好數據以及相應的監聽,最后添加到SliderLayout里面。

  • 對SliderLayout進行一些個性化的設置,比如動畫,自定義PagerIndicator,每一個廣告的延時時間等。

  • 最后別忘了在布局摧毀的時候,調用sliderLayout.stopAutoCycle();方法停止廣告的輪播,以釋放資源。

      /**
       * 初始化首頁的商品廣告條
       */
      private void initImageSlider() {
      
          sliderLayout = (SliderLayout) v.findViewById(R.id.slider);
          indicator = (PagerIndicator) v.findViewById(R.id.custom_indicator);
      
          //準備好要顯示的數據
          List<String> imageUrls = new ArrayList<>();
          final List<String> descriptions = new ArrayList<>();
          imageUrls.add("http://m.360buyimg.com/mobilecms/s300x98_jfs/t2416/102/20949846/13425/a3027ebc/55e6d1b9Ne6fd6d8f.jpg");
          imageUrls.add("http://m.360buyimg.com/mobilecms/s300x98_jfs/t1507/64/486775407/55927/d72d78cb/558d2fbaNb3c2f349.jpg");
          imageUrls.add("http://m.360buyimg.com/mobilecms/s300x98_jfs/t1363/77/1381395719/60705/ce91ad5c/55dd271aN49efd216.jpg");
          descriptions.add("新品推薦");
          descriptions.add("時尚男裝");
          descriptions.add("家電秒殺");
      
          for (int i = 0; i < imageUrls.size(); i++) {
              //新建三個展示View,并且添加到SliderLayout
              TextSliderView tsv = new TextSliderView(getActivity());
              tsv.image(imageUrls.get(i)).description(descriptions.get(i));
              final int finalI = i;
              tsv.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
                  @Override
                  public void onSliderClick(BaseSliderView slider) {
                      Toast.makeText(getActivity(), descriptions.get(finalI), Toast.LENGTH_SHORT).show();
                  }
              });
              sliderLayout.addSlider(tsv);
          }
      
          //對SliderLayout進行一些自定義的配置
          sliderLayout.setCustomAnimation(new DescriptionAnimation());
          sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
          sliderLayout.setDuration(3000);
      //      sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
          sliderLayout.setCustomIndicator(indicator);
      }
    

四、效果圖

感覺非常炫酷有木有,好了,今天的介紹到此結束,關于AndroidImageSlider更多更詳細更牛逼的用法,還是建議大家去他的GitHub上參考與學習,因為上面的絕大部分牛逼的代碼都是外國人寫的,前提是你要學好英文(⊙o⊙)哦!

五、題外話

今天楠妹妹遇到了一個奇葩的問題,就是自定義的PagerIndicator一直不能按照自己的意愿去修改他的屬性。郁悶了一個晚上。后來發現原來是命名空間寫錯了,當時是Android Studio自動幫我引入的命名空間(第一個),雖然項目沒有報錯,運行也沒有問題,就是不能實現自定義的PagerIndicator。后來改為第二個才行。原因是命名空間寫錯導致一些自定義屬性沒法正常使用,希望大家不要再犯同樣的錯誤(≧▽≦)/啦啦啦。

xmlns:custom="http://schemas.android.com/tools"

xmlns:custom="http://schemas.android.com/apk/res-auto"

如果覺得我的文字對你有所幫助的話,歡迎關注我的公眾號:

公眾號:Android開發進階

我的群歡迎大家進來探討各種技術與非技術的話題,有興趣的朋友們加我私人微信huannan88,我拉你進群交(♂)流(♀)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,362評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,013評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,346評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,421評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,146評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,534評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,585評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,767評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,318評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,074評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,258評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,828評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,486評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,916評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,156評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,993評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,234評論 2 375

推薦閱讀更多精彩內容