教你如何用 RecyclerView 做一个好用的轮播图
时间:2022-04-28
本文章向大家介绍教你如何用 RecyclerView 做一个好用的轮播图,主要内容包括灵感来源、使用方法、Step 2. Add the dependency、Step 3. There are a few xml attributes to customise the RecyclerViewBanner、Step 4. Impelement Listener、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
引子
一般情况下,我们手机 App 上轮播图一般都是几张图来回循环,最多也就10几张,一般都是在10张以内的轮播。所以我们一般可能都是自己写,还有可能用到了别人写的第三方库。由此可能由于图片轮播数量不大,所以没有考虑复用机制,以致于放上百张图片或者上千张图片轮播时,导致应用崩溃,内存溢出的情况。
由于工作的需要,需要放上百张图片轮播,所以想做一个可能能够承受住的轮播,当然最节省内存的方式可能就是复用了。其实自己写复用也可以,配合 ViewPager ,但是想到了 RecyclerView 本身自带复用效果,那为何不用 RecyclerView 做一个呢?
灵感来源
来源其实很简单,那就是前几天刚刚分享的那篇文章《使用 RecyclerView 实现 Gallery 画廊效果,并控制 Item 停留位置》 ,那 RecyclerView 既然是可以做到画廊效果,还可以控制 Item 的停留位置,那就通过这个思路就可以实现轮播图效果啊。所以就有了下面的方法。
使用方法
在这里呢,我把我实现的轮播图做成了一个轮播库放到了 GitHub 上了,有兴趣的可以直接下载源码研究一下我是怎么实现的,具体的代码介绍直接看我源码即可。
源码地址:https://github.com/loonggg/RecyclerViewBanner
先看效果图:
使用方法如下:
Step 1. Add the JitPack repository to your build file
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
compile 'com.github.loonggg:RecyclerViewBanner:v1.1'
}
Step 3. There are a few xml attributes to customise the RecyclerViewBanner
- pointFocusBg 设置底部导航小圆点的选中状态颜色
- pointUnfocusBg 设置底部导航小圆点的未选中状态颜色
- interval 设置轮播图滚动间隔时间
- isShowPoint 设置是否显示底部指示导航小圆点
Example
<com.loonggg.rvbanner.lib.RecyclerViewBanner
android:id="@+id/rv_banner"
android:layout_width="match_parent"
android:layout_height="150dp"
loonggg:interval="3000"
loonggg:isShowPoint="true" />
Step 4. Impelement Listener
recyclerViewBanner = (RecyclerViewBanner) findViewById(R.id.rv_banner);
final List<Banner> banners = new ArrayList<>();
for (int i = 0; i < 2; i++) {
banners.add(new Banner("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487221110004&di=d6043e4b0c90ddf3ea5096c3d8eb8f58&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2014%2F067%2F5116EPAUD762_1000x500.jpg"));
banners.add(new Banner("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487221129421&di=c085432cf7c15836f8a6479138740f39&imgtype=0&src=http%3A%2F%2Fimage85.360doc.com%2FDownloadImg%2F2015%2F05%2F0517%2F53199602_2.jpg"));
banners.add(new Banner("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487221161254&di=fbb99c5dad3d5a2a2c8b0b44e8c0e081&imgtype=0&src=http%3A%2F%2Fimage.tianjimedia.com%2FuploadImages%2F2013%2F255%2FP52AOTE73EIG_1000x500.jpg"));
}
recyclerViewBanner.isShowIndicatorPoint(true);
recyclerViewBanner.setRvBannerDatas(banners);
recyclerViewBanner.setOnSwitchRvBannerListener(new RecyclerViewBanner.OnSwitchRvBannerListener() {
@Override
public void switchBanner(int position, ImageView bannerView) {
Glide.with(bannerView.getContext()).load(banners.get(position % banners.size()).getUrl()).placeholder(R.mipmap.ic_launcher).into(bannerView);
}
});
recyclerViewBanner.setOnRvBannerClickListener(new RecyclerViewBanner.OnRvBannerClickListener() {
@Override
public void onClick(int position) {
//点击事件
}
});
源码地址:https://github.com/loonggg/RecyclerViewBanner
- 按图索骥:SQL中数据倾斜问题的处理思路与方法
- [方法“Boolean Contains(System.Guid)”不支持转换为 SQL]的解决办法
- DataBind的一些试验
- 继承HibernateDaoSupport时遇到的问题 使用注解为HibernateDaoSupport注入sessionFa
- 常用代码
- 小程序的新功能你知道吗
- Mapxtreme之活活气死
- 仿淘宝的交易到计时JS
- 继小程序之后“小游戏”也来了,微信为此再次开启神秘入口
- (Head First 设计模式)学习笔记(3) --装饰者模式(StarBuzz咖啡店实例)
- 我的Js代码-按钮按下时判断是否选择了最后一行,给出提示
- (Head First 设计模式)学习笔记(2) --观察者模式(气象站实例)
- Spring Boot使用HandlerInterceptorAdapter和WebMvcConfigurerAdapter实现原始的登录验证
- 一条视频获C+融资 两个域名神助攻
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 13年毕业,用两年时间从外包走进互联网大厂!
- 网络原理(三)——一文了解传输层UDP/TCP协议
- Spring Cloud Gateway结合注册中心使用路由失败?那就自己定制路由功能呗
- 动态内存管理
- list类
- 一文了解STL容器deque类
- 如何让SpringMVC框架使用我们封装的JsonUtils实现消息的序列化和反序列化
- 一文了解stack和queue类的实现
- 继承
- 什么是多态?如何实现?只看这一篇就够了
- 【DB笔试面试865】序列cache值过小导致CPU利用率过高
- 二叉树由浅至深(上)
- map和set的概念及使用
- AVL树和红黑树(map和set的底层实现)
- 二叉树由浅至深(下)