AndroidImageSlider實(shí)現(xiàn)炫酷輪播廣告效果
本文實(shí)例為大家分享了AndroidImageSlider實(shí)現(xiàn)炫酷輪播廣告的具體代碼,供大家參考,具體內(nèi)容如下

本文為菜鳥(niǎo)窩作者劉婷的連載?!鄙坛琼?xiàng)目實(shí)戰(zhàn)”系列來(lái)聊聊仿”京東淘寶的購(gòu)物商城”如何實(shí)現(xiàn)。
AndroidImageSlider 是一個(gè)神奇而且方便的 Android 圖片滾動(dòng)框架,在菜鳥(niǎo)商城項(xiàng)目中我們就要使用這個(gè)框架來(lái)實(shí)現(xiàn)炫酷的輪播廣告。
AndroidImageSlider 架構(gòu)分析
首先我們看圖說(shuō)話,下面是 AndroidImageSlider 的架構(gòu)分析圖。

該架構(gòu)分析圖中的 SliderLayout 是一個(gè)繼承于 RelativeLayout 的自定義View,也是該框架的核心。它由 SliderView 和 PagerIndicator 組成。而 SliderView 分為了 DefaultSliderView 和 TextSliderView 兩部分,其中 DefaultSliderView 是只支持圖片加載滾動(dòng),而 TextSliderView 不僅支持圖片還支持文本的顯示。Transition effects 和Animation 主要是動(dòng)畫(huà)效果的控制,另外還有兩個(gè)重要的監(jiān)聽(tīng)事件分別為 onSliderClickListener 和 onPageChangeListener,顧名思義,一個(gè)是點(diǎn)擊事件監(jiān)聽(tīng),另一個(gè)是頁(yè)面切換事件監(jiān)聽(tīng)。
基本使用
已經(jīng)了解了框架的基本構(gòu)造,下面就是要看如何使用了,使用的方法也很簡(jiǎn)單。
1. Gradle 依賴配置
我們這里使用的是 android Studio 2.2.3 開(kāi)發(fā)工具,Eclipse 引用第三方庫(kù)的具體方法可以參考AndroidImageSlider 源碼說(shuō)明。在 build.gradle 文件中集成第三方庫(kù)的依賴。
xml
dependencies {
compile 'com.daimajia.slider:library:1.1.5@aar'
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.android.support:support-v4:25.2.0'}
2. 添加權(quán)限
使用該框架還需要添加相應(yīng)的權(quán)限,分別為網(wǎng)絡(luò)權(quán)限和讀文件的權(quán)限。
xml <uses-permission android:name="android.permission.INTERNET"></uses-permission> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>
3. 添加到布局 Layout 中
將 SliderLayout 添加到相應(yīng)的布局文件 Layout 中。
xml <com.daimajia.slider.library.SliderLayout android:id="@+id/home_slider_ad" android:layout_width="match_parent" android:layout_height="@dimen/large_height"></com.daimajia.slider.library.SliderLayout>
如果需要自定義的 PagerIndicator 的話,可以自定義,當(dāng)然也可以使用該框架自帶的,這里是自定義 PagerIndicator 的源碼。
xml <com.daimajia.slider.library.Indicators.PagerIndicator android:id="@+id/home_indicator_ad" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" custom:selected_color="#0095BF" custom:unselected_color="#55333333" custom:selected_drawable="@drawable/bird" custom:shape="oval" custom:selected_padding_left="5dp" custom:selected_padding_right="5dp" custom:unselected_padding_left="5dp" custom:unselected_padding_right="5dp" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" custom:selected_width="6dp" custom:selected_height="6dp" custom:unselected_width="6dp" custom:unselected_height="6dp" android:layout_marginBottom="20dp"> </com.daimajia.slider.library.Indicators.PagerIndicator>
4. 在 Activity/Fragment 中定義以及配置 SliderLayout
首先就是要獲取到 SliderLayout 控件以及自定義的 Indicator。
xml mSlider = (SliderLayout) view.findViewById(R.id.home_slider_ad); indicator =(PagerIndicator)view.findViewById(R.id.home_indicator_ad);
然后就是準(zhǔn)備好測(cè)試的數(shù)據(jù),我在這里定義了一個(gè)實(shí)體類 BannerInfo,包括了圖片 imgUrl 和描述內(nèi)容 name。定義好實(shí)體類后就開(kāi)始設(shè)置相應(yīng)的測(cè)試數(shù)據(jù)并且添加到滾動(dòng)圖片列表 listBanner 中。
xml
private void getBannerData() {
BannerInfo bannerInfo_01 = new BannerInfo();
bannerInfo_01.setName("音箱狂歡");
bannerInfo_01.setImgUrl("http://7mno4h.com2.z0.glb.qiniucdn.com/5608f3b5Nc8d90151.jpg");
BannerInfo bannerInfo_02 = new BannerInfo();
bannerInfo_02.setName("手機(jī)國(guó)慶禮");
bannerInfo_02.setImgUrl("http://7mno4h.com2.z0.glb.qiniucdn.com/5608eb8cN9b9a0a39.jpg");
BannerInfo bannerInfo_03 = new BannerInfo();
bannerInfo_03.setName("IT生活");
bannerInfo_03.setImgUrl("http://7mno4h.com2.z0.glb.qiniucdn.com/5608cae6Nbb1a39f9.jpg");
listBanner.add(bannerInfo_01);
listBanner.add(bannerInfo_02);
listBanner.add(bannerInfo_03);
}
接下來(lái)就是要配置 SliderLayout 的相關(guān)屬性了,添加自定義的 Indicator,設(shè)置動(dòng)畫(huà)效果,添加圖片列表數(shù)據(jù)以及設(shè)置監(jiān)聽(tīng)事件
xml
private void initSlider() {
if (listBanner != null) {
for (BannerInfo bannerInfo : listBanner) {
TextSliderView textSliderView = new TextSliderView(this.getActivity());
textSliderView.image(bannerInfo.getImgUrl())
.description(bannerInfo.getName())
.setScaleType(BaseSliderView.ScaleType.CenterCrop)
.setOnSliderClickListener(this);
mSlider.addSlider(textSliderView);
}
}
mSlider.setCustomIndicator(indicator);
mSlider.setCustomAnimation(new DescriptionAnimation());
mSlider.setPresetTransformer(SliderLayout.Transformer.RotateUp);
mSlider.setDuration(3000);
mSlider.addOnPageChangeListener(this);
}
5. 在onStop() 中停止 SliderLayout 滾動(dòng)
在 Activity/Fragment 生命周期結(jié)束前,需要先停止圖片的滾動(dòng),防止出現(xiàn)內(nèi)存溢出等問(wèn)題。
xml
@Override
public void onStop() {
// To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
mSlider.stopAutoCycle();
super.onStop();
}
最終效果
運(yùn)行代碼,效果圖如下。

AndroidImageSlider 的更多使用方法和功能介紹請(qǐng)參考AndroidImageSlider 源碼說(shuō)明。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android實(shí)現(xiàn)banner輪播圖無(wú)限輪播效果
- Android viewpager自動(dòng)輪播和小圓點(diǎn)聯(lián)動(dòng)效果
- Android viewpager無(wú)限輪播獲取網(wǎng)絡(luò)圖片功能
- Android ViewPager實(shí)現(xiàn)無(wú)限循環(huán)輪播廣告位Banner效果
- Android自定義控件實(shí)現(xiàn)優(yōu)雅的廣告輪播圖
- Android使用ViewPager加載圖片和輪播視頻
- Android ViewPager實(shí)現(xiàn)輪播圖效果
- Android實(shí)現(xiàn)基于ViewPager的無(wú)限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android實(shí)現(xiàn)ViewPage輪播圖效果
- 詳解android 視頻圖片混合輪播實(shí)現(xiàn)
相關(guān)文章
Android使用ViewPager實(shí)現(xiàn)啟動(dòng)引導(dǎo)頁(yè)
這篇文章主要為大家詳細(xì)介紹了Android使用ViewPager實(shí)現(xiàn)第一次啟動(dòng)引導(dǎo)頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
Android自定義帶增長(zhǎng)動(dòng)畫(huà)和點(diǎn)擊彈窗提示效果的柱狀圖DEMO
這篇文章主要介紹了Android自定義帶增長(zhǎng)動(dòng)畫(huà)和點(diǎn)擊彈窗提示效果的柱狀圖的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
java,Android:在eclipse中的快捷鍵(經(jīng)典收藏)
下面的快捷鍵是常用的,本人就本身喜好且常用的收拾一下,現(xiàn)在曬出來(lái)與大家分享,感興趣的朋友可以了解小哦2013-01-01
Android開(kāi)發(fā)實(shí)現(xiàn)跟隨手指的小球效果示例
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)跟隨手指的小球效果,涉及Android圖形繪制、事件響應(yīng)、界面布局等相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Android之RecycleView實(shí)現(xiàn)指定范圍的拖動(dòng)效果
這篇文章主要介紹了Android之RecycleView實(shí)現(xiàn)指定范圍的拖動(dòng)效果的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Android開(kāi)發(fā)仿掃一掃實(shí)現(xiàn)拍攝框內(nèi)的照片功能
無(wú)論是微信還是支付寶掃一掃功能很常用,那么它基于代碼是如何實(shí)現(xiàn)的呢?今天小編給大家分享android開(kāi)發(fā)之仿掃一掃實(shí)現(xiàn)拍攝框內(nèi)的照片功能,感興趣的朋友一起學(xué)習(xí)吧2016-09-09

