久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

標題: 商城開發筆記-03-AndroidImageSlider實現廣告輪播條 [打印本頁]

作者: 51黑bing 時間: 2016-3-22 17:17
標題: 商城開發筆記-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 = 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);

}

四、效果圖

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

五、題外話

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

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

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

作者: 仙貝枇杷液 時間: 2016-6-27 14:20
敢問樓主，當點擊了廣告圖片以后要很久才會繼續循環播放（差不多1分鐘），這個在哪里可以設置呢？

歡迎光臨 (http://m.zg4o1577.cn/bbs/)

<abbr id="mg2qi"></abbr>