使用Android Compose实现网格列表滑到底部的提示信息展示

文章目录

  • 概述
  • 1 效果对比
    • 1.1 使用添加Item的办法：
    • 1.2 使用自定义的方法
  • 2. 效果实现
    • 2.1 列表为空时的提示页面实现
    • 2.2 添加Item的方式代码实现
    • 2.3 使用自定义的方式实现
  • 3. UI工具类

概述

目前大多数的APP都会使用列表的方式来呈现内容，例如淘宝，京东，腾讯体育的评论区等都会使用列表布局。在Android传统的View中主要是使用RecyclerView控件来实现大量数据的展示。而在Compose中使用的是LazyColumn或者是LazyGrid组件。这些组件的使用都很简单，网上有很多的例子，不是本文的重点，本文的重点是介绍实现当我们需要展示的数据展示完了后，即列表滑动到最底部的时候，我们需要展示给用户一个提示信息：比如：”已经到底“。比如百度的评论区翻到最后一条时：

在这里插入图片描述

在Compose 中，这个需求其实也不难，网上也有说明。做法就是在布局中多加一个item,用于展示最后的这条提示信息。而本文我会介绍另一种办法，是我个人在写项目的时候琢磨出来的。感觉效果会好点。

1 效果对比

本文的UI图片展示如下：
在这里插入图片描述

滑动到底部的时候会显示一条提示信息 ：”哥，我已经到底了!!!“

1.1 使用添加Item的办法：

在这里插入图片描述

1.2 使用自定义的方法

在这里插入图片描述

经过对比上面的两个动图我们可以发现，使用添加Item的方法(也就是网上提供的办法)，当我们快要滑动到底部的时候，就会看到文字已经开始展示了，感觉有点生硬，给人的感觉就是提示信息是预埋在底部的。虽然也能完成需求，而且也没啥不妥之处，但我个人就是觉得不太舒服，而第二种方式，可以看到只有我们真正的滑动到这个LazyGrid的底部的时候，提示信息才会展示。因为在上面的界面中们也发现了有个添加图片的悬浮按钮，为了展示这个悬浮按钮，我们是让内容和底部做了一定的内边距的。所以个人感觉当我们把整个LazyGrid滑完再展示信息的话才是符合逻辑的，而不是还没滑动到底部的时候就看到了下面的提示信息

看完效果图，接下来我们就分别介绍下两种实现方式吧，需要的读者按需取用，这里只介绍LazyGrid,LazyColumn的也是一样的，所以不多做赘述。

2. 效果实现

2.1 列表为空时的提示页面实现

在列表展示内容的时候，当列表中没有内容或者网络不可达导致无法获取到内容的时候，往往会展示一个提示的页面，本文也简单的实现了下，读者可参考使用。界面效果如下：

在这里插入图片描述

代码如下：

@Composable
fun ShowEmptyUI(topMargin: Dp) {Column(modifier = Modifier.fillMaxHeight(),verticalArrangement = Arrangement.Top,horizontalAlignment = Alignment.CenterHorizontally) {Spacer(modifier = Modifier.height(topMargin))Image(painter = painterResource(R.drawable.no_content),contentDescription = null,modifier = Modifier.size(81.dp),contentScale = ContentScale.Crop)Text(text = "没有内容可以看啦",style = TextStyle(fontSize = TextUnit(16f, TextUnitType.Sp),color = Color(0xFFE0E6EC),),modifier = Modifier.height(22.dp))}
}

2.2 添加Item的方式代码实现

添加Item的方式很简单，就是在LazyGrid的block语句块中的最下面添加如下的代码：

item(span = {GridItemSpan(maxLineSpan)}) {Text(text = "哥,我已经到底了!!!",style = TextStyle(fontSize = TextUnit(14f, TextUnitType.Sp),color = Color(0xFF92989E)),modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center)}

即可实现滑动到底部时展示提示信息的需求，但是这中方式好像无法做定制，比如我想控制提示信息动态显示隐藏好像无法做到，发现能做到的读者欢迎评论区讨论哈。
完整代码为：

// dataList的定义
val dataList = mutableListOf<Int>(R.drawable.m,R.drawable.m1,R.drawable.m2,R.drawable.m3,R.drawable.m4,R.drawable.m5,R.drawable.m6,R.drawable.m7,R.drawable.m8,R.drawable.m9,R.drawable.m10
)// 图片资源文件下的图片，读者可以替换为自己的图片。
@Composable
fun ShowGridDemoUIByItem() {if (dataList.isEmpty()) {ShowEmptyUI(topMargin = 211.dp)} else {val lazyGridState = rememberLazyGridState()LazyVerticalGrid(state = lazyGridState,columns = GridCells.Fixed(2),contentPadding = PaddingValues(start = 15.dp,top = 10.dp,end = 16.dp,bottom = 161.dp),verticalArrangement = Arrangement.spacedBy(12.dp),horizontalArrangement = Arrangement.spacedBy(11.dp),modifier = Modifier.background(Color(0xff31373d)).fillMaxWidth().fillMaxHeight()) {items(dataList, key = { it.hashCode() }) {Image(painter = painterResource(it),contentDescription = null,contentScale = ContentScale.Crop,modifier = Modifier.size(200.dp).clip(shape = RoundedCornerShape(14.dp)))}item(span = {GridItemSpan(maxLineSpan)}) {Text(text = "哥,我已经到底了!!!",style = TextStyle(fontSize = TextUnit(14f, TextUnitType.Sp),color = Color(0xFF92989E)),modifier = Modifier.fillMaxWidth(),textAlign = TextAlign.Center)}}}
}

2.3 使用自定义的方式实现

自定义的方式就是在LazyGrid的基础上做扩展，当我们使用LazyGrid组件时，需要我们传入一个val lazyGridState = rememberLazyGridState() 这个lazyGridState中保存了LazyGrid组件的很多状态信息，比如当前的列表中第一个可见item的position,当前是否可以往前滑动，是否可以往后滑动，是否正在滚动以及布局信息等，我们拿到这些信息后就可以做一些自己想要实现的动作了。本功能我们就可以通过lazyGridState拿到当前是否可以继续往前滑动，如果不能，则证明滑动到底部了。API为：

val canScrollBack = lazyGridState.canScrollBackward

然后通过布局信息，拿到对应的内容后的内边距，网格布局的宽和网格布局的末端偏移量，然后计算出，我们要展示的提示文字的显示位置。API为：

// 这个值就是我们设置的  bottom = 161.dp 中的161.dp的像素值/*
LazyVerticalGrid(state = lazyGridState,columns = GridCells.Fixed(2),contentPadding = PaddingValues(start = 15.dp,top = 10.dp,end = 16.dp,bottom = 161.dp)......*/val afterPending = layoutInfo.value.afterContentPaddingval gridViewEndOffset =layoutInfo.value.viewportEndOffset.toFloat()val gridViewW = layoutInfo.value.viewportSize.width.toFloat()

由于本案例中文字需要居中展示，所以我们还需要测量出文字的宽度。使用Paint的API测量：

  val paint = TextPaint().apply {textSize = UIUtils.sp2px(context, 14f)}val bottomText = "哥,我已经到底了!!!"val textW = paint.measureText(bottomText)

接着就可以计算提示文字的展示位置了，如下所示：

// 最后一个Item和提示的距离val bottomMargin = UIUtils.dp2px(context,18f)val xOffset = (gridViewW / 2 - textW / 2)val yOffset =gridViewEndOffset - afterPending + bottomMargin

最后使用Modifier的drawBehind API将文字绘制出来就行了。

 modifier = Modifier.background(Color(0xff31373d)).fillMaxWidth().fillMaxHeight().drawBehind {...if (!canScrollForward) {drawText(textMeasurer = textMeasurer,text = bottomText,style = TextStyle(fontSize = TextUnit(14f, TextUnitType.Sp),color = Color(0xFF92989E)),softWrap = false,topLeft = Offset(x = xOffset, y = yOffset))}...}

完整的代码为：

@OptIn(ExperimentalTextApi::class)
@Composable
fun ShowGridDemoUI() {if (dataList.isEmpty()) {ShowEmptyUI(topMargin = 211.dp)} else {val lazyGridState = rememberLazyGridState()val firstVisibleItemIndex by remember {derivedStateOf { lazyGridState.firstVisibleItemIndex }}val canScrollForward = lazyGridState.canScrollForwardval canScrollBack = lazyGridState.canScrollBackwardval inInScrolling = lazyGridState.isScrollInProgressLog.d(TAG, "firstVisibleItemIndex = $firstVisibleItemIndex, " +"canScrollForward: $canScrollForward" +" ,canScrollBack: $canScrollBack ,inInScrolling: $inInScrolling" +",mediaFileList: size : ${dataList.size}")val layoutInfo = remember {derivedStateOf { lazyGridState.layoutInfo }}val context = LocalContext.currentval textMeasurer = rememberTextMeasurer(100)LazyVerticalGrid(state = lazyGridState,columns = GridCells.Fixed(2),contentPadding = PaddingValues(start = 15.dp,top = 10.dp,end = 16.dp,bottom = 161.dp),verticalArrangement = Arrangement.spacedBy(12.dp),horizontalArrangement = Arrangement.spacedBy(11.dp),modifier = Modifier.background(Color(0xff31373d)).fillMaxWidth().fillMaxHeight().drawBehind {val paint = TextPaint().apply {textSize = UIUtils.sp2px(context, 14f)}val afterPending = layoutInfo.value.afterContentPaddingval gridViewEndOffset = layoutInfo.value.viewportEndOffset.toFloat()val gridViewW = layoutInfo.value.viewportSize.width.toFloat()val bottomText = "哥,我已经到底了!!!"val textW = paint.measureText(bottomText)// 最后一个Item和提示的距离val bottomMargin = UIUtils.dp2px(context,18f)val xOffset = (gridViewW / 2 - textW / 2)val yOffset =gridViewEndOffset - afterPending + bottomMarginLog.d(TAG, "xcy: canScrollForward: $canScrollForward"+  " ,xOffset:$xOffset ,yOffset: $yOffset, " +" ,bottomMargin: $bottomMargin" +" ,afterPending: $afterPending" +" ，gridViewW:$gridViewW" +" ,textW: $textW")if (!canScrollForward) {drawText(textMeasurer = textMeasurer,text = bottomText,style = TextStyle(fontSize = TextUnit(14f, TextUnitType.Sp),color = Color(0xFF92989E)),softWrap = false,topLeft = Offset(x = xOffset, y = yOffset))}}) {items(dataList, key = { it.hashCode() }) {Image(painter = painterResource(it),contentDescription = null,contentScale = ContentScale.Crop,modifier = Modifier.size(200.dp).clip(shape = RoundedCornerShape(14.dp)))}}}
}

3. UI工具类

object UIUtils {fun dp2px(context: Context, dpValue: Float): Float {return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,context.resources.displayMetrics).toInt().toFloat()}fun px2dp(context: Context, pxValue: Float): Float {return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,pxValue,context.resources.displayMetrics).toInt().toFloat()}@SuppressLint("InternalInsetResource", "DiscouragedApi")fun getStatusBarHeight(context: Context): Int {val activity = context as Activityval resId = activity.resources.getIdentifier("status_bar_height", "dimen", "android")if (resId > 0) {return activity.resources.getDimensionPixelSize(resId)}return 0}@SuppressLint("InternalInsetResource", "DiscouragedApi")fun getNavigationBarHeight(context: Context): Int {val activity = context as Activityval resId = activity.resources.getIdentifier("navigation_bar_height", "dimen", "android")if (resId > 0) {return activity.resources.getDimensionPixelSize(resId)}return 0}fun sp2px(context: Context, spValue: Float): Float {return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,spValue,context.resources.displayMetrics).toInt().toFloat()}fun px2sp(context: Context, spValue: Float): Float {return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,spValue,context.resources.displayMetrics).toInt().toFloat()}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/236345.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

笔记本摄像头模拟监控推送RTSP流

笔记本摄像头模拟监控推送RTSP流

使用笔记本摄像头模拟监控推送RTSP流 一、基础安装软件准备 本文使用软件下载链接:下载地址 FFmpeg软件: Download ffmpeg 选择Windows builds by BtbN 一个完整的跨平台解决方案&#xff0c;用于录制、转换和流式传输音频和视频。 EasyDarwin软件&#xff1a;Download Easy…
阅读更多...
高性能、可扩展、分布式对象存储系统MinIO的介绍、部署步骤以及代码示例

高性能、可扩展、分布式对象存储系统MinIO的介绍、部署步骤以及代码示例

详细介绍 MinIO 是一款流行的开源对象存储系统&#xff0c;设计上兼容 Amazon S3 API&#xff0c;主要用于私有云和边缘计算场景。它提供了高性能、高可用性以及易于管理的对象存储服务。以下是 MinIO 的详细介绍及优缺点&#xff1a; 架构与特性&#xff1a; 开源与跨平台&am…
阅读更多...
jmeter--2.常用组件以及作用域

jmeter--2.常用组件以及作用域

目录 1.常用的组件以及执行顺序 2.常用的组件作用 2.1 测试计划&#xff1a;jmeter启动&#xff0c;其它组件的容器 2.2 线程组&#xff08;测试片段&#xff09;&#xff1a;代表一定虚拟用户数&#xff0c;测试片段代表模块 2.3 配置元件&#xff1a;配置信息 2.4 前置处…
阅读更多...
便携式灯具的UL测试标准UL153介绍

便携式灯具的UL测试标准UL153介绍

UL153标准&#xff1a;UL153标准主要是描述有关使用电源线及插头作为连接工具,使用120伏电压,15或20安培的电源,并符合美国国家电器规范的便携灯.此标准也适用于那些不用插头,而用一些兼容的接线端作为连接工具的便携灯&#xff0c;同时对于使用非120伏电压&#xff0c;15or20安…
阅读更多...
Linux限制用户可用硬盘空间

Linux限制用户可用硬盘空间

为了防止某个用户占用大量资源导致其他用户无法正常使用&#xff0c;一般会对单个用户可占用资源进行限制。就磁盘限额&#xff0c;XFS文件系统原生支持目录级别的限制。ext文件系统不支持目录限制&#xff0c;曲线方式是限制用户的总占用空间。 本文介绍使用quota程序限制用户…
阅读更多...
02. 坦克大战项目-准备工作和绘制坦克

02. 坦克大战项目-准备工作和绘制坦克

02. 坦克大战项目-准备工作和绘制坦克 01. 准备工作 1. 首先我们要创建四个类 1. Tank类 介绍&#xff1a;Tank 类主要用来表示坦克的基本属性和行为 public class Tank {private int x;//坦克的横坐标private int y;//坦克的纵坐标public int getX() {return x;}public v…
阅读更多...
Springboot3+EasyExcel由浅入深

Springboot3+EasyExcel由浅入深

环境介绍 技术栈 springboot3easyexcel 软件 版本 IDEA IntelliJ IDEA 2022.2.1 JDK 17 Spring Boot 3 EasyExcel是一个基于Java的、快速、简洁、解决大文件内存溢出的Excel处理工具。 他能让你在不用考虑性能、内存的等因素的情况下&#xff0c;快速完成Excel的读、…
阅读更多...
Android系统remount功能的实现原理

Android系统remount功能的实现原理

前言 remount 是 Android 系统中的一个命令&#xff0c;用于重新挂载文件系统为可读写模式。在 Android 设备中&#xff0c;大多数文件系统默认是以只读模式挂载的&#xff0c;在这种模式下&#xff0c;无法修改或删除文件。使用 remount 命令可以将文件系统重新挂载为可读写模…
阅读更多...
关于burpsuite设置HTTP或者SOCKS代理

关于burpsuite设置HTTP或者SOCKS代理

使用burpsuite给自己的浏览器做代理&#xff0c;抓包重发这些想必大家都清除 流量请求过程&#xff1a; 本机浏览器 -> burpsuite -> 目标服务器 实质还是本机发出的流量 如果我们想让流量由其他代理服务器发出 实现&#xff1a; 本机浏览器 -> burpsuite -> 某…
阅读更多...
用Gradio做一个ai-chat应用

用Gradio做一个ai-chat应用

背景 上半年国内的大模型还没遍地开花的时候&#xff0c;笔者花巨资购了两台云服务器及给OpenAI充了20$&#xff0c;给身边的亲友给做了一个可使用的ai-chat。 代码实现 起先笔者 基于openai的api接口文档 API Reference - OpenAI API &#xff0c;自己编写web后台&#xff0…
阅读更多...
Flink自定义Source模拟数据流

Flink自定义Source模拟数据流

maven依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.…
阅读更多...
1329：【例8.2】细胞 广度优先搜索

1329：【例8.2】细胞 广度优先搜索

1329&#xff1a;【例8.2】细胞 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 一矩形阵列由数字0 到9组成,数字1到9 代表细胞,细胞的定义为沿细胞数字上下左右还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数。如: 4 10 0234500067 1034560500 2045600671 00000000…
阅读更多...
docker搭建部署minio 存储文件

docker搭建部署minio 存储文件

1. 介绍 MinIO是一个开源的对象存储服务器&#xff0c;它允许你在自己的硬件上构建高性能的对象存储。本文将指导你如何使用Docker搭建和部署MinIO&#xff0c;并挂载外部目录以实现文件的持久化存储。 2. 安装Docker 首先&#xff0c;确保你的系统上已经安装了Docker。你可…
阅读更多...
基于JavaWeb+SSM+Vue基于微信小程序的消防隐患在线举报系统的设计与实现

基于JavaWeb+SSM+Vue基于微信小程序的消防隐患在线举报系统的设计与实现

基于JavaWebSSMVue基于微信小程序的消防隐患在线举报系统的设计与实现 源码获取入口KaiTi 报告Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 KaiTi 报告 1.1 题目背景 随着信息化飞速发展&#xff0c;互联网不…
阅读更多...
3D PDF查看器HOOPS Publish助力Smartscape拓展日本AEC市场！

3D PDF查看器HOOPS Publish助力Smartscape拓展日本AEC市场！

​ 公司&#xff1a;Smartscape Co., Ltd. 行业&#xff1a;建筑、工程和施工(AEC) 软件&#xff1a;适用于AEC行业的3D PDF工具 软件开发工具包&#xff1a;Hoops Publish HOOPS_3D软件开发工具_HOOPS中文网慧都科技是HOOPS全套产品中国地区指定授权经销商&#xff0c;提供3D…
阅读更多...
Python教程41：使用turtle画蜡笔小新

Python教程41：使用turtle画蜡笔小新

---------------turtle源码集合--------------- Python教程39&#xff1a;使用turtle画美国队长盾牌 Python教程38&#xff1a;使用turtle画动态粒子爱心文字爱心 Python教程37&#xff1a;使用turtle画一个戴帽子的皮卡丘 Python教程36&#xff1a;海龟画图turtle写春联 …
阅读更多...
十一、工具盒类(MyQQ)（Qt5 GUI系列）

十一、工具盒类(MyQQ)（Qt5 GUI系列）

目录 ​编辑 一、设计需求 二、实现代码 三、代码解析 四、总结 一、设计需求 抽屉效果是软件界面设计中的一种常用形式&#xff0c;可以以一种动态直观的方式在有限大小的界面上扩展出更多的功能。本例要求实现类似 QQ 抽屉效果。 二、实现代码 #include "dialog.…
阅读更多...
应对 DevOps 中的技术债务：创新与稳定性的微妙平衡

应对 DevOps 中的技术债务：创新与稳定性的微妙平衡

技术性债务在DevOps到底意味着什么&#xff1f;从本质上讲&#xff0c;这是小的开发缺陷的积累&#xff0c;需要不断地返工。它可能由多种原因引起&#xff0c;例如快速交付新功能的压力&#xff0c;这可能会导致团队不得不牺牲代码的整洁和完善。但这些不完整的小代码&#xf…
阅读更多...
【Python进阶必备】一文掌握re库：实战正则表达式

【Python进阶必备】一文掌握re库：实战正则表达式

目录 re库初识 re库基础使用方法 compile()函数 基本用法 正则表达式常用规则字符 match与search方法 match search match/search findall与finditer方法 使用findall()返回所有匹配项 使用findall()提取多个组的匹配 使用finditer()逐个返回Match对象 使用findi…
阅读更多...
Realm Management Extension领域管理扩展之系统架构

Realm Management Extension领域管理扩展之系统架构

RME不仅仅是一组处理器功能，为了充分利用RME引入的功能，系统的其余部分需要提供支持。 下图显示了一个示例系统以及引入RME后受到影响的组件： 主存储器保护 RME启用的系统包括内存加密和可能的完整性。基线加密要求支持对外部内存进行加密，使用每个PA空间的单独加密密钥或…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023