一、廣告輪播條的簡介
廣告輪播條在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"
如果覺得我的文字對你有所幫助的話,歡迎關注我的公眾號:
我的群歡迎大家進來探討各種技術與非技術的話題,有興趣的朋友們加我私人微信huannan88,我拉你進群交(♂)流(♀)。