关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddreams/article/details/44619589
今天给大家带来一点干货,就是横向循环滚动的广告条。 有点类似淘宝的banner广告位,可以手势滑动,也会依据固定时间间隔自动滚动,滑到尽头时会一直循环。过渡非常的平滑。从网络中获取图片,并缓存到SD卡当中,做为没有网络的时候可以显示,提高用户的体验,点击每个广告条会进入相应的url界面,封装的好,使用起来非常的方便。 下面就让我们来看看运行的效果图,看看是不是你要找的:
记得之前为了做这样的效果,从网络上找了很多的源码。结果发现有很多的源码的效果要么是滑到尽头到第一个广告时,会从第二,三个广告中穿过,过渡非常的不平滑。要么就是封装的不够好,平滑效果是实现了,但却不能点击,或者说不能从网络上加载图片。 这两种情况都是不符合我们商业项目开发的。因为广告条会变,所以必须从后台获取图片的url地址,以及对应的广告信息的Url。 那今天给大家带来的干货就是为了解决这些问题,还你一个完美的广告条的实现。 我们都知道,广告条的效果一般的做法就是使用ViewPager加上一个定时器Time,TimerTask或者是handler来定时的滚动广告图片,同时控制广告的指示小点点的选中与未选中时显示的状态图片。
今天分享的广告条的做法有点不一样,但是效果确相比ViewPager更加的有趣。我们使用的是ViewFlow。 1.首先自定义一个ViewFlow类: 因为这个类的代码量比较大,出于篇幅考虑,代码我就不贴了,见最下面的下载链接,下载源码可以自己去研究一下,具体的实现原理。
2.然后定义一个CircleFlowIndicator类 这个类是来控制广告条中小圆点的滚动,从效果图中我们可以看到,三个小圆点的滚动也是非常的平滑的移动过去,让人感觉很流畅,比世面上很多的App中实现的那种广告小圆点的效果也要好很多。 具体代码依然见源码;
3.接下来我们就在布局文件中开始使用了
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.finddreams.adbanner.MainActivity" >
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="300dip"
android:orientation="vertical" >
<com.finddreams.bannerview.ViewFlow
android:id="@+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/transparent"
android:gravity="center"
android:padding="3dip" >
<com.finddreams.bannerview.CircleFlowIndicator
android:id="@+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:padding="2dip"
app:activeColor="#ff0000"
app:activeType="fill"
app:circleSeparation="20dip"
app:inactiveColor="#ffffff"
app:inactiveType="fill"
app:radius="4dip" />
</FrameLayout>
</FrameLayout>
</RelativeLayout>
4.然后我们就可以在Activity中调用了,具体的代码是:
private void initView() {
mViewFlow = (ViewFlow) findViewById(R.id.viewflow);
mFlowIndicator = (CircleFlowIndicator) findViewById(R.id.viewflowindic);
}
private void initBanner(ArrayList<String> imageUrlList) {
mViewFlow.setAdapter(new ImagePagerAdapter(this, imageUrlList,
linkUrlArray, titleList).setInfiniteLoop(true));
mViewFlow.setmSideBuffer(imageUrlList.size()); // 实际图片张数,
mViewFlow.setFlowIndicator(mFlowIndicator);
mViewFlow.setTimeSpan(4500);
mViewFlow.setSelection(imageUrlList.size() * 1000); // 设置初始位置
mViewFlow.startAutoFlowTimer(); // 启动自动播放
}
}
5.有一个很关键的就是ImagePagerAdapter这个适配器,因为加载网络图片是在这个类里实现的,还有广告条的点击,进入一个Web界面的实现。在这里加载网络图片我们使用了一个很火的开源项目,UniversalImageLoader(异步加载网络图片) ,相信大家也并不陌生了。 ImagePagerAdapter.class 类:
6.点击广告条进入一个带进度条的WebView的Activity,这个效果我之前的博客中就有介绍过,详情可见:仿微信中加载网页时带线行进度条的WebView的实现
到这里就可以实现完美的广告条了,哦,对了因为是加载网络图片,所以加的要加上访问网络权限哦,不然就显示不了网络图片,还有因为用到了UniversalImageLoader把图片离线缓存到SD卡当中,所以也是加权限的。
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
终于实现了循环滚动,平滑过渡的广告条效果,真心让人松了一口气。为了不让初学者继续走前人的崎岖路,快速的进步。本着分享开源的精神,把源码发布出来,供大家学习,记住 分享开源会让你学到更多!