Android compose wanandroid app之分类页面的实现

2024-03-29 15:08
文章标签 实现 android app 分类 页面 compose wanandroid

本文主要是介绍Android compose wanandroid app之分类页面的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现分类页面

    • 前言
      • Scaffold简单使用
      • BottomNavigation和NavHost实现底部导航
        • BottomNavigationItem
        • NavHost切换路由
      • 分类页面的实现
        • 获取数据
        • 左边布局的实现
        • 右边布局的实现
        • 填充ClassicPage内容
      • Compose自定义布局实现流式布局
        • 遍历所有子项，测量宽高
        • 定位子项
      • 源码地址

前言

之前实现了底部导航栏以及滑动切换，这里根据官方推荐的底部导航栏的使用方式重新实现了底部导航栏，并实现分类页面，通过API获取导航数据，实现左边菜单栏，右边内容显示的效果，效果图如下：
在这里插入图片描述

Scaffold简单使用

使用Scaffold可以实现Compose的基槽位布局，比如topBar顶部菜单栏，bottomBar底部导航栏，floatingActionButtonPosition悬浮按钮等等；这里就不做过多的介绍了，详情可以查阅Scaffold的属性进行设置，这里主要看bottomBar的实现。

先看一下bottomBar在Scaffold的表现形式：

bottomBar: @Composable () -> Unit = {},

从参数类型可以看出来，我们需要在里面放置一个被@Composable标记的函数，那么就先创建一个函数，并使用@Composable注解：

@Composable
fun BottomTab(){//实现逻辑
}

然后使用Scaffold，参数实现一个bottomBar就可以了：

Scaffold(bottomBar = {BottomTab()}) {//逻辑实现}}

接下来就是使用BottomNavigation和NavHost实现底部导航的操作了。

BottomNavigation和NavHost实现底部导航

官方推荐使用BottomNavigation实现导航栏，先来看一下BottomNavigation的属性，根据自己的需求设置即可：

@Composable
fun BottomNavigation(modifier: Modifier = Modifier,backgroundColor: Color = MaterialTheme.colors.primarySurface,contentColor: Color = contentColorFor(backgroundColor),elevation: Dp = BottomNavigationDefaults.Elevation,content: @Composable RowScope.() -> Unit
)

在正式使用之前我们还需要设置一些变量，比如底部菜单的文字，选中和未选中的图片资源：

private val tabs = arrayOf("首页","项目","分类","我的")
private val defImg = arrayOf(R.drawable.home_unselected,R.drawable.project_unselected,R.drawable.classic_unselected,R.drawable.mine_unselected)
private val selectImg = arrayOf(R.drawable.home_selected,R.drawable.project_selected,R.drawable.classic_selected,R.drawable.mine_selected)

然后将BottomTab的方法补齐，如下：

@Composable
fun BottomTab(navController:NavController,viewModel: BottomTabBarViewModel,labels:Array<String>,selectImages:Array<Int>,defImages:Array<Int>){BottomNavigation(backgroundColor = Color.White, elevation = 6.dp,modifier = Modifier.navigationBarsPadding()//要设置这个属性，不然你会发现你的底部导航栏不见了) {for (i in labels.indices) {BottomNavigationItem(selected = viewModel.bottomBarIndex == i, onClick = {viewModel.bottomBarIndex = inavController.navigate(labels[i])}, icon = {Image(painter = painterResource(id = if (viewModel.bottomBarIndex == i) selectImages[i] else defImages[i]),contentDescription = labels[i],modifier = Modifier.size(25.dp))}, label = {Text(text = labels[i], color = if (viewModel.bottomBarIndex == i) Color(114,160,240) else Color.Gray)})}}
}

参数分析：

1.navController 导航控制器，主要用于设置NavHost的路由，代码里面表现为navController.navigate(labels[i])
2.labels 文字资源集合
3.selectImages 选中图片集合
4.defImages 未选中图片集合
5.modifier = Modifier.navigationBarsPadding 应用与内容底部边缘的导航栏高度相匹配的附加空间，以及与相应开始边缘和结束边缘上的导航栏宽度相匹配的附加空间。简单来说就是不设置该属性你的导航栏会被挤出屏幕外。

BottomNavigationItem

底部导航栏的item，和Recyclerview的item差不多，这里通过for循环去添加，一共四个item

for (i in labels.indices) {BottomNavigationIte(){}
}

参数解析:
1.selected: Boolean, 是否选中，代码表现为：selected = viewModel.bottomBarIndex == i
2.onClick: () -> Unit 点击事件，点击后要保存选中的下标，并且通知NavHost切换路由，代码表现为：

onClick = {viewModel.bottomBarIndex = i//保存选中下标navController.navigate(labels[i])//切换路由
}

3.icon: @Composable () -> Unit 图片资源
4.label: @Composable (() -> Unit)? = null, 文字资源

NavHost切换路由

使用NavHost切换路由，先来看一下NavHost的属性：

@Composable
public fun NavHost(navController: NavHostController,startDestination: String,modifier: Modifier = Modifier,route: String? = null,builder: NavGraphBuilder.() -> Unit
)

1.navController 导航控制器
2.startDestination 设置目的地
3.builder: NavGraphBuilder.() -> Unit 实现逻辑

看代码实现：

val navController = rememberNavController()
Scaffold(bottomBar = {BottomTab(navController = navController,viewModel = viewModel, labels = tabs, selectImages = selectImg, defImages = defImg)}) {NavHost(navController = navController, startDestination = tabs[viewModel.bottomBarIndex]){//startDestination 的值等于 tabs[0]的值切换到HomePagecomposable(tabs[0]) {HomePage(bVM = bVM)}//startDestination 的值等于 tabs[1]的值切换到ProjectPagecomposable(tabs[1]) {ProjectPage()}composable(tabs[2]) {ClassicPage(cVM = cVM)}composable(tabs[3]) {MinePage()}}
}

通过以上代码就可以实现官方推荐的导航使用方法了。

分类页面的实现

前面说的都是导航栏的使用，属于前面的内容了；进入今天的主题，分类页面的实现；从效果图可以看出分类页面主要分为两部分，左边的菜单栏和右边的内容显示栏，点击左边的菜单，右边显示对应的内容。

获取数据

在实现功能之前肯定要先获取数据，那么创建ClassicViewModel进行数据获取：

class ClassicViewModel : ViewModel() {private var _naviList = MutableLiveData(listOf<DataEntity>())val naviList:MutableLiveData<List<DataEntity>> = _naviListfun getNaviList(){NetWork.service.getNaviJson().enqueue(object : Callback<NaviEntity>{override fun onResponse(call: Call<NaviEntity>, response: Response<NaviEntity>) {response.body()?.let {_naviList.value = it.data}}override fun onFailure(call: Call<NaviEntity>, t: Throwable) {}})}val selectIndex: MutableLiveData<Int> = MutableLiveData(0)init {getNaviList()}
}

在ClassicPage页面获取到数据，并且获取选中的下标：

val naviList by cVM.naviList.observeAsState()
val selectIndex by cVM.selectIndex.observeAsState(0)
左边布局的实现

因为左边布局比较简单，就一个列表然后设置选中和未选中的样式，这里就不做过多的赘述了，直接贴代码：

@Composable
private fun ClassicLeftList(naviList: List<DataEntity>,selectIndex: Int,clickCallBack:((Int)->Unit)){LazyColumn{itemsIndexed(naviList){ index: Int, item: DataEntity ->Box(modifier = Modifier.width(120.dp).background(if (index == selectIndex) Color(150,180,233) else ComposeUIDemoTheme.colors.listItem).height(48.dp).clickable {clickCallBack.invoke(index)}) {ClassicLeftItem(title = naviList[index].name,index = index, selectIndex = selectIndex)}}}
}
@Composable
private fun ClassicLeftItem(title:String,index:Int,selectIndex:Int){Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.height(48.dp)) {Text(text = title,modifier = Modifier.fillMaxWidth(),fontSize = 12.sp,color = if (index == selectIndex) Color(248,249,249) else ComposeUIDemoTheme.colors.icon,textAlign = TextAlign.Center)}
}
右边布局的实现

从图中可以看到，右边不是列表，而是一个流式布局，但是要内容总有超出屏幕显示区域的时候，所以这里先设置一下右边布局的基本属性：

@Composable
private fun ClassicRightList(dataList:List<Article>){//verticalScroll(rememberScrollState()设置内容可以上下滑动Column(modifier = Modifier.padding(16.dp,0.dp,0.dp,0.dp).fillMaxSize().background(color = Color.White).verticalScroll(rememberScrollState())) {ClassicRightLayout{for (index in dataList.indices) {Child(text = dataList[index].title)}}}
}
@Composable
private fun Child(modifier: Modifier = Modifier, text: String) {Card(modifier = modifier,border = BorderStroke(color = Color.Black, width = Dp.Hairline),shape = RoundedCornerShape(8.dp)) {Row(modifier = Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp),verticalAlignment = Alignment.CenterVertically) {Spacer(Modifier.width(4.dp))Text(text = text)}}
}
填充ClassicPage内容

通过Row来填充页面内容

@Composable
fun ClassicPage(cVM:ClassicViewModel){val naviList by cVM.naviList.observeAsState()val selectIndex by cVM.selectIndex.observeAsState(0)Column(Modifier.fillMaxWidth()) {DemoTopBar(title = "分类")Row(modifier = Modifier.fillMaxSize()) {if (naviList != null && naviList?.size !== 0){ClassicLeftList(naviList = naviList!!,selectIndex){cVM.selectIndex.value = it}Box(modifier = Modifier.fillMaxHeight().width(10.dp).background(color = Color(234,233,234))) {}ClassicRightList(dataList = naviList!![selectIndex].articles)}}}
}

Compose自定义布局实现流式布局

Compose的自定义view和Android传统的自定义view步骤差不多，一般分为以下几个步骤：

  1. 获取父view的总宽度
  2. 测量每一个子view所占用的宽度
  3. 根据不同需求摆放子view的位置

在Compose使用Layout来测量和布置子view，如下：

fun ClassicRightLayout(modifier: Modifier = Modifier,content: @Composable () -> Unit
) {Layout(modifier = modifier,content = content) { measurables, constraints ->}
}

参数解析：

  1. measurables 需要测量的子项列表
  2. constraints 父布局的约束条件
遍历所有子项，测量宽高
//获取父控件最大宽度
val parentWidth = constraints.maxWidth//当前行宽(超出屏幕要换行)
var lineWidth = 0
//当前行高
var lineHeight = 0
//总高度(每换行一次记录一次)
var totalHeight = 0
//所有可放置的内容
val placeableList = mutableListOf<MutableList<Placeable>>()
//每行的最高高度
val mLineHeight = mutableListOf<Int>()
//每行放置的内容
var lineViews = mutableListOf<Placeable>()/**
* 需要测量的子项 测量子View，获取FlowLayout的宽高
* 遍历子项测量宽高
* */
measurables.mapIndexed { i, measurable ->// 测量子viewval placeable = measurable.measure(constraints)// 设置子view宽高val childWidth = placeable.widthval childHeight = placeable.height//如果当前行宽度超出父Layout则换行if (lineWidth + childWidth > parentWidth) {mLineHeight.add(lineHeight)//添加行高placeableList.add(lineViews)//将当前子布局放到所有的内容集合里面去//将当前行的子view清空，然后换行添加新的viewlineViews = mutableListOf()lineViews.add(placeable)//记录总高度totalHeight += lineHeight//重置行高与行宽lineWidth = childWidthlineHeight = childHeighttotalHeight += 10.dp.toPx().toInt()} else {//记录每行宽度lineWidth += childWidth + if (i == 0) 0 else 10.dp.toPx().toInt()//记录每行最大高度lineHeight = maxOf(lineHeight, childHeight)//将当前子view添加到当前行内容里面去lineViews.add(placeable)}
}
定位子项
layout(parentWidth, totalHeight) {//从左上角开始定位 top 0  left 0var topOffset = 0var leftOffset = 0//循环定位for (i in placeableList.indices) {lineViews = placeableList[i]lineHeight = mLineHeight[i]for (j in lineViews.indices) {val child = lineViews[j]val childWidth = child.widthval childHeight = child.height// 根据Gravity获取子项y坐标val childTop = topOffset + (lineHeight - childHeight) / 2child.placeRelative(leftOffset, childTop)// 更新子项x坐标leftOffset += childWidth + 10.dp.toPx().toInt()}//重置子项x坐标leftOffset = 0//子项y坐标更新topOffset += lineHeight + 10.dp.toPx().toInt()}
}

以上代码就是本章的全部内容了~

源码地址

源码戳~

这篇关于Android compose wanandroid app之分类页面的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

使用Python和OpenCV库实现实时颜色识别系统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》：本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色（红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解
阅读更多...
PostgreSQL中MVCC 机制的实现

PostgreSQL中MVCC 机制的实现

《PostgreSQL中MVCC机制的实现》本文主要介绍了PostgreSQL中MVCC机制的实现,通过多版本数据存储、快照隔离和事务ID管理实现高并发读写,具有一定的参考价值,感兴趣的可以了解一下... 目录一 MVCC 基本原理python1.1 MVCC 核心概念1.2 与传统锁机制对比二 Postg
阅读更多...
SpringBoot整合Flowable实现工作流的详细流程

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4
阅读更多...
C++中零拷贝的多种实现方式

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri
阅读更多...
C++高效内存池实现减少动态分配开销的解决方案

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现：TCMalloc与Jemalloc1. TCM
阅读更多...
OpenCV实现实时颜色检测的示例

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间
阅读更多...
Python实现精准提取 PDF中的文本,表格与图片

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容：获取整页文本与指定区域内容获取页面上的所有文本内容获取
阅读更多...
基于Python实现一个Windows Tree命令工具

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一：创建批处理文件并添加到PATH1
阅读更多...
Java使用HttpClient实现图片下载与本地保存功能

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.
阅读更多...
canal实现mysql数据同步的详细过程

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》：本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2