Android UI实现广告Banner轮播效果

概述本篇博客要分享的一个效果是实现广告Banner轮播效果，这个效果也比较常见，一些视频类应用就经常有，就拿360影视大全来举例吧：

本篇博客要分享的一个效果是实现广告Banner轮播效果，这个效果也比较常见，一些视频类应用就经常有，就拿360影视大全来举例吧：

 

用红框框住的那个效果就是小巫今天要分享的，先来思考一下会用到什么控件？有什么用户体验？

 控件我们可能一下子就可以想到的自然是VIEwPager,没错！用到的就是VIEwPager,那么它会有什么用户体验呢，它可能有以下几个体验：

 1. 间隔不停的切换图片，指示器也跟着变

 2. 点击图片可以跳转到指定的页面

如何实现？

布局开始着手
/BannerautoScrollDemo/res/layout/banner.xml

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical" > <FrameLayout  androID:layout_wIDth="match_parent"  androID:layout_height="210dp" >  <androID.support.v4.vIEw.VIEwPager   androID:ID="@+ID/vp"   androID:layout_wIDth="match_parent"   androID:layout_height="210dp" />  <relativeLayout   androID:layout_wIDth="match_parent"   androID:layout_height="wrap_content"   androID:layout_gravity="bottom"   androID:background="@drawable/shadow_article" >   <TextVIEw    androID:ID="@+ID/tv_date"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_above="@+ID/author_layout"    androID:layout_marginBottom="10dp"    androID:layout_marginleft="10dp"    androID:maxlines="2"    androID:text="3月4日"    androID:textcolor="@color/white"    androID:textSize="18sp" />   <TextVIEw    androID:ID="@+ID/tv_Title"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_above="@+ID/author_layout"    androID:layout_marginBottom="10dp"    androID:layout_marginleft="10dp"    androID:layout_marginRight="10dp"    androID:layout_toRightOf="@+ID/tv_date"    androID:maxlines="2"    androID:text="我和令计划只是同姓"    androID:textcolor="@color/white"    androID:textSize="18sp" />   <relativeLayout    androID:ID="@+ID/author_layout"    androID:layout_wIDth="match_parent"    androID:layout_height="wrap_content"    androID:layout_alignParentBottom="true"    androID:layout_marginleft="10dp"    androID:gravity="center_vertical"    androID:paddingBottom="20dp" >    <TextVIEw     androID:ID="@+ID/tv_pre"     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:text="文章选题来自"     androID:textcolor="@color/white"     androID:textSize="12sp" />    <TextVIEw     androID:ID="@+ID/tv_topic_from"     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:layout_toRightOf="@+ID/tv_pre"     androID:text="阿宅的"     androID:textcolor="@color/white"     androID:textSize="12sp" />    <TextVIEw     androID:ID="@+ID/tv_topic"     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:layout_marginleft="10dp"     androID:layout_toRightOf="@+ID/tv_topic_from"     androID:text="“我想知道令狐安和令计划有什么关系？”"     androID:textcolor="@color/white"     androID:textSize="12sp" />   </relativeLayout>  </relativeLayout>  <linearLayout   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_margintop="10dip"   androID:layout_gravity="bottom|center_horizontal"   androID:layout_marginBottom="10dp"   androID:gravity="center" >   <VIEw    androID:ID="@+ID/v_dot0"        androID:background="@drawable/dot_focused"    androID:visibility="invisible" />   <VIEw    androID:ID="@+ID/v_dot1"         androID:visibility="invisible"/>   <VIEw    androID:ID="@+ID/v_dot2"         androID:visibility="invisible"/>   <VIEw    androID:ID="@+ID/v_dot3"         androID:visibility="invisible"/>   <VIEw    androID:ID="@+ID/v_dot4"        androID:visibility="invisible" />  </linearLayout> </FrameLayout></linearLayout>

一个VIEwPager,下面五个指示点，注意每个点都有同样的样式，我们在style.xml中定义样式：
/BannerautoScrollDemo/res/values/styles.xml

<style name="dot_style">  <item name="androID:layout_wIDth">5dip</item>  <item name="androID:layout_height">5dip</item>  <item name="androID:background">@drawable/dot_normal</item>  <item name="androID:layout_marginleft">1.5dip</item>  <item name="androID:layout_marginRight">1.5dip</item> </style>

定义圆点图形资源
/BannerautoScrollDemo/res/drawable/dot_normal.xml

<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval" > <solID androID:color="#33000000" /> <corners androID:radius="5dip" /></shape>

/BannerautoScrollDemo/res/drawable/dot_focused.xml

<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval" > <solID androID:color="#aaFFFFFF" /> <corners androID:radius="5dip" /></shape>

定义广告实体
/BannerautoScrollDemo/src/com/xiaowu/banner/demo/AdDomain.java

package com.xiaowu.banner.demo;/** * 广告实体 *  * @author wwj_748 *  */public class AdDomain { private String ID; // 广告ID private String date; // 日期 private String Title; // 标题 private String topicFrom; //选题来自  private String topic; // 选题 private String imgurl; // 图片url private boolean isAd; // 是否为广告 private String startTime; // 广告开始时间 private String endTime; // 广告结束时间 private String targetUrl; // 目标url private int wIDth; // 宽 private int height; // 高 private boolean available; // 是否可用  public String getID() { return ID; } public voID setID(String ID) { this.ID = ID; } public String getTitle() { return Title; } public voID setTitle(String Title) { this.Title = Title; } public String getimgurl() { return imgurl; } public voID setimgurl(String imgurl) { this.imgurl = imgurl; } public boolean isAd() { return isAd; } public voID setAd(boolean isAd) { this.isAd = isAd; } public String getDate() { return date; } public voID setDate(String date) { this.date = date; } public String gettopic() { return topic; } public voID settopic(String topic) { this.topic = topic; } public String gettopicFrom() { return topicFrom; } public voID settopicFrom(String topicFrom) { this.topicFrom = topicFrom; } public String getStartTime() { return startTime; } public voID setStartTime(String startTime) { this.startTime = startTime; } public String getEndTime() { return endTime; } public voID setEndTime(String endTime) { this.endTime = endTime; } public String getTargetUrl() { return targetUrl; } public voID setTargetUrl(String targetUrl) { this.targetUrl = targetUrl; } public int getWIDth() { return wIDth; } public voID setWIDth(int wIDth) { this.wIDth = wIDth; } public int getHeight() { return height; } public voID setHeight(int height) { this.height = height; } public boolean isAvailable() { return available; } public voID setAvailable(boolean available) { this.available = available; } }

实现切换逻辑

1. 定时切换

2. 切换图片

3. 切换标题

4. 切换指示器

定时切换用到一个类：scheduledexecutorservice

作用是定时执行任务，我们这里要做的定时任务是，2秒执行一次图片切换

private voID startAd() { scheduledexecutorservice = Executors.newSingleThreadScheduledExecutor(); // 当Activity显示出来后，每两秒切换一次图片显示 scheduledexecutorservice.scheduleAtFixedrate(new ScrollTask(),1,2,TimeUnit.SECONDS); }

定义子线程

private class ScrollTask implements Runnable { @OverrIDe public voID run() { synchronized (adVIEwPager) { currentItem = (currentItem + 1) % imageVIEws.size(); handler.obtainMessage().sendToTarget(); } } }

通过handle来通知VIEwPager进行视图切换

private Handler handler = new Handler() { public voID handleMessage(androID.os.Message msg) { adVIEwPager.setCurrentItem(currentItem); }; };

我们提供模拟数据来进行测试

/** * 轮播广播模拟数据 *  * @return */ public static List<AdDomain> getBannerAd() { List<AdDomain> adList = new ArrayList<AdDomain>(); AdDomain adDomain = new AdDomain(); adDomain.setID("108078"); adDomain.setDate("3月4日"); adDomain.setTitle("我和令计划只是同姓"); adDomain.settopicFrom("阿宅"); adDomain.settopic("我想知道令狐安和令计划有什么关系？"); adDomain.setimgurl("/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg"); adDomain.setAd(false); adList.add(adDomain); AdDomain adDomain2 = new AdDomain(); adDomain2.setID("108078"); adDomain2.setDate("3月5日"); adDomain2.setTitle("我和令计划只是同姓"); adDomain2.settopicFrom("小巫"); adDomain2.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain2 .setimgurl("/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg"); adDomain2.setAd(false); adList.add(adDomain2); AdDomain adDomain3 = new AdDomain(); adDomain3.setID("108078"); adDomain3.setDate("3月6日"); adDomain3.setTitle("我和令计划只是同姓"); adDomain3.settopicFrom("旭东"); adDomain3.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain3 .setimgurl("/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg"); adDomain3.setAd(false); adList.add(adDomain3); AdDomain adDomain4 = new AdDomain(); adDomain4.setID("108078"); adDomain4.setDate("3月7日"); adDomain4.setTitle("我和令计划只是同姓"); adDomain4.settopicFrom("小软"); adDomain4.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain4 .setimgurl("/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg"); adDomain4.setAd(false); adList.add(adDomain4); AdDomain adDomain5 = new AdDomain(); adDomain5.setID("108078"); adDomain5.setDate("3月8日"); adDomain5.setTitle("我和令计划只是同姓"); adDomain5.settopicFrom("大熊"); adDomain5.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain5 .setimgurl("/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg"); adDomain5.setAd(true); // 代表是广告 adList.add(adDomain5); return adList; }

VIEwPager逻辑处理

1. 填充数据（自定义Adapter)

2. 设置页面切换监听事件

3. 在自定义adapter中的instantiateItem方法设置VIEwPager点击事件

这里我们的图片是从网上下载的，用到了universal-image-loader-1.8.6-with-sources.jar这个类库，可以实现异步加载图片，具体使用查看代码。

最后给出完整代码：

/BannerautoScrollDemo/src/com/xiaowu/banner/demo/MainActivity.java

package com.xiaowu.banner.demo;import java.io.file;import java.util.ArrayList;import java.util.List;import java.util.concurrent.Executors;import java.util.concurrent.scheduledexecutorservice;import java.util.concurrent.TimeUnit;import androID.app.Activity;import androID.graphics.Bitmap;import androID.os.Bundle;import androID.os.Handler;import androID.os.Parcelable;import androID.support.v4.vIEw.PagerAdapter;import androID.support.v4.vIEw.VIEwPager;import androID.support.v4.vIEw.VIEwPager.OnPagechangelistener;import androID.vIEw.VIEw;import androID.vIEw.VIEw.OnClickListener;import androID.vIEw.VIEwGroup;import androID.Widget.ImageVIEw;import androID.Widget.ImageVIEw.ScaleType;import androID.Widget.TextVIEw;import com.nostra13.universalimageloader.cache.disc.impl.UnlimiteddiscCache;import com.nostra13.universalimageloader.cache.memory.impl.LruMemoryCache;import com.nostra13.universalimageloader.core.displayImageOptions;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;import com.nostra13.universalimageloader.core.assist.ImageScaleType;import com.nostra13.universalimageloader.core.assist.QueueProcessingType;public class MainActivity extends Activity {  public static String IMAGE_CACHE_PATH = "imageloader/Cache"; // 图片缓存路径 private VIEwPager adVIEwPager; private List<ImageVIEw> imageVIEws;// 滑动的图片集合 private List<VIEw> dots; // 图片标题正文的那些点 private List<VIEw> dotList; private TextVIEw tv_date; private TextVIEw tv_Title; private TextVIEw tv_topic_from; private TextVIEw tv_topic; private int currentItem = 0; // 当前图片的索引号 // 定义的五个指示点 private VIEw dot0; private VIEw dot1; private VIEw dot2; private VIEw dot3; private VIEw dot4; // 定时任务 private scheduledexecutorservice scheduledexecutorservice; // 异步加载图片 private ImageLoader mImageLoader; private displayImageOptions options; // 轮播banner的数据 private List<AdDomain> adList; private Handler handler = new Handler() { public voID handleMessage(androID.os.Message msg) { adVIEwPager.setCurrentItem(currentItem); }; }; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); // 使用ImageLoader之前初始化 initimageLoader(); // 获取图片加载实例 mImageLoader = ImageLoader.getInstance(); options = new displayImageOptions.Builder() .showStubImage(R.drawable.top_banner_androID) .showImageForEmptyUri(R.drawable.top_banner_androID) .showImageOnFail(R.drawable.top_banner_androID) .cacheInMemory(true).cacheOndisc(true) .bitmapConfig(Bitmap.Config.RGB_565) .imageScaleType(ImageScaleType.EXACTLY).build(); initAdData(); startAd(); }  /** * 初始化ImageLoader */ private voID initimageLoader() { file cacheDir = com.nostra13.universalimageloader.utils.StorageUtils .getownCacheDirectory(getApplicationContext(),IMAGE_CACHE_PATH); displayImageOptions defaultoptions = new displayImageOptions.Builder() .cacheInMemory(true).cacheOndisc(true).build(); ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder( this).defaultdisplayImageOptions(defaultoptions) .memoryCache(new LruMemoryCache(12 * 1024 * 1024)) .memoryCacheSize(12 * 1024 * 1024) .discCacheSize(32 * 1024 * 1024).discCachefileCount(100) .discCache(new UnlimiteddiscCache(cacheDir)) .threadPriority(Thread.norM_PRIORITY - 2) .tasksProcessingOrder(QueueProcessingType.liFO).build(); ImageLoader.getInstance().init(config); } /** * 初始化广告数据 */ private voID initAdData() { // 广告数据 adList = getBannerAd(); imageVIEws = new ArrayList<ImageVIEw>(); // 点 dots = new ArrayList<VIEw>(); dotList = new ArrayList<VIEw>(); dot0 = findVIEwByID(R.ID.v_dot0); dot1 = findVIEwByID(R.ID.v_dot1); dot2 = findVIEwByID(R.ID.v_dot2); dot3 = findVIEwByID(R.ID.v_dot3); dot4 = findVIEwByID(R.ID.v_dot4); dots.add(dot0); dots.add(dot1); dots.add(dot2); dots.add(dot3); dots.add(dot4);  tv_date = (TextVIEw) findVIEwByID(R.ID.tv_date); tv_Title = (TextVIEw) findVIEwByID(R.ID.tv_Title); tv_topic_from = (TextVIEw) findVIEwByID(R.ID.tv_topic_from); tv_topic = (TextVIEw) findVIEwByID(R.ID.tv_topic); adVIEwPager = (VIEwPager) findVIEwByID(R.ID.vp); adVIEwPager.setAdapter(new MyAdapter());// 设置填充VIEwPager页面的适配器 // 设置一个监听器，当VIEwPager中的页面改变时调用 adVIEwPager.setonPagechangelistener(new MyPagechangelistener()); addDynamicVIEw(); } private voID addDynamicVIEw() { // 动态添加图片和下面指示的圆点 // 初始化图片资源 for (int i = 0; i < adList.size(); i++) { ImageVIEw imageVIEw = new ImageVIEw(this); // 异步加载图片 mImageLoader.displayImage(adList.get(i).getimgurl(),imageVIEw,options); imageVIEw.setScaleType(ScaleType.CENTER_CROP); imageVIEws.add(imageVIEw); dots.get(i).setVisibility(VIEw.VISIBLE); dotList.add(dots.get(i)); } } @OverrIDe protected voID onResume() { super.onResume(); } private voID startAd() { scheduledexecutorservice = Executors.newSingleThreadScheduledExecutor(); // 当Activity显示出来后，每两秒切换一次图片显示 scheduledexecutorservice.scheduleAtFixedrate(new ScrollTask(),TimeUnit.SECONDS); } private class ScrollTask implements Runnable { @OverrIDe public voID run() { synchronized (adVIEwPager) { currentItem = (currentItem + 1) % imageVIEws.size(); handler.obtainMessage().sendToTarget(); } } } @OverrIDe protected voID onStop() { super.onStop(); // 当Activity不可见的时候停止切换 scheduledexecutorservice.shutdown(); } private class MyPagechangelistener implements OnPagechangelistener { private int oldposition = 0; @OverrIDe public voID onPageScrollStateChanged(int arg0) {  } @OverrIDe public voID onPageScrolled(int arg0,float arg1,int arg2) {  } @OverrIDe public voID onPageSelected(int position) { currentItem = position; AdDomain adDomain = adList.get(position); tv_Title.setText(adDomain.getTitle()); // 设置标题 tv_date.setText(adDomain.getDate()); tv_topic_from.setText(adDomain.gettopicFrom()); tv_topic.setText(adDomain.gettopic()); dots.get(oldposition).setBackgroundResource(R.drawable.dot_normal); dots.get(position).setBackgroundResource(R.drawable.dot_focused); oldposition = position; } } private class MyAdapter extends PagerAdapter { @OverrIDe public int getCount() { return adList.size(); } @OverrIDe public Object instantiateItem(VIEwGroup container,int position) { ImageVIEw iv = imageVIEws.get(position); ((VIEwPager) container).addVIEw(iv); final AdDomain adDomain = adList.get(position); // 在这个方法里面设置图片的点击事件 iv.setonClickListener(new OnClickListener() { @OverrIDe public voID onClick(VIEw v) {  // 处理跳转逻辑 } }); return iv; } @OverrIDe public voID destroyItem(VIEw arg0,int arg1,Object arg2) { ((VIEwPager) arg0).removeVIEw((VIEw) arg2); } @OverrIDe public boolean isVIEwFromObject(VIEw arg0,Object arg1) { return arg0 == arg1; } @OverrIDe public voID restoreState(Parcelable arg0,ClassLoader arg1) { } @OverrIDe public Parcelable saveState() { return null; } @OverrIDe public voID startUpdate(VIEw arg0) { } @OverrIDe public voID finishUpdate(VIEw arg0) { } } /** * 轮播广播模拟数据 *  * @return */ public static List<AdDomain> getBannerAd() { List<AdDomain> adList = new ArrayList<AdDomain>(); AdDomain adDomain = new AdDomain(); adDomain.setID("108078"); adDomain.setDate("3月4日"); adDomain.setTitle("我和令计划只是同姓"); adDomain.settopicFrom("阿宅"); adDomain.settopic("我想知道令狐安和令计划有什么关系？"); adDomain.setimgurl("/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg"); adDomain.setAd(false); adList.add(adDomain); AdDomain adDomain2 = new AdDomain(); adDomain2.setID("108078"); adDomain2.setDate("3月5日"); adDomain2.setTitle("我和令计划只是同姓"); adDomain2.settopicFrom("小巫"); adDomain2.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain2 .setimgurl("/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg"); adDomain2.setAd(false); adList.add(adDomain2); AdDomain adDomain3 = new AdDomain(); adDomain3.setID("108078"); adDomain3.setDate("3月6日"); adDomain3.setTitle("我和令计划只是同姓"); adDomain3.settopicFrom("旭东"); adDomain3.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain3 .setimgurl("/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg"); adDomain3.setAd(false); adList.add(adDomain3); AdDomain adDomain4 = new AdDomain(); adDomain4.setID("108078"); adDomain4.setDate("3月7日"); adDomain4.setTitle("我和令计划只是同姓"); adDomain4.settopicFrom("小软"); adDomain4.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain4 .setimgurl("/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg"); adDomain4.setAd(false); adList.add(adDomain4); AdDomain adDomain5 = new AdDomain(); adDomain5.setID("108078"); adDomain5.setDate("3月8日"); adDomain5.setTitle("我和令计划只是同姓"); adDomain5.settopicFrom("大熊"); adDomain5.settopic("“我想知道令狐安和令计划有什么关系？”"); adDomain5 .setimgurl("/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg"); adDomain5.setAd(true); // 代表是广告 adList.add(adDomain5); return adList; }}

源码下载：http://xiazai.jb51.net/201612/yuanma/AndroidBannerAutoScroll(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android UI实现广告Banner轮播效果全部内容，希望文章能够帮你解决Android UI实现广告Banner轮播效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。