专栏首页恩蓝脚本AndroidImageSlider实现炫酷轮播广告效果

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 源码说明。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • android项目从Eclipse迁移到Android studio中常见问题解决方法

    (1)将Eclipse项目导入到Android studio 中出现9-patch image问题解决方法:

    砸漏
  • Android动画实现原理和代码

    我们都知道,漂亮的用户界面是衡量一款应用”好坏”很重要的依据,因为人都是视觉动物,就好比说花容月貌总有男人为之倾倒,英俊潇洒总能博得芳心。这是一个不容置疑的事实...

    砸漏
  • Android编程获取图片数据的方法详解

    本文实例讲述了Android编程获取图片数据的方法。分享给大家供大家参考,具体如下:

    砸漏
  • 在命令行打开安卓UI界面

    叉叉敌
  • 百度地图开发1

    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的A...

    xiangzhihong
  • 我是如何黑掉英国间谍软件公司Gamma的

    前几天,有黑客《入侵了英国间谍软件公司Gamma》。本文翻译自黑客自己公布的入侵指南。详细的介绍了从信息收集,到发现目标站点,以及进行源码审计,绕过waf注入,...

    FB客服
  • 实用FRIDA进阶:内存漫游、hook anywhere、抓包

    本章中我们进一步介绍,大家在学习和工作中使用Frida的实际场景,比如动态查看安卓应用程序在当前内存中的状态,比如指哪儿就能hook哪儿,比如脱壳,还有使用Fr...

    dengfeng1638205133
  • Vue路由模块化

    之前的项目从来没有对路由进行模块化,很早之前一个同学发过一个项目,我当时看了路由,觉得很不错,那就是进行了模块化,只是都没去认真了解一下。今天分享个vue的路由...

    wade
  • 重磅 | 腾讯云文字识别6项新服务限时免费公测,4项功能重大升级

    港澳台通行证识别、火车票识别、出租车发票识别、机票行程单识别、定额发票识别、购车发票识别,详细内容见接口文档(https://cloud.tencent.com...

    腾讯云AI中心
  • 数学思维+C语言画小猪佩奇,来试试?

    我们可以看成是坐标轴。很自然的,小编给大家推荐一个学习氛围超好的地方,C/C++交流企鹅裙:【 六二七,零一二,四六四 】适合在校大学生,小白,想转行,想通过这...

    猫咪爱分享

扫码关注云+社区

领取腾讯云代金券