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

2024-01-10 13:44
文章标签 实现 android 使用 展示 compose 列表 底部 网格 提示信息

本文主要是介绍使用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()}
}

这篇关于使用Android Compose实现网格列表滑到底部的提示信息展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/591013。

相关文章

SpringBoot集成redisson实现延时队列教程

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配
阅读更多...
Python的Darts库实现时间序列预测

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts？二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与
阅读更多...
Python使用FastAPI实现大文件分片上传与断点续传功能

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现（FastAPI）2.1 运行环境2.2 目录结构建议2.3 serv
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
Spring Security简介、使用与最佳实践

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security？—— 核心思想二、如何在 Java 项目中使用？——
阅读更多...
SpringBoot+RustFS 实现文件切片极速上传的实例代码

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot？二、环境准备与部署2.1 安装 RustF
阅读更多...
Nginx部署HTTP/3的实现步骤

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步：安装必要的依赖库第二步：获取并构建 BoringSSL第三步：获取 Nginx
阅读更多...
springboot中使用okhttp3的小结

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。
阅读更多...
MyBatis Plus实现时间字段自动填充的完整方案

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详
阅读更多...
Python实现Excel批量样式修改器(附完整代码)

Python实现Excel批量样式修改器(附完整代码)

《Python实现Excel批量样式修改器(附完整代码)》这篇文章主要为大家详细介绍了如何使用Python实现一个Excel批量样式修改器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录前言功能特性核心功能界面特性系统要求安装说明使用指南基本操作流程高级功能技术实现核心技术栈关键函
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2