Android Jetpack Compose 实现一个电视剧选集界面

2024-06-12 14:36

本文主要是介绍Android Jetpack Compose 实现一个电视剧选集界面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 需求概述
  • 效果展示
  • 实现思路
  • 代码实现
  • 总结

需求概述

我们经常能看到爱奇艺或者腾讯视频这类的视频APP在看电视剧的时候都会有一个选集的功能。如下图所示

在这里插入图片描述这个功能其实很简单,就是绘制一些方块,在上面绘制上数字,还有标签啥的。当用户点击对应的数字式时可以切换到对应的剧集。如果剧集太多,屏幕展示不完,就可以滑动屏幕查看更多的剧集,就这么一个很简单的UI小组件。我们使用Compose来实现下。

效果展示

在这里插入图片描述

如上图所示,在UI的最上面是标题(选集),下面是我们绘制出的小方块。当小方块选中的时候会绘制一个指示器,如果剧集太多就需要能上滑展示更多的剧集

如果剧集少的时候,居左展示。如下
在这里插入图片描述
如果是横屏,则如下展示:
在这里插入图片描述

实现思路

可能很多读者会很容易的想到使用网格布局的控件LazyVerticalGrid实现,如果说不需要透明背景的话,这种方法是可行的,而且性能也会很好,但是如果要求背景可以设置透明度的话,这种方式就不行了,因为LazyVerticalGrid无法将背景设置成透明的,如我们的效果展示图中,可以看到我们的选集UI出现后,还可以看到后面的背景,如果使用LazyVerticalGrid,则无法实现这个效果。所以我们采用的方式是直接通过for循环绘制。使用两个for循环,分别负责绘制行和列,然后再处理点击的回调和选中的指示器就行了,我们可以使用Column,Box,Row,Text组件搭配使用,这些组件都是可以设置透明度的,能达到需求的效果。

代码实现

代码的实现很简单,就是一个composable函数,在代码中都做了注释,所以就不多废话了,原理也很简单,就是通过两个for循环分别绘制行和列,根据行和列之间的对应关系去计算显示的高度,padding等。

/*** @param row 需要展示的行数* @param col 需要展示的列数* @param contentPadding 内容的padding,默认15dp* @param displayRowCount 展示的函数,比如这个值为7,传入的row 为10,那么只会展示7行,多余的三行需要滑动查看,默认展示5行* @param numberPadding 数字方块之间的padding,默认11dp* @param contentTopPadding 内容顶部的padding,默认0dp* @param currentNum 当前选中的数字,需要根据它绘制指示器* @param isPortrait 是否是竖屏,需要根据横屏和竖屏来调整布局,默认我是竖屏* @param*/@Composable
fun ShowDramaSelectUI(row: Int,col: Int,contentPadding: Dp = 15.dp,displayRowCount: Int = 5,numberPadding: Dp = 11.dp,contentTopPadding: Dp = 0.dp,currentNum: Int = 1,isPortrait: Boolean = true,onNumSelect: (Int) -> Unit
) {// 记录滚动的状态val scrollState = rememberScrollState()val displayHeight =// 根据显示的行数计算容器的高度,下面的表达式不能换行,否则根据kotlin的语法特性,换行后的表达式不会参与计算// 这里的60dp是数字的方块的大小,也可通过传参数指定(displayRowCount) * (60.dp).value + (displayRowCount - 1) * numberPadding.value// 记录选中的数字var selectedNum by remember { mutableIntStateOf(currentNum) }Log.d(TAG, "walt: selectedNum====>: $selectedNum")//背景蒙层Box(modifier = Modifier.fillMaxSize().background(Color(0xCC000000)))Box(modifier = Modifier.fillMaxSize().padding(top = contentTopPadding,start = contentPadding,end = contentPadding),contentAlignment = Alignment.TopCenter) {Column(modifier = Modifier.wrapContentHeight().wrapContentWidth(),horizontalAlignment = Alignment.CenterHorizontally) {Box(modifier = Modifier.fillMaxWidth().padding(start = 10.dp),contentAlignment = Alignment.CenterStart) {Text(text = "选集", style = TextStyle(color = Color(0xFF797F85),fontSize = 14.sp,fontWeight = FontWeight.Normal))} // 选集BoxSpacer(modifier = Modifier.height(10.dp).fillMaxWidth())Column(modifier = Modifier.height(displayHeight.dp).fillMaxWidth()// 让控件拥有滑动的能力.verticalScroll(scrollState),verticalArrangement = Arrangement.Top,// 根据横竖屏设置对齐方式horizontalAlignment = if ((isPortrait && (col < 5))|| (!isPortrait && (col < 10))) {Alignment.Start} else {Alignment.CenterHorizontally}) {// 绘制行for (i in 1..row) {Row(modifier = Modifier.wrapContentWidth().wrapContentHeight()) {// 绘制列for (j in col * (i - 1) + 1..(i - 1) * col + col) {Box(modifier = Modifier.size(60.dp).clip(RoundedCornerShape(6.dp)).background(Color(0x8031373D))// 回调选中的数字.clickable {selectedNum = jonNumSelect(selectedNum)},contentAlignment = Alignment.Center) {Text(text = "$j",style = TextStyle(color = Color.White,fontSize = 20.sp,textAlign = TextAlign.Center),)// 只有选中的数字和当前的数字相同时,才会展示指示器if (j == selectedNum) {Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.BottomCenter) {Divider(modifier = Modifier.fillMaxWidth(),thickness = 6.dp,color = Color(0xFF037FF5))}}}//                        // 绘制两个列之间的间距,如果不是最后一个item,才加Spacerif ((j != (i - 1) * col + col)) {Spacer(modifier = Modifier.height(60.dp).width(numberPadding))}}} // Row// 绘制行之前的间距Spacer(modifier = Modifier.height(numberPadding).fillMaxWidth())}}}}
}

测试代码

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyComposeTheme {Box(modifier =Modifier.fillMaxSize()){Image(painter = painterResource(R.drawable.m10),modifier = Modifier.fillMaxSize(),contentScale = ContentScale.Crop,contentDescription = null)ShowDramaSelectUI(row = 10, col = 10, isPortrait = true, onNumSelect = {num->Log.d(TAG,"$num has selected1 !!!")})}}}}
}

总结

本文主要介绍的是一个剧集选集的功能,这里只是介绍了实现的方式,比较粗糙,读者可以按照自己的需求修改,有更好的实现方案也可以在评论区交流。本文主要起抛砖引玉的作用,也是记录自己实现的一个小需求。给需要的小伙伴打个样,欢迎交流指正。

这篇关于Android Jetpack Compose 实现一个电视剧选集界面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1054492

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分