Android开发自定义Banner实现图片无限轮播效果

最新推荐文章于 2024-07-29 04:00:22 发布
最新推荐文章于 2024-07-29 04:00:22 发布
阅读量1.6k 收藏 12
点赞数 2
分类专栏： Android相关 文章标签： android java 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44965650/article/details/110690282
版权

之前做过的很多项目都用到了 Banner，不过每次项目做完都忘了总结导致每次要实现 Banner 效果都要上网查，网上的文章真的是鱼龙混杂，因此今天花点时间好好总结一下实现 Banner 的原理。

首先我们来看看要实现的效果：
在这里插入图片描述
实现 Banner 的思路很简单，其本质就是封装了一个 ViewPager，然后用定时任务来控制 ViewPager 的位置，再给 ViewPager 设置一个监听器，当页面改变时控制下面指示器的变化即可。

因此我们分为两个大的步骤：用 ViewPager 实现轮播效果 和 添加底部圆形指示器。

一、使用 ViewPager 实现图片无限轮播效果

因为要使用 ViewPager（对 ViewPager 用法不太熟悉的同学可以参考一下启舰大佬的文章），因此适配器是少不了的，首先我们创建一个适配器：

public class BannerPagerAdapter extends PagerAdapter {
	private static final int ITEM_COUNT = 3;    //要滑动的Item的个数
    private List<View> viewList;	//要滑动的Item

    public BannerPagerAdapter(List<View> viewList) {
        this.viewList = viewList;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = viewList.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }
}

这一段代码是实现一个适配器的基本用法，没什么难度就不谈了。接下来我们创建一个 BannerView 类来将上面的 ViewPager 封装起来：

public class BannerView extends RelativeLayout {
    private static final int ITEM_COUNT = 3;    //要滑动的Item的个数

    private Context context;

    //ViewPager相关
    private ViewPager viewPager;    //ViewPager
    private List<View> viewList;    //要轮播的图片
    private List<Integer> imgResourceList;    //轮播图片的资源Id
    private RotationHandler rotationHandler;

    /**
     * 构造函数
     */
    public BannerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;

        init();
    }

    /**
     * 初始化
     */
    private void init(){
        initViewPager();
    }

    /**
     * 初始化ViewPager
     */
    private void initViewPager(){
        //创建ViewPager
        viewPager = new ViewPager(context);
        viewList = new ArrayList<>();

        //创建图片资源集合并添加元素
        imgResourceList = new ArrayList<>();
        imgResourceList.add(R.drawable.img3);
        imgResourceList.add(R.drawable.img1);
        imgResourceList.add(R.drawable.img2);
        imgResourceList.add(R.drawable.img3);
        imgResourceList.add(R.drawable.img1);

        //向viewList添加图片
        for (int i=0; i<imgResourceList.size(); i++){
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(imgResourceList.get(i));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            viewList.add(imageView);
        }

        //为ViewPager添加适配器
        viewPager.setAdapter(new BannerPagerAdapter(viewList));
        //将ViewPager添加到BannerView中
        addView(viewPager, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        //初始位置
        viewPager.setCurrentItem(1, false);

        //ViewPager页面监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                Log.d("hahaha", "position = " + position);
                if (position == viewList.size()-1){
                    viewPager.setCurrentItem(1, false);
                } else if (position == 0){
                    viewPager.setCurrentItem(viewList.size() - 2, false);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        //创建Handler
        rotationHandler = new RotationHandler(this);
        rotationHandler.sendEmptyMessageDelayed(1, 2000);
    }

    /**
     * Handler实现定时任务
     */
    private static class RotationHandler extends Handler {
        private WeakReference<BannerView> bannerReference;  //弱引用放置内存泄漏

        public RotationHandler(BannerView bannerView) {
            bannerReference = new WeakReference<>(bannerView);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            sendEmptyMessageDelayed(1, 2000);
            BannerView bannerView = bannerReference.get();
            bannerView.viewPager.setCurrentItem(bannerView.viewPager.getCurrentItem() + 1);
        }
    }
}

上面的代码稍微有点多，不过难度不是很大。解释一下，因为我们的 Banner 既有图片又有指示器，因此要把两者组合起来，所以我们选择让 BannerView 继承自系统布局 RelativeLayout。然后在构造函数中调用了 init 函数，其中又调用了 initViewPager 方法对 ViewPager 进行初始化。

在 initViewPager 方法中，首先我们 new 出了 ViewPager 和 List，并将图片添加到 List 中：

	//创建ViewPager
	viewPager = new ViewPager(context);
	viewList = new ArrayList<>();

	//创建图片资源集合并添加元素
	imgResourceList = new ArrayList<>();
	imgResourceList.add(R.drawable.img3);
	imgResourceList.add(R.drawable.img1);
	imgResourceList.add(R.drawable.img2);
	imgResourceList.add(R.drawable.img3);
	imgResourceList.add(R.drawable.img1);

	//向viewList添加图片
	for (int i=0; i<imgResourceList.size(); i++){
    	ImageView imageView = new ImageView(context);
		imageView.setImageResource(imgResourceList.get(i));
		imageView.setScaleType(ImageView.ScaleType.FIT_XY);
		viewList.add(imageView);
	}

这里需要注意一下，虽然我们只要轮播显示 3 张图片，但是在 imgResourceList 中却添加了 5 个 resource，这是因为我们要实现轮播效果，如果只添加了 3 个图片那么在 3 到 1 进行切换的时候就会出现回退情况。其左右滑动的示意图如下：
在这里插入图片描述
有了这个示意图之后，接下来的代码就很容易理解了：

    //为ViewPager添加适配器
    viewPager.setAdapter(new BannerPagerAdapter(viewList));
    //将ViewPager添加到BannerView中
    addView(viewPager, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

    //初始位置
    viewPager.setCurrentItem(1, false);

    //ViewPager页面监听
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        @Override
        public void onPageSelected(int position) {
            if (position == viewList.size()-1){	   //如果滑到了右边界
                viewPager.setCurrentItem(1, false);
            } else if (position == 0){    //如果滑到了左边界
                viewPager.setCurrentItem(viewList.size() - 2, false);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {}
    });

核心就是在 onPageSelected 回调中进行判断，如果到了边界则快速切换回正确位置。接下来的代码就是通过 Handler 发送延时消息，因为我们在 handleMessage 方法中调用了 sendEmptyMessageDelayed 方法，因此每次处理之后又会发送一条延时消息（不断循环）。

    private void initViewPager(){
		……
 		//创建Handler
    	rotationHandler = new RotationHandler(this);
    	rotationHandler.sendEmptyMessageDelayed(1, 2000);
    }

	private static class RotationHandler extends Handler {
        private WeakReference<BannerView> bannerReference;  //弱引用放置内存泄漏
        public RotationHandler(BannerView bannerView) {
            bannerReference = new WeakReference<>(bannerView);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            sendEmptyMessageDelayed(1, 2000);	//2s发一次
            BannerView bannerView = bannerReference.get();
            //每次受到消息将viewpager往后滑一页
            bannerView.viewPager.setCurrentItem(bannerView.viewPager.getCurrentItem() + 1);    
        }
    }
    
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        rotationHandler.removeCallbacksAndMessages(null);
    }

这里需要注意的是，为了防止内存泄漏我们让 Handler 持有 BannerView 的弱引用，而且在 BannerView 从 Window 中被剥离时撤回所有消息。我们运行一下代码看看效果：

在这里插入图片描述
发现已经能够实现自动轮播功能了。

二、添加圆形指示器

为 Banner 底部添加圆形指示器的做法也非常简单，我们新增一个 initDot 方法如下：

	private LinearLayout dotLayout;    //水平线性布局

	private void init(){
        initViewPager();
        initDot();
    }

	/**
     * 初始化指示器
     */
    private void initDot(){
        dotLayout = new LinearLayout(context);
        dotLayout.setOrientation(LinearLayout.HORIZONTAL);   //水平布局

        //添加圆点
        for (int i=0; i<ITEM_COUNT; i++){
            ImageView dotImage = new ImageView(context);
            if (i == 0){
                dotImage.setImageResource(R.drawable.dot_white);
            } else {
                dotImage.setImageResource(R.drawable.dot_gray);
            }

			//为ImageView创建布局参数
            MarginLayoutParams layoutParams = new MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            //设置边距
            layoutParams.leftMargin = 10;
            layoutParams.rightMargin = 10;
            //动态
            dotLayout.addView(dotImage, layoutParams);
        }

		//为dotLayout设置布局参数
        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.bottomMargin = 30;
        layoutParams.addRule(CENTER_HORIZONTAL);
        layoutParams.addRule(ALIGN_PARENT_BOTTOM);
        addView(dotLayout, layoutParams);
    }

上面的代码也非常的简单，因为指示器是水品线性排列，因此我们 new 出一个水平线性布局 dotLayout 并动态的为其添加 3 个子 View，最后将 doLayout 添加到 BannerView中。

除此之外，我们还要在 ViewPager 的 onPageSelected 回调中进行监听，当页面发生变化时改变指示器的颜色：

	for (int i=0; i<ITEM_COUNT; i++){
    	ImageView imageView = (ImageView) dotLayout.getChildAt(i);
        if (i == viewPager.getCurrentItem() - 1){
            //当前页面设为白色圆点
            imageView.setImageResource(R.drawable.dot_white);
        } else {
        	//其他页面灰色圆点 
        	imageView.setImageResource(R.drawable.dot_gray);
        }
    }

这样我们的 BannerView 就完成了，接下来在布局文件中添加这个控件：

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

    <com.bannertest.BannerView
        android:layout_width="match_parent"
        android:layout_height="250dp"/>

</RelativeLayout>

再次运行，就得到了开篇的效果。

BannerView 的所有代码如下：

public class BannerView extends RelativeLayout {
    private static final int ITEM_COUNT = 3;    //要滑动的Item的个数

    private Context context;

    //ViewPager相关
    private ViewPager viewPager;
    private List<View> viewList;    //要轮播的图片
    private List<Integer> imgResourceList;    //轮播图片的资源Id
    private RotationHandler rotationHandler;

    //指示器相关
    private LinearLayout dotLayout;    //水平线性布局

    /**
     * 构造函数
     */
    public BannerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;

        init();
    }

    /**
     * 初始化
     */
    private void init(){
        initViewPager();
        initDot();
    }

    /**
     * 初始化ViewPager
     */
    private void initViewPager(){
        //创建ViewPager
        viewPager = new ViewPager(context);
        viewList = new ArrayList<>();

        //创建图片资源集合并添加元素
        imgResourceList = new ArrayList<>();
        imgResourceList.add(R.drawable.img3);
        imgResourceList.add(R.drawable.img1);
        imgResourceList.add(R.drawable.img2);
        imgResourceList.add(R.drawable.img3);
        imgResourceList.add(R.drawable.img1);

        //向viewList添加图片
        for (int i=0; i<imgResourceList.size(); i++){
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(imgResourceList.get(i));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            viewList.add(imageView);
        }

        //为ViewPager添加适配器
        viewPager.setAdapter(new BannerPagerAdapter(viewList));
        //将ViewPager添加到BannerView中
        addView(viewPager, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

        //初始位置
        viewPager.setCurrentItem(1, false);

        //ViewPager页面监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageSelected(int position) {
                Log.d("hahaha", "position = " + position);
                if (position == viewList.size()-1){
                    viewPager.setCurrentItem(1, false);
                } else if (position == 0){
                    viewPager.setCurrentItem(viewList.size() - 2, false);
                }

                for (int i=0; i<ITEM_COUNT; i++){
                    ImageView imageView = (ImageView) dotLayout.getChildAt(i);
                    if (i == viewPager.getCurrentItem() - 1){
                        imageView.setImageResource(R.drawable.dot_white);
                    } else {
                        imageView.setImageResource(R.drawable.dot_gray);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        //创建Handler
        rotationHandler = new RotationHandler(this);
        rotationHandler.sendEmptyMessageDelayed(1, 2000);
    }

    /**
     * 初始化指示器
     */
    private void initDot(){
        dotLayout = new LinearLayout(context);
        dotLayout.setOrientation(LinearLayout.HORIZONTAL);   //水平布局

        //添加圆点
        for (int i=0; i<ITEM_COUNT; i++){
            ImageView dotImage = new ImageView(context);
            if (i == 0){
                dotImage.setImageResource(R.drawable.dot_white);
            } else {
                dotImage.setImageResource(R.drawable.dot_gray);
            }
            MarginLayoutParams layoutParams = new MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.leftMargin = 10;
            layoutParams.rightMargin = 10;
            dotLayout.addView(dotImage, layoutParams);
        }

        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        layoutParams.bottomMargin = 30;
        layoutParams.addRule(CENTER_HORIZONTAL);
        layoutParams.addRule(ALIGN_PARENT_BOTTOM);
        addView(dotLayout, layoutParams);
    }

    /**
     * Handler实现定时任务
     */
    private static class RotationHandler extends Handler {
        private WeakReference<BannerView> bannerReference;  //弱引用放置内存泄漏

        public RotationHandler(BannerView bannerView) {
            bannerReference = new WeakReference<>(bannerView);
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            sendEmptyMessageDelayed(1, 2000);
            BannerView bannerView = bannerReference.get();
            bannerView.viewPager.setCurrentItem(bannerView.viewPager.getCurrentItem() + 1);
        }
    }

	@Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        rotationHandler.removeCallbacksAndMessages(null);
    }
}

总结：本文的代码实现了一个简易的 BannerView ，学习其思想已经足够用了。如果想将其用到项目中去，还需要对其进行进一步完善：

  • 使用自定义属性，让开发者可以在 xml 中指定轮播图的 Item
  • 底部的指示器在滑动时可以有更花哨的效果
  • 让网络加载的图片可以作为滑动的 Item
  • ……
吃睡玩
关注
专栏目录
Android打造万能的BannerView无限轮播图
金戈鐡馬
02-27 1041
这个给ViewPager设置了一个平滑的缩放的动画，但是看到了一个ViewPager设置动画的一个坑，发现滑到第一张的时候，在向右滑动的时候，图片会滑出一点边缘。一般底部会有两种类型指示器，一是矩形的，二是圆形的，这个类实现了如何自定义矩形和圆形指示器，其实这个类也可以实现圆形的和带圆角的矩形的图片，用PorterDuffXfermode图层的概念。BannerAdapter这个类是轮播图的适配器，因为服务器返回的列表图片的url，显示的时候需要转成IamgeViw，用适配器设计模式转一下。
Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能(新)
03-18
Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能(新)
Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）
weixin_30522095的博客
09-03 330
前言：经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环。本以为单纯的ViewPager就可以实现这些功能。但是蛋疼的事情来了，ViewPager并不支持循环翻页。所以要实现循环还得需要自己去动手。自己在网上也找了些例子，本博文的Demo是结合自己找到的一些相关例子的基础上去改造，也希望对读者有用。 Demo实现的效果图如下： De...
android 5个bannar
最新发布
weixin_42298778的博客
07-29 62
Android中的5个Banner广告实现方式 在移动应用开发中，广告是常见的盈利方式之一。Banner广告以其不干扰用户操作、展示面积小、易于实现等优点，成为开发者的首选。本文将介绍在Android平台上实现Banner广告的5种方式，并通过代码示例和关系图，帮助开发者更好地理解和应用。 Banner广告的基本概念 Ba...
Android Banner实现无限轮播效果
一只程序大猩猩
12-18 465
无限轮播 是最最最常见不过的 像什么淘宝京东 等等的一些软件 都会在页面的上面接一个无限轮播 今天使用Banner和imageloader实现一下无限轮播 1.首先就是最最重要的依赖 2.布局用Banner全包名 3.Imageloader 实现配置类 4.在MainActivity中调用imageloader的方法 5.设置集合 存放图片路径 6.添加显示图片框架 7.设置轮播图片地址 8....
android 自定义banner样式_Android自定义TextBanner实现自动滚动
weixin_39655049的博客
12-20 116
本文实例为大家分享了Android自定义TextBanner实现自动滚动的具体代码，供大家参考，具体内容如下1、TextBannerpackage com.example.myapplication.customview;import android.content.Context;import android.util.AttributeSet;import android.util.Log;i...
Android自定义Banner轮播效果
01-05
本文实例为大家分享了Android自定义Banner轮播效果展示的具体代码，供大家参考，具体内容如下 自定义View布局 <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width=...
Android自动播放Banner图片轮播效果
09-02
在Android开发中，实现一个自动播放的Banner图片轮播效果是常见的需求，尤其在各种应用的首页或者广告展示区域。这种效果能够吸引用户的注意力，展示丰富的信息。本篇文章将深入探讨如何在Android中创建一个自动播放...
Android 广告banner无限手动自动轮播
08-12
github上一个完成度很高的banner轮播控件，原项目是studio，我自己在eclipse上重新运行了一下，功能比较丰富，支持手动自动无限轮播，以及多种图片切换的样式。
Android-LoopBanner-可以自动轮播的无限循环banner
08-13
可以自动轮播的无限循环banner（An infinite loop banner that can be automatically rotated）
android 自定义轮播banner，包括手动轮播 CycleViewPager
12-28
这里包含一个eclipse项目，一个android studio项目；具体内容查看下面的网址：http://blog.csdn.net/qq_21445563/article/details/53908992
Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能
03-08
Android基础控件——Banner轮播图的无限循环轮播功能、手动滑动功能
android实现banner轮播图无限轮播效果
08-29
主要为大家详细介绍了android实现banner轮播图无限轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android自定义封装banner组件
01-20
自定义封装 banner 组件，供大家参考，具体内容如下 1. 效果图预览  2.基本功能 一个简单方便的轮播图组件，基于viewpager 基础上进行的封装。 可设置 项目中图片，网络图片， View； 支持循环自动播放，手势滑动切换，item点击事件,可设置 点点的样式宽高、颜色、大小、位置 ； 可设置蒙层；可设置 是否允许滑动；可设置 是否允许循环。  3.基本实现 1）. 自定义属性 <declare name=BannerLayoutStyle> <attr name=maskStartColor format=color|reference
Android 开发中 用Banner实现无限(自动)轮播
b_1126的博客
10-24 774
先添加依赖:(右上角有个Gradle,进入之后找到自己要添加依赖的项目 --> 右击鼠标,选择 Open Gradle config,在compile'' 队列中添加下一行代码,点击刷新即可).compile 'com.youth.banner:banner:1.4.9' MainActivity: package com.example.zhangkai20171023; imp
Banner
fxs_321的博客
10-24 266
首先编译一下  compile 'com.youth.banner:banner:1.4.9' package com.example.zhangkai20171023; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import com.youth.ban
android 自定义banner,Android自定义封装banner组件
weixin_30747571的博客
05-25 515
自定义封装 banner 组件，供大家参考，具体内容如下1. 效果图预览2.基本功能一个简单方便的轮播图组件，基于viewpager 基础上进行的封装。可设置 项目中图片，网络图片， View；支持循环自动播放，手势滑动切换，item点击事件,可设置 点点的样式宽高、颜色、大小、位置；可设置蒙层；可设置 是否允许滑动；可设置 是否允许循环。3.基本实现1). 自定义属性2).基本方法//添加本地...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值