Android UI 实现广告 Banner 轮播效果

编写acitivity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"
<p>    android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" ></p><FrameLayoutandroid:layout_width="match_parent"android:layout_height="210dp" ><android.support.v4.view.ViewPagerandroid:id="@+id/vp"android:layout_width="match_parent"android:layout_height="wrap_content" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="210dp"android:background="@drawable/shadow_article"android:orientation="vertical" ><TextViewandroid:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="26dp"android:text="为什么在北极出现“世纪暖冬”同时我们遭遇严寒"android:textColor="@color/white" /></RelativeLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center_horizontal"android:layout_marginBottom="10dp"android:layout_marginTop="10dip"android:gravity="center" ><Viewandroid:id="@+id/v_dot0"style="@style/dot_style"android:background="@drawable/dot_focused"android:visibility="invisible" /><Viewandroid:id="@+id/v_dot1"style="@style/dot_style"android:visibility="invisible" /><Viewandroid:id="@+id/v_dot2"style="@style/dot_style"
android:visibility="invisible" /><Viewandroid:id="@+id/v_dot3"style="@style/dot_style"android:visibility="invisible" /><Viewandroid:id="@+id/v_dot4"style="@style/dot_style"android:visibility="invisible" /></LinearLayout></FrameLayout></LinearLayout>

一个ViewPager,下面五个指示点，注意每个点都有同样的样式，我们在style.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>

定义圆点图形资源 dot_normal.xml,dot_focused.xml

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

<?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>

定义广告实体 AdDome.java

public class AdDome {private String id;private String title;private String imgUrl;private boolean isAd;private String startTime;private String endTime;private String targetUrl;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 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秒执行一次图片切换

<span style="white-space:pre">  </span>private void startAd() {scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();// 当Activity显示出来后，每两秒切换一次图片显示scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,TimeUnit.SECONDS);}

定义子线程

<span style="white-space:pre">  </span>private class ScrollTask implements Runnable {@Overridepublic void run() {synchronized (adViewPager) {currentItem = (currentItem + 1) % imageViews.size();handler.obtainMessage().sendToTarget();}}}

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

<span style="white-space:pre">  </span>private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {adViewPager.setCurrentItem(currentItem);};};

提供模拟数据来进行测试

private List<AdDome> getBannerAd() {List<AdDome> adList = new ArrayList<AdDome>();AdDome adDome0 = new AdDome();adDome0.setId("108078");adDome0.setTitle("为什么在北极出现“世纪暖冬”同时我们遭遇严寒");adDome0.setImgUrl("http://img1.gtimg.com/news/pics/hv1/175/13/2009/130638715.jpg");adDome0.setAd(false);adList.add(adDome0);AdDome adDome1 = new AdDome();adDome1.setId("108078");adDome1.setTitle("青海门源发生6.4级地震 网友：西宁兰州震感强烈");adDome1.setImgUrl("http://img1.gtimg.com/news/pics/hv1/168/20/2009/130640493.png");adDome1.setAd(false);adList.add(adDome1);AdDome adDome2 = new AdDome();adDome2.setId("108078");adDome2.setTitle("小学生考卷上留言老师 求给80分过好年");adDome2.setImgUrl("http://img1.gtimg.com/news/pics/hv1/225/96/2009/130659930.jpg");adDome2.setAd(false);adList.add(adDome2);AdDome adDome3 = new AdDome();adDome3.setId("108078");adDome3.setTitle("雷军：不允许内部再讲第一 用户比第一重要");adDome3.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/202/67/2009/130652512.jpg");adDome3.setAd(false);adList.add(adDome3);AdDome adDome4 = new AdDome();adDome4.setId("108078");adDome4.setTitle("政府免费WiFi遭吐槽 信号不稳体验差");adDome4.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/65/52/2009/130648550.jpg");adDome4.setAd(true);// 代表是广告adList.add(adDome4);return adList;}

ViewPager逻辑处理

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

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

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

图片是从网上下载的，用到了universal-image-loader-1.8.6-with-sources.jar这个类库，可以实现异步加载图片，编写MainActivity.java。

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_title;private int currentItem = 0;// 当前图片的号// 定义5个指示点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<AdDome> adList;private Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {adViewPager.setCurrentItem(currentItem);};};@Overrideprotected 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();}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_title = (TextView) findViewById(R.id.tv_title);adViewPager = (ViewPager) findViewById(R.id.vp);adViewPager.setAdapter(new BannerAdapter());// 设置填充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));}}@Overrideprotected void onResume() {super.onResume();}private void startAd() {scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();// 当Activity显示出来后，每两秒切换一次图片显示scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,TimeUnit.SECONDS);}public class ScrollTask implements Runnable {@Overridepublic void run() {synchronized (adViewPager) {currentItem = (currentItem + 1) % imageViews.size();handler.obtainMessage().sendToTarget();}}}@Overrideprotected void onStop() {super.onStop();// 当Activity不可见的时候停止切换scheduledExecutorService.shutdown();}// 适配器private class BannerAdapter extends PagerAdapter {@Overridepublic int getCount() {return adList.size();}@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView iv = imageViews.get(position);((ViewPager) container).addView(iv);final AdDome adDome = adList.get(position);// 在这个方法里面设置图片的点击事件iv.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 处理跳转逻辑}});return iv;}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView((View) arg2);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}@Overridepublic void finishUpdate(View arg0) {}}private class MyPageChangeListener implements OnPageChangeListener {private int oldPosition = 0;public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageSelected(int position) {currentItem = position;AdDome adDome = adList.get(position);tv_title.setText(adDome.getTitle()); // 设置标题dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);dots.get(position).setBackgroundResource(R.drawable.dot_focused);oldPosition = position;}}// 轮播广播模拟数据private List<AdDome> getBannerAd() {List<AdDome> adList = new ArrayList<AdDome>();AdDome adDome0 = new AdDome();adDome0.setId("108078");adDome0.setTitle("为什么在北极出现“世纪暖冬”同时我们遭遇严寒");adDome0.setImgUrl("http://img1.gtimg.com/news/pics/hv1/175/13/2009/130638715.jpg");adDome0.setAd(false);adList.add(adDome0);AdDome adDome1 = new AdDome();adDome1.setId("108078");adDome1.setTitle("青海门源发生6.4级地震 网友：西宁兰州震感强烈");adDome1.setImgUrl("http://img1.gtimg.com/news/pics/hv1/168/20/2009/130640493.png");adDome1.setAd(false);adList.add(adDome1);AdDome adDome2 = new AdDome();adDome2.setId("108078");adDome2.setTitle("小学生考卷上留言老师 求给80分过好年");adDome2.setImgUrl("http://img1.gtimg.com/news/pics/hv1/225/96/2009/130659930.jpg");adDome2.setAd(false);adList.add(adDome2);AdDome adDome3 = new AdDome();adDome3.setId("108078");adDome3.setTitle("雷军：不允许内部再讲第一 用户比第一重要");adDome3.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/202/67/2009/130652512.jpg");adDome3.setAd(false);adList.add(adDome3);AdDome adDome4 = new AdDome();adDome4.setId("108078");adDome4.setTitle("政府免费WiFi遭吐槽 信号不稳体验差");adDome4.setImgUrl("http://img1.gtimg.com/tech/pics/hv1/65/52/2009/130648550.jpg");adDome4.setAd(true);// 代表是广告adList.add(adDome4);return adList;}}

Android UI 实现广告 Banner 轮播效果相关推荐

Android fragment中广告图片轮播效果的实现（附图）
作者刚刚接触android小白一枚,这是本人在CSDN上写的第一篇博客..出于写博客的目的:一也是最重要的想让像我这样的android初学者少走点弯路,本以为这个功能实现起来挺简单的,但是项目要求在f ...
HTML5前端广告的轮播效果第二步
HTML5前端广告的轮播效果第二步在相比第一步下如果你对第一步理解的很好的话那第二部也不难: 2.1实现鼠标悬停时间就是当鼠标移到图片上时就让图片的转换停止即就是停止我们声明保存的定时器 va ...
android 自适应图片轮播,Android使用Recyclerview实现图片轮播效果的方法
Android使用Recyclerview实现图片轮播效果的方法发布时间:2020-06-23 15:47:58 来源:亿速云阅读:113 作者:清晨这篇文章将为大家详细讲解有关Android使 ...
php课程banner,如何利用react 实现banner轮播效果
最近在看react , jsx的语法一开始看起来确实不习惯,但是确实比较灵活运行效果: import React from 'react'; // import ShadowDOM from 're ...
安卓项目实战之仿魅族的酷炫Banner轮播效果
效果图 GitHub地址:https://github.com/pinguo-zhouwei/MZBannerView 添加依赖 1,project的build.gradle添加: allprojec ...
Android使用viewpager实现图片轮播效果
自定义View实现图片轮播,实现了图片自动轮播,手动滑动,轮播标题,以及点击事件. 里面有很多注释一.文件布局二.代码 ImageBannerViewGroup类 /*** Created by ...
react 实现banner轮播效果
最近在看react , jsx的语法一开始看起来确实不习惯,但是确实比较灵活运行效果: 代码: import React from 'react'; // import ShadowDOM from ...
Android 使用ViewPager实现view轮播效果，单个item分页样式，多个item分页样式，横向listview
效果单个item样式多个item样式横向item 自定义viewpager--可开关切换动画 public class NoAnimationViewPager extends ViewPage ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...

Android UI 实现广告 Banner 轮播效果

定义圆点图形资源 dot_normal.xml,dot_focused.xml

定义广告实体 AdDome.java

实现切换逻辑

Android UI 实现广告 Banner 轮播效果相关推荐

最新文章

热门文章