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