|
一、廣告輪播條的簡介
廣告輪播條在HTML網(wǎng)頁設(shè)計以及APP界面設(shè)計中非常常見，如下圖所示。在Android中，實現(xiàn)的方式可以是自定義ViewPager來實現(xiàn)，但是我們程序員中流傳的一句名言，“不要重復(fù)造輪子”。因此我們也可以通過網(wǎng)上已經(jīng)有的開源項目來進行開發(fā)，拿來主義，直接拿來用就可以了，這樣極大地加快了我們的開發(fā)速度。
二、AndroidImageSlider簡介 AndroidImageSlider是GitHub上的一個非�；鸬拈_源項目，由“代碼家”出品，他的網(wǎng)址是https://github.com/daimajia/AndroidImageSlider。下面的用法介紹很多都是參考他的GitHub主頁的常規(guī)用法，因此建議大家學(xué)習使用開源項目的時候直接參考GitHub主頁的用法介紹。
下圖是AndroidImageSlider的架構(gòu)，最核心的類是SliderLayout，他繼承自相對布局，包含了可以左右滑動切換的SliderView，以及頁面指示器PagerIndicator，也就是上圖中的4個小圓點。這兩個都可以自定義，常規(guī)的用法是：使用TextSliderView+自定義PagerIndicator，下面對常規(guī)用法就行介紹。
三、AndroidImageSlider實現(xiàn)廣告輪播條 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' 建議全部的依賴項目統(tǒng)一使用最新的版本，因為依賴的項目之間可能也會存在依賴，如果不想出現(xiàn)版本沖突問題，最后全部使用最新版，解決辦法就是直接在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、代碼實現(xiàn)，主要步驟是
· 準備好要顯示的數(shù)據(jù)，包括圖片和圖片描述等。
· 新建若干個TextSliderView并且設(shè)置好數(shù)據(jù)以及相應(yīng)的監(jiān)聽，最后添加到SliderLayout里面。
· 對SliderLayout進行一些個性化的設(shè)置，比如動畫，自定義PagerIndicator，每一個廣告的延時時間等。
· 最后別忘了在布局摧毀的時候，調(diào)用sliderLayout.stopAutoCycle();方法停止廣告的輪播，以釋放資源。
/** * 初始化首頁的商品廣告條 */ private void initImageSlider() { sliderLayout = (SliderLayout) v.findViewById(R.id.slider); indicator = (PagerIndicator) v.findViewById(R.id.custom_indicator); //準備好要顯示的數(shù)據(jù) 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 = newTextSliderView(getActivity()); tsv.image(imageUrls.get(i)).description(descriptions.get(i)); final int finalI = i; tsv.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderViewslider) { 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); }
四、效果圖 感覺非常炫酷有木有，好了，今天的介紹到此結(jié)束，關(guān)于AndroidImageSlider更多更詳細更牛逼的用法，還是建議大家去他的GitHub上參考與學(xué)習，因為上面的絕大部分牛逼的代碼都是外國人寫的，前提是你要學(xué)好英文(⊙o⊙)哦！
五、題外話
今天楠妹妹遇到了一個奇葩的問題，就是自定義的PagerIndicator一直不能按照自己的意愿去修改他的屬性。郁悶了一個晚上。后來發(fā)現(xiàn)原來是命名空間寫錯了，當時是Android Studio自動幫我引入的命名空間（第一個），雖然項目沒有報錯，運行也沒有問題，就是不能實現(xiàn)自定義的PagerIndicator。后來改為第二個才行。原因是命名空間寫錯導(dǎo)致一些自定義屬性沒法正常使用，希望大家不要再犯同樣的錯誤~\(≧▽≦)/~啦啦啦。
xmlns:custom="http://schemas.android.com/tools" xmlns:custom="http://schemas.android.com/apk/res-auto"
| 
