AndroidImageSlider实现炫酷轮播广告效果

本文实例为大家分享了AndroidImageSlider实现炫酷轮播广告的具体代码,供大家参考,具体内容如下

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。

AndroidImageSlider 是一个神奇而且方便的 Android 图片滚动框架,在菜鸟商城项目中我们就要使用这个框架来实现炫酷的轮播广告。

AndroidImageSlider 架构分析

首先我们看图说话,下面是 AndroidImageSlider 的架构分析图。

该架构分析图中的 SliderLayout 是一个继承于 RelativeLayout 的自定义View,也是该框架的核心。它由 SliderView 和 PagerIndicator 组成。而 SliderView 分为了 DefaultSliderView 和 TextSliderView 两部分,其中 DefaultSliderView 是只支持图片加载滚动,而 TextSliderView 不仅支持图片还支持文本的显示。Transition effects 和Animation 主要是动画效果的控制,另外还有两个重要的监听事件分别为 onSliderClickListener 和 onPageChangeListener,顾名思义,一个是点击事件监听,另一个是页面切换事件监听。

基本使用

已经了解了框架的基本构造,下面就是要看如何使用了,使用的方法也很简单。

1. Gradle 依赖配置

我们这里使用的是 android Studio 2.2.3 开发工具,Eclipse 引用第三方库的具体方法可以参考AndroidImageSlider 源码说明。在 build.gradle 文件中集成第三方库的依赖。

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. 添加权限

使用该框架还需要添加相应的权限,分别为网络权限和读文件的权限。

xml <uses-permission android:name="android.permission.INTERNET"></uses-permission> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses-permission>

3. 添加到布局 Layout 中

将 SliderLayout 添加到相应的布局文件 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 的话,可以自定义,当然也可以使用该框架自带的,这里是自定义 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);

然后就是准备好测试的数据,我在这里定义了一个实体类 BannerInfo,包括了图片 imgUrl 和描述内容 name。定义好实体类后就开始设置相应的测试数据并且添加到滚动图片列表 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("手机国庆礼"); 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); }

接下来就是要配置 SliderLayout 的相关属性了,添加自定义的 Indicator,设置动画效果,添加图片列表数据以及设置监听事件

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 滚动

在 Activity/Fragment 生命周期结束前,需要先停止图片的滚动,防止出现内存溢出等问题。

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(); }

最终效果

运行代码,效果图如下。

AndroidImageSlider 的更多使用方法和功能介绍请参考AndroidImageSlider 源码说明。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-10-10 20:23:22

AndroidImageSlider实现炫酷轮播广告效果的相关文章

《React Native移动开发实战》一一3.3 完善轮播广告——Image组件

3.3 完善轮播广告--Image组件 之前的轮播广告页面显示的是简单的文字和背景色,接下来添加一些好看的图片作为轮播广告. React Native中用于图片显示的组件是Image.Image组件可以显示多种不同类型图片,包括网络图片.静态资源.临时的本地图片,以及本地磁盘上的图片(如相册)等.3.3.1 使用网络图片 这里先使用网络图片来看看Image的用法和效果.修改app.js代码如下: 01 export default class app extends Component { 02

最简单的轮播广告(原生JS)

改变每个图片的opacity属性:来自学友刘斌 素材图片: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最简单的轮播广告</title> 6 <style> 7 body, div, ul, li { 8 margin: 0; 9 padding: 0; 10 } 11

ViewPager实现轮播广告图

轮播广告在现在的应用中比较常见,下面就来实现下该功能(文章参考了网上流传的黑马的视频教程)先来看下具体的实现效果:  实现思路: 1.为ViewPager设置数据源,实现ViewPager的滚动 2.将圆点指示器与ViewPager的页面对应起来 3.实现左右滑动均能无限循环 4.实现自动播放 5.实现当手指滑动的时候取消自动播发 首先需要说明的就是在这篇文章里并没有同时实现左右循环滑动和手指触碰自动停止的功能,这个问题还没有解决,留待以后再解决,也希望有知道的朋友在下面留言,先谢谢拉. 1.首

PhotoShop制作炫酷复古线型文字效果教程

教大家用PhotoShop制作炫酷复古线型文字效果,在本教程中你将学到如何利用切片工具制作出背景的条纹格子装饰元素,切片工具我们平时 都很少用到,以为只有做网页的时候才用,喜欢的同学可以跟着做一下! 先看photoshop教程效果图: 具体教程:1.新建800*800大小文档,拉渐变#423931到黑色的渐变,新建图层用灰尘笔刷刷一点雾的感觉,ctrl+T把雾图层拉到画布底端(效果不用很明显). 2.用素材里提供的akka字体(点此下载) 打上文字,我这里选用的颜色是#f76a38. 3.给字体

js实现支持手机滑动切换的轮播图片效果

  本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: ? 1 2 3 4 5 6 7 <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/ca

简单实现轮播图效果的实例_javascript技巧

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果_Android

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

jQuery实现简洁的轮播图效果实例_jquery

本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

jQuery轮播图效果精简版完整示例_jquery

本文实例讲述了jQuery轮播图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta ht