Android:Banner 和 Glide 在 Fragment 中实现轮播图
添加依赖信息
引入 Banner 和 Glide 依赖信息:
dependencies {
implementation 'io.github.youth5201314:banner:2.2.2'
implementation 'com.github.bumptech.glide:glide:4.14.2'
annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
}
Banner 视图
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="#EAEAEA"
android:padding="5dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="SpeakableTextPresentCheck">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="150dp"
app:banner_radius="8dp" />
</RelativeLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
图片实体类
Kotlin:
class BannerViewItem() {
var url: String = ""
constructor(url: String) : this() {
this.url = url
}
override fun toString(): String {
return "BannerViewItem(url='$url')"
}
}
Java:
public class BannerViewItem {
private String url;
public BannerViewItem(String url) {
this.url = url;
}
public BannerViewItem() {}
public getUrl() {
return this.url
}
public setUrl(String url) {
this.url = url;
}
}
轮播图适配器
创建一个类,继承 BannerAdapter,类中再创建一个 Holder 内部类。实现 BannerAdapter 的两个函数:onCreateHolder、onBindView。
Kotlin:
class BannerViewApapter(
banners: List<BannerViewItem>,
private var fragment: Fragment
) : BannerAdapter<BannerViewItem, BannerViewApapter.BannerViewHolder>(banners) {
override fun onCreateHolder(parent: ViewGroup?, viewType: Int): BannerViewHolder {
val imageView = ImageView(parent!!.context)
imageView.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
imageView.scaleType = ImageView.ScaleType.CENTER_CROP
return BannerViewHolder(imageView)
}
override fun onBindView(holder: BannerViewHolder?, data: BannerViewItem?, position: Int, size: Int) {
Glide.with(fragment).load(mDatas[position].url).into(holder!!.imageView)
}
class BannerViewHolder(var imageView: ImageView) : RecyclerView.ViewHolder(imageView) {
init {
imageView.scaleType = ImageView.ScaleType.CENTER_CROP
}
}
}
Java:
public class BannerViewApapter {
private List<BannerViewItem> banners;
private Fragment fragment;
public BannerViewApapter(List<BannerViewItem> banners, Fragment fragment) {
super(banners);
this.fragment = fragment;
}
@Override
public BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {
ImageView imageView = new ImageView(parent.getContext());
imageView.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return new BannerViewHolder(imageView);
}
@Override
public void onBindView(BannerViewHolder holder, BannerViewItem data, int position, int size) {
Glide.with(fragment).load(mDatas.get(position).getUrl()).into(holder.imageView);
}
private class BannerViewHolder extends RecyclerView.ViewHolder {
ImageView imageView;
public BannerViewHolder(@NonNull ImageView view) {
super(view);
this.imageView = view;
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
}
}
}
Fragment 中使用
通过 id 找到布局文件中的 Banner 视图,给其设置 Adapter。
Kotlin:
class HomeFragment : Fragment() {
private lateinit var binding: FragmentHomeBinding
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
binding = FragmentNavFindBinding.inflate(layoutInflater, container, false)
binding.banner.addBannerLifecycleObserver(this).setAdapter(
BannerViewApapter(
listOf(
BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f28377c4236841c7294ae68c88e5af6.jpg?w=2452&h=920"),
BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e89200db5385ff3d99fb45cc342fcd14.jpg?thumb=1&w=1533&h=575&f=webp&q=90")
), this
)
).indicator = CircleIndicator(context);
return binding.root
}
}
Java:
public class HomeFragment extends Fragment {
private final ArrayList<BannerViewItem> banners;
public HomeFragment() {
banners = new ArrayList<>();
banners.add(new BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f28377c4236841c7294ae68c88e5af6.jpg?w=2452&h=920"));
banners.add(new BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e89200db5385ff3d99fb45cc342fcd14.jpg?thumb=1&w=1533&h=575&f=webp&q=90"));
banners.add(new BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34ee703098b12753b2130a3462ca33ac.jpg?thumb=1&w=1533&h=575&f=webp&q=90"));
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View inflate = inflater.inflate(R.layout.fragment_home, container, false);
Banner banner = inflate.findViewById(R.id.banner);
banner.addBannerLifecycleObserver(this)
.setAdapter(new BannerViewApapter(banners, this))
.setIndicator(new CircleIndicator(getContext()));
return inflate;
}
}
效果图
Android:Banner 和 Glide 在 Fragment 中实现轮播图的更多相关文章
- android中广告轮播图总结
功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...
- angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper npm install --save swiper 或者 bower install --save swiper 引入文件 ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- Android项目实战(四十七):轮播图效果Viewpager
简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V 需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...
- 利用axure软件实现app中的轮播图功能
1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Android 轮播图Banner切换图片的效果
Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910 版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...
- 029 Android 轮播图广告Banner开源框架使用
1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...
随机推荐
- 在windows下导入react项目并且打包编译后部署到nginx上
在windows下导入react项目并且打包编译后部署到nginx上 一.安装npm 二.创建react项目 三.安装nginx 四.总结 最近接手了公司的一个django项目,这是应该前后端分离的项 ...
- python中函数教程
函数的基本概念 1.什么是函数? 函数相当于一种工具,就是把一串代码装到一起,我们下次需要用的这个功能的时候可以直接使用 函数相当于是工具(具有一定功能) 不用函数 修理工需要修理器件要用锤子 原地打 ...
- 二阶段目标检测网络-FPN 详解
论文背景 引言(Introduction) 特征金字塔网络 FPN FPN网络建立 Anchor锚框生成规则 实验 代码解读 参考资料 本篇文章是论文阅读笔记和网络理解心得总结而来,部分资料和图参考论 ...
- java中的静态属性和静态方法
本文主要讲述java的静态变量和静态方法 静态变量和静态方法,随着类加载完成,而完成,随着类的消失,而销毁. 静态方法只能调用静态变量/方法:普通方法,既能调用静态变量/方法,也能调用非静态变量/方法 ...
- CH32V307以太网(芯片内部10M)
用过WCH的CH579M或者CH563的话,就会发现CH32V307这个自带的10M以太网代码编写与前两颗芯片流程十分相似.部分区别就在于初始化方面. 代码流程依旧按照 初始化--->等待PHY ...
- Base58算法加密解密(Python实现)
def b58encode(tmp:str) -> str: tmp = list(map(ord,tmp)) temp = tmp[0] base58 = "123456789ABC ...
- 温故知新 - 靶机练习-Toppo
今天闲来无事,重新做了一下以前做过的第一个靶机(https://www.cnblogs.com/sallyzhang/p/12792042.html),这个靶机主要是练习sudo提权,当时不会也没理解 ...
- [OpenCV实战]6 基于特征点匹配的视频稳像
目录 1 介绍 1.1 视频稳定的方法 1.2 使用点特征匹配的视频稳定 2 算法 2.1 帧间运动信息获取 2.1.1 合适的特征点获取 2.1.2 Lucas-Kanade光流法 2.1.3 运动 ...
- 如何用 Python 隐藏你的 API 密钥
你好,我是悦创. 博客首发:https://bornforthis.cn/posts/19.html 有时您需要在代码中存储敏感信息,例如密码或 API 密钥,而在 Python 中最简洁的方法是使用 ...
- 使用SQL4Automation让CodeSYS连接数据库
摘要:本文旨在说明面向CodeSYS的数据库连接方案SQL4Automation的使用方法. 1.SQL4Automation简介 1.1.什么是SQL4Automation SQL4Auto ...