Android 实现广告Banner循环轮播

最新推荐文章于 2023-05-23 20:25:59 发布
最新推荐文章于 2023-05-23 20:25:59 发布
阅读量383 收藏 1
点赞数
分类专栏： android进阶 文章标签： android 广告

做了很多的App，发现广告Banner非常的常用，在这里就总结一下我的做法，先看看一个应用的广告Banner
这里写图片描述

1. ViewPager中展示和下载图片

下面我们来实现一个类似的广告Banner，主布局界面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    tools:context=".MyBannerActivity">
    <com.example.liuwangshu.mybanner.SlideShowView
        android:id="@+id/sv_photo"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@android:color/darker_gray" />

</RelativeLayout>

在布局里引用了com.example.liuwangshu.mybanner.SlideShowView，这是自定义布局，继承FrameLayout，用来展示轮播图片和圆点。

SlideShowView构造函数为

  public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this,
                true);
        imageViewsList = new ArrayList<ImageView>();
        dotViewsList = new ArrayList<View>();
    }

加载了布局文件，并且创建了两个List，分别存储图片和小圆点。

布局文件layout_slideshow.xml,里面定义了ViewPager用来显示图片，其他的用来显示圆点

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout android:id="@+id/dotLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:gravity="right"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <View
            android:id="@+id/v_dot1"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:background="@drawable/dot_focus" />

        <View
            android:id="@+id/v_dot2"
            android:layout_width="8dp"
            android:layout_height="8dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/dot_blur" />

    </LinearLayout>
</RelativeLayout>

这个自定义SlideShowView的核心方法为setView方法，用来接收将Activity传来imageUrls数组，初始化UI和实现轮播效果

public void setView(String[] imageUrls) {
        this.imageUrls = imageUrls;
        initUI(context);
        if (isAutoPlay) {
            startPlay();
        }
    }

startPlay方法我后面会讲解到，先来看看initUI方法，这个方法通过一个for循环将轮播需要的图片地址填充到imageViewsList中，将需要的小圆点填充到dotViewsList，并创建了viewPager将imageViewsList传进去展示轮播图。

private void initUI(Context context) {
        if (imageUrls == null || imageUrls.length == 0)
            return;
        if (dotLayout != null) {
            dotLayout.removeAllViews();
        } else {
            dotLayout = (LinearLayout) findViewById(R.id.dotLayout);
        }
        dotLayout.removeAllViews();
        dotViewsList.clear();
        imageViewsList.clear();

        for (int i = 0; i < imageUrls.length; i++) {
            ImageView view = new ImageView(context);
            view.setTag(imageUrls[i]);
            view.setScaleType(ScaleType.FIT_XY);
            imageViewsList.add(view);
            ImageView dotView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.leftMargin = 4;
            params.rightMargin = 4;
            dotLayout.addView(dotView, params);
            dotViewsList.add(dotView);
        }
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setFocusable(true);
        viewPager.setAdapter(new PhotoAdapter(imageUrls));
        viewPager.setOnPageChangeListener(new MyPageChangeListener());

    }

PhotoAdapter接收需要播放的图片地址在instantiateItem方法中用volley来下载图片

private class PhotoAdapter extends PagerAdapter {
        private String[] images;
        private LayoutInflater inflater;

        PhotoAdapter(String[] images) {
            this.images = images;

        }

        @Override
        public void destroyItem(View container, int position, Object object) {
            ((ViewPager) container).removeView(imageViewsList.get(position));
        }

        @Override
        public Object instantiateItem(View container, final int position) {
            if (position > imageViewsList.size() - 1
                    || images.length < position + 1) {
                return null;
            }

            ImageView imageView = imageViewsList.get(position);
            if (!TextUtils.isEmpty(images[position])) {
                loadImageByVolley(imageView,images[position]);
            }
            ((ViewPager) container).addView(imageViewsList.get(position));
            return imageViewsList.get(position);
        }


...
}

这里之所以采用volley下载图片，因为volley是默认开启硬盘缓存的，如果我们把应用杀掉并关掉网络，重新打开引用发现我们之前下载的图片仍显示在Banner界面上，不需要重新下载。loadImageByVolley方法很简单：

 private void loadImageByVolley(ImageView imageView ,String imageUrl){
        RequestQueue mQueue = Volley.newRequestQueue(context);
        final BitmapCache lruCache=new BitmapCache();
        ImageLoader.ImageCache imageCache = new ImageLoader.ImageCache() {
            @Override
            public void putBitmap(String key, Bitmap value) {
                lruCache.putBitmap(key, value);
            }

            @Override
            public Bitmap getBitmap(String key) {
                return lruCache.getBitmap(key);
            }
        };
        ImageLoader imageLoader = new ImageLoader(mQueue, imageCache);
        ImageLoader.ImageListener listener = ImageLoader.getImageListener(
                imageView, 0,0);
        imageLoader.get(imageUrl, listener);
    }

2. 实现播放
我们已经将数据传给PhotoAdapter并下载图片，剩下的就是播放了让我们看看 startPlay方法

 private void startPlay() {
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4,
                TimeUnit.SECONDS);
    }

startPlay方法创建了单线程化的线程池，并延时发送message来不断切换ViewPager的item:不清楚线程池的可以参考：android多线程(一)线程池

SlideShowTask中不断的发送message：

private class SlideShowTask implements Runnable {
        @Override
        public void run() {
            synchronized (viewPager) {
                currentItem = (currentItem + 1) % imageViewsList.size();
                handler.obtainMessage().sendToTarget();
            }
        }

    }

最后看看接收message的handler:

 private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewPager.setCurrentItem(currentItem);
        }

    };

看到这都明白了吧就是通过消息来不断的通知UI线程的ViewPager不断的切换显示的条目，SlideShowView.java 的源码：

package com.example.liuwangshu.mybanner;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
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.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;


import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageRequest;
import com.android.volley.toolbox.Volley;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class SlideShowView extends FrameLayout {
    private final static int IMAGE_COUNT = 5;
    private final static int TIME_INTERVAL = 5;
    private final static boolean isAutoPlay = true;
    private String[] imageUrls;
    private String[] urls;
    private String[] titles;
    private String[] contents;
    private List<ImageView> imageViewsList;
    private List<View> dotViewsList;

    private ViewPager viewPager;
    private int currentItem = 0;
    private ScheduledExecutorService scheduledExecutorService;

    private Context context;

    // Handler
    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewPager.setCurrentItem(currentItem);
        }

    };
    private LinearLayout dotLayout;

    public SlideShowView(Context context) {
        this(context, null);
    }

    public SlideShowView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this,
                true);
        imageViewsList = new ArrayList<ImageView>();
        dotViewsList = new ArrayList<View>();
    }

    public void setView(String[] imageUrls) {
        this.imageUrls = imageUrls;

        initUI(context);
        if (isAutoPlay) {
            startPlay();
        }
    }

    public void setUrl(String[] urls) {
        this.urls = urls;
    }

    public void setTitles(String[] titles) {
        this.titles = titles;
    }

    public void setContents(String[] contents) {
        this.contents = contents;
    }

    private void startPlay() {
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4,
                TimeUnit.SECONDS);
    }

    private void stopPlay() {
        scheduledExecutorService.shutdown();
    }

    private void initUI(Context context) {
        if (imageUrls == null || imageUrls.length == 0)
            return;
        if (dotLayout != null) {
            dotLayout.removeAllViews();
        } else {
            dotLayout = (LinearLayout) findViewById(R.id.dotLayout);
        }
        dotLayout.removeAllViews();
        dotViewsList.clear();
        imageViewsList.clear();

        for (int i = 0; i < imageUrls.length; i++) {
            ImageView view = new ImageView(context);
            view.setTag(imageUrls[i]);
            view.setScaleType(ScaleType.FIT_XY);
            imageViewsList.add(view);
            ImageView dotView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.leftMargin = 4;
            params.rightMargin = 4;
            dotLayout.addView(dotView, params);
            dotViewsList.add(dotView);
        }

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setFocusable(true);
        viewPager.setAdapter(new PhotoAdapter(imageUrls));
        viewPager.setOnPageChangeListener(new MyPageChangeListener());

    }

    private class PhotoAdapter extends PagerAdapter {
        private String[] images;
        private LayoutInflater inflater;

        PhotoAdapter(String[] images) {
            this.images = images;

        }

        @Override
        public void destroyItem(View container, int position, Object object) {
            ((ViewPager) container).removeView(imageViewsList.get(position));
        }

        @Override
        public Object instantiateItem(View container, final int position) {
            if (position > imageViewsList.size() - 1
                    || images.length < position + 1) {
                return null;
            }

            ImageView imageView = imageViewsList.get(position);
            if (!TextUtils.isEmpty(images[position])) {
                loadImageByVolley(imageView,images[position]);
            }
            ((ViewPager) container).addView(imageViewsList.get(position));
            return imageViewsList.get(position);
        }

        /**
         * 检查点击的轮播图是否可以跳转
         *
         * @param position
         * @return
         */
        private boolean isItemAvailable(int position) {
            boolean isUrlsAvaiable = null != urls && urls.length > position;
            boolean isTitiesAvaiable = null != titles && titles.length > position;
            boolean isContentsAvaiable = null != contents && contents.length > position;
            return isUrlsAvaiable && isTitiesAvaiable && isContentsAvaiable;
        }

        @Override
        public int getCount() {
            return imageViewsList.size();
        }

        @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) {
        }

    }

    private class MyPageChangeListener implements OnPageChangeListener {

        boolean isAutoPlay = false;

        @Override
        public void onPageScrollStateChanged(int arg0) {
            switch (arg0) {
                case 1:
                    isAutoPlay = false;
                    break;
                case 2:
                    isAutoPlay = true;
                    break;
                case 0:
                    if (viewPager.getCurrentItem() == viewPager.getAdapter()
                            .getCount() - 1 && !isAutoPlay) {
                        viewPager.setCurrentItem(0);
                    } else if (viewPager.getCurrentItem() == 0 && !isAutoPlay) {
                        viewPager
                                .setCurrentItem(viewPager.getAdapter().getCount() - 1);
                    }
                    break;
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageSelected(int pos) {
            currentItem = pos;
            for (int i = 0; i < dotViewsList.size(); i++) {
                if (i == pos) {
                    dotViewsList.get(pos)
                            .setBackgroundResource(R.drawable.dot_focus);
                } else {
                    dotViewsList.get(i)
                            .setBackgroundResource(R.drawable.dot_blur);
                }
            }
        }
    }

    private class SlideShowTask implements Runnable {

        @Override
        public void run() {
            synchronized (viewPager) {
                currentItem = (currentItem + 1) % imageViewsList.size();
                handler.obtainMessage().sendToTarget();
            }
        }

    }
    private void loadImageByVolley(ImageView imageView ,String imageUrl){
        RequestQueue mQueue = Volley.newRequestQueue(context);
        final BitmapCache lruCache=new BitmapCache();
        ImageLoader.ImageCache imageCache = new ImageLoader.ImageCache() {
            @Override
            public void putBitmap(String key, Bitmap value) {
                lruCache.putBitmap(key, value);
            }

            @Override
            public Bitmap getBitmap(String key) {
                return lruCache.getBitmap(key);
            }
        };
        ImageLoader imageLoader = new ImageLoader(mQueue, imageCache);
        ImageLoader.ImageListener listener = ImageLoader.getImageListener(
                imageView, 0,0);
        imageLoader.get(imageUrl, listener);
    }

    private void destoryBitmaps() {
        for (int i = 0; i < imageViewsList.size(); i++) {
            ImageView imageView = imageViewsList.get(i);
            Drawable drawable = imageView.getDrawable();
            if (drawable != null) {
                drawable.setCallback(null);
            }
        }
    }
}

最后来看看实现的效果
这里写图片描述


源码：http://download.csdn.net/download/fancheng614/9941995

下半夜的雨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）
stevenhu_223的专栏
05-08 18万+
前言：经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环。本以为单纯的ViewPager就可以实现这些功能。但是蛋疼的事情来了，ViewPager并不支持循环翻页。所以要实现循环还得需要自己去动手。自己再网上也找了写例子，本博文的Demo是结合自己找到的一些相关例子的基础上去改造，也希望对读者有用。   Demo实现的效果图如下：
android 5个bannar
最新发布
weixin_42298778的博客
07-29 50
Android中的5个Banner广告实现方式 在移动应用开发中，广告是常见的盈利方式之一。Banner广告以其不干扰用户操作、展示面积小、易于实现等优点，成为开发者的首选。本文将介绍在Android平台上实现Banner广告的5种方式，并通过代码示例和关系图，帮助开发者更好地理解和应用。 Banner广告的基本概念 Ba...
AndroidImageSlider实现广告轮播条
旺仔的专栏
06-05 2874
一、广告轮播条的简介 广告轮播条在HTML网页设计以及APP界面设计中非常常见，如下图所示。在Android中，实现的方式可以是自定义ViewPager来实现，但是我们程序员中流传的一句名言，“不要重复造轮子”。因此我们也可以通过网上已经有的开源项目来进行开发，拿来主义，直接拿来用就可以了，这样极大地加快了我们的开发速度。 二、AndroidImageSlider简介
android banner无限轮播,LoopBanner - 可以自动轮播的无限循环banner
weixin_36179777的博客
06-04 320
LoopBanner可以自动轮播的无限循环banner(An infinite loop banner that can be automatically rotated)简介：这个自定义的控件，不采用给adapter的getCount设置int类型的最大值的方法达到无限循环，而是通过给数据源的头尾分别插入尾部和头部数据，一旦滑动到首位和末位就会跳转到对应的位置, 通过处理使跳转时的卡顿达到最小G...
android广告轮播Banner
胖子坚的博客
01-22 4096
1、添加依赖 implementation ‘com.youth.banner:banner:1.4.10’ //banner依赖 implementation ‘com.github.bumptech.glide:glide:3.7.0’ //glide加载图片依赖 2、布局文件添加控件 3、使用和设置属性 package com.example.administrator.mybanne...
Android ViewPager实现无限循环轮播广告位Banner效果
01-20
在Android开发中，实现一个无限循环轮播的广告位Banner是一个常见的需求，它通常用于展示广告或推广内容。这个功能可以使用ViewPager组件来实现，因为ViewPager具有滑动切换页面的能力，非常适合用来创建轮播效果。...
android实现banner界面广告图片循环轮播(包括手动活动轮播)
markZhangZQ的博客
12-23 717
前言：经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环。本以为单纯的ViewPager就可以实现这些功能。但是蛋疼的事情来了，ViewPager并不支持循环翻页。所以要实现循环还得需要自己去动手。自己在网上也找了些例子，本博文的Demo是结合自己找到的一些相关例子的基础上去改造，也希望对读者有用。 Demo实现的效果图如下： Demo代
Android——广告轮播
m0_61793503的博客
05-23 416
【代码】Android——广告轮播。
Android循环滚动广告banner
05-08
Android循环轮播广告banner, 基于android studio编译运行。 带有多种特效，如横向切换，翻页切换，淡入淡出切换等等
Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能(新)
03-18
Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能(新)
Android 无限广告轮播
11-19
Android无限广告轮播图，具体实现方式和效果请看这里： http://blog.csdn.net/z240336124/article/details/53212418
Android-LoopBanner-可以自动轮播的无限循环banner
08-13
可以自动轮播的无限循环banner（An infinite loop banner that can be automatically rotated）
安卓广告轮播带标题
01-19
安卓广告轮播带标题Banner，可查看运行图片，见http://blog.csdn.net/qq_36467463/article/details/79105785
Android广告轮播
wuqingsen1的博客
12-18 522
看效果图：   GitHub 下载地址：https://github.com/wuqingsen/ImageCarousel   先看工具类  ImageCycleViewAppAdsFindSellerNew 中的代码，这里面写入了主要逻辑： /** * author: wu * date: on 2018/12/18. * describe:广告图片自动轮播控件 */ ...
Android开发：实现Banner广告图片自动与手动循环轮播
"这篇文章主要讲解如何在Android平台上实现一个Banner界面的广告图片循环轮播功能，包括手动滑动循环的效果。作者指出，虽然通常可以使用ViewPager来创建滑动页面，但ViewPager本身不支持循环滚动，因此需要自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值