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

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

前言

之前实现了底部导航栏以及滑动切换，这里根据官方推荐的底部导航栏的使用方式重新实现了底部导航栏，并实现分类页面，通过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之分类页面的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---