【Android-JetpackCompose】10、基于 Compose 基本布局的健身 App

2023-10-22 04:20
文章标签 android 布局 app 基本 compose 健身 jetpackcompose

本文主要是介绍【Android-JetpackCompose】10、基于 Compose 基本布局的健身 App，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、新建项目
  • 二、搜索栏
  • 三、Align 对齐
  • 四、设置 Surface
  • 五、横向列表
  • 六、实现 LazyHorizontalGrid
  • 七、首页的槽位 API
  • 八、主屏幕的滚动
  • 九、底部导航栏
  • 十、整体 App 集成

一、新建项目

通过 git clone https://github.com/googlecodelabs/android-compose-codelabs 克隆代码，打开 BasicLayoutCodelab 项目，首先，布局分为上下两部分：

在这里插入图片描述

其次，上半部分又细分为如下三个模块：

在这里插入图片描述

最细粒度的是如下2个元素，都可水平滚动：
在这里插入图片描述
在这里插入图片描述

二、搜索栏

// Step: Search bar - Modifiers
@Composable
fun SearchBar(modifier: Modifier = Modifier
) {TextField(value = "",onValueChange = {},leadingIcon = {Icon(imageVector = Icons.Default.Search,contentDescription = null,)},colors = TextFieldDefaults.textFieldColors(backgroundColor = MaterialTheme.colors.surface),placeholder = {Text(stringResource(R.string.placeholder_search))},modifier = modifier.fillMaxWidth().heightIn(min = 56.dp))
}

效果如下：

在这里插入图片描述

三、Align 对齐

接下来，您要实现的可组合项是“Align your body”元素。我们来看看该元素的设计，包括它旁边的红线设计：

  • 图片高度应为 88dp。
  • 文本基线与图片之间的间距应为 24dp。
  • 基线与元素底部的间距应为 8dp。
  • 文本的排版样式应为 H3。

在这里插入图片描述

代码实现如下：

@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
@Composable
fun AlignYourBodyElementPreview() {MySootheTheme {AlignYourBodyElement(drawable = R.drawable.ab1_inversions,text = R.string.ab1_inversions,modifier = Modifier.padding(8.dp),)}
}// Step: Align your body - Alignment
@Composable
fun AlignYourBodyElement(@DrawableRes drawable: Int,@StringRes text: Int,modifier: Modifier = Modifier
) {Column(modifier = modifier,horizontalAlignment = Alignment.CenterHorizontally) {Image(painter = painterResource(drawable),contentDescription = null,contentScale = ContentScale.Crop,modifier = Modifier.size(88.dp).clip(CircleShape))Text(text = stringResource(text),style = MaterialTheme.typography.h3,modifier = Modifier.paddingFromBaseline(top = 24.dp, bottom = 8.dp))}
}

预览效果如下：

在这里插入图片描述

四、设置 Surface

接下来，设计矩形卡片，效果图如下：

在这里插入图片描述

代码如下：

// Step: Favorite collection card - Material Surface
@Composable
fun FavoriteCollectionCard(modifier: Modifier = Modifier
) {Surface(shape = MaterialTheme.shapes.small, modifier = modifier) {Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.width(192.dp)) {Image(painter = painterResource(R.drawable.fc2_nature_meditations),contentDescription = null,contentScale = ContentScale.Crop,modifier = Modifier.size(56.dp))Text(text = stringResource(R.string.fc2_nature_meditations),style = MaterialTheme.typography.h3,modifier = Modifier.padding(horizontal = 16.dp))}}
}

预览效果如下：

在这里插入图片描述

五、横向列表

现在已经创建了屏幕上显示的基本可组合项，接下来可以实现横向列表了，布局如下：

在这里插入图片描述

每个网格是 8dp，所以第一项和最后一项距边缘为 16dp，各图之间为 8dp，代码如下：

// Step: Align your body row - Arrangements
@Composable
fun AlignYourBodyRow(modifier: Modifier = Modifier
) {LazyRow(horizontalArrangement = Arrangement.spacedBy(8.dp),contentPadding = PaddingValues(horizontal = 16.dp),modifier = modifier) {items(alignYourBodyData) { item ->AlignYourBodyElement(item.drawable, item.text)}}
}

预览后，效果如下：

在这里插入图片描述

六、实现 LazyHorizontalGrid

接下来要实现的是 Grid，而不是上文的 Row。

// Step: Favorite collections grid - LazyGrid
@Composable
fun FavoriteCollectionsGrid(modifier: Modifier = Modifier
) {LazyHorizontalGrid(rows = GridCells.Fixed(2),contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),horizontalArrangement = Arrangement.spacedBy(8.dp),verticalArrangement = Arrangement.spacedBy(8.dp),modifier = modifier.height(120.dp)) {items(favoriteCollectionsData) { item ->FavoriteCollectionCard(drawable = item.drawable,text = item.text,modifier = Modifier.height(56.dp))}}
}// Step: Favorite collection card - Material Surface
@Composable
fun FavoriteCollectionCard(modifier: Modifier = Modifier,@DrawableRes drawable: Int,@StringRes text: Int
) {Surface(shape = MaterialTheme.shapes.small, modifier = modifier) {Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.width(192.dp)) {Image(painter = painterResource(drawable),contentDescription = null,contentScale = ContentScale.Crop,modifier = Modifier.size(56.dp))Text(text = stringResource(text),style = MaterialTheme.typography.h3,modifier = Modifier.padding(horizontal = 16.dp))}}
}

预览后，效果如下：

在这里插入图片描述

七、首页的槽位 API

在 MySoothe 主屏幕中，有多个版块都遵循同一模式。每个版块都有一个标题，其中包含的内容因版块而异。我们想要实现的设计如下所示：
在这里插入图片描述

因为每个板块，都有一个标题，一个槽位。标题包含一些与其相关的间距和样式信息。可以使用不同的内容动态填充槽位，具体取决于版块。如需实现这个灵活的版块容器，可以用槽位 API，代码如下：

// Step: Home section - Slot APIs
@Composable
fun HomeSection(@StringRes title: Int,modifier: Modifier = Modifier,content: @Composable () -> Unit,
) {Column(modifier) {Text(stringResource(title))content()}
}@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
@Composable
fun HomeSectionPreview() {MySootheTheme {HomeSection(R.string.align_your_body) {AlignYourBodyRow()}}
}

效果如下：

在这里插入图片描述

八、主屏幕的滚动

现在，已经创建了所有单独的构建块，接下来可以将它们组合成一个全屏实现了，效果如下：

在这里插入图片描述

代码如下：

@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
@Composable
fun BottomNavigationPreview() {MySootheTheme { SootheBottomNavigation(Modifier.padding(top = 24.dp)) }
}// Step: Home screen - Scrolling
@Composable
fun HomeScreen(modifier: Modifier = Modifier) {Column(modifier.verticalScroll(rememberScrollState()).padding(vertical = 16.dp)) {SearchBar(Modifier.padding(horizontal = 16.dp))HomeSection(title = R.string.align_your_body) {AlignYourBodyRow()}HomeSection(title = R.string.favorite_collections) {FavoriteCollectionsGrid()}}
}

效果如下：

在这里插入图片描述

九、底部导航栏

// Step: Bottom navigation - Material
@Composable
private fun SootheBottomNavigation(modifier: Modifier = Modifier) {BottomNavigation(modifier, backgroundColor = MaterialTheme.colors.background) {BottomNavigationItem(icon = {Icon(imageVector = Icons.Default.Spa,contentDescription = null,)},label = {Text(stringResource(R.string.bottom_navigation_home))},selected = true,onClick = {})BottomNavigationItem(icon = {Icon(imageVector = Icons.Default.AccountCircle, contentDescription = null)},label = {Text(stringResource(R.string.bottom_navigation_profile))},selected = false,onClick = {})}
}

效果如下：

在这里插入图片描述

十、整体 App 集成

// Step: MySoothe App - Scaffold
@Composable
fun MySootheApp() {MySootheTheme {Scaffold(bottomBar = { SootheBottomNavigation() }) { padding ->HomeScreen(Modifier.padding(padding))}}
}

整体 App 效果如下：

在这里插入图片描述

这篇关于【Android-JetpackCompose】10、基于 Compose 基本布局的健身 App的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

MySQL中between and的基本用法、范围查询示例详解

MySQL中between and的基本用法、范围查询示例详解

《MySQL中betweenand的基本用法、范围查询示例详解》BETWEENAND操作符在MySQL中用于选择在两个值之间的数据,包括边界值,它支持数值和日期类型,示例展示了如何使用BETWEEN... 目录一、between and语法二、使用示例2.1、betwphpeen and数值查询2.2、be
阅读更多...
Android使用java实现网络连通性检查详解

Android使用java实现网络连通性检查详解

《Android使用java实现网络连通性检查详解》这篇文章主要为大家详细介绍了Android使用java实现网络连通性检查的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录NetCheck.Java（可直接拷贝）使用示例（Activity/Fragment 内）权限要求
阅读更多...
MySQL基本表查询操作汇总之单表查询+多表操作大全

MySQL基本表查询操作汇总之单表查询+多表操作大全

《MySQL基本表查询操作汇总之单表查询+多表操作大全》本文全面介绍了MySQL单表查询与多表操作的关键技术,包括基本语法、高级查询、表别名使用、多表连接及子查询等,并提供了丰富的实例,感兴趣的朋友跟... 目录一、单表查询整合（一）通用模版展示（二）举例说明（三）注意事项（四）Mapper简单举例简单查询
阅读更多...
2025最新版Android Studio安装及组件配置教程(SDK、JDK、Gradle)

2025最新版Android Studio安装及组件配置教程(SDK、JDK、Gradle)

《2025最新版AndroidStudio安装及组件配置教程(SDK、JDK、Gradle)》：本文主要介绍2025最新版AndroidStudio安装及组件配置(SDK、JDK、Gradle... 目录原生 android 简介Android Studio必备组件一、Android Studio安装二、A
阅读更多...
Qt实现删除布局与布局切换功能

Qt实现删除布局与布局切换功能

《Qt实现删除布局与布局切换功能》在Qt应用开发中,动态管理布局是一个常见需求,比如根据用户操作动态删除某个布局,或在不同布局间进行切换,本文将详细介绍如何实现这些功能,并通过完整示例展示具体操作,需... 目录一、Qt动态删除布局1. 布局删除的注意事项2. 动态删除布局的实现步骤示例：删除vboxLay
阅读更多...
Redis 基本数据类型和使用详解

Redis 基本数据类型和使用详解

《Redis基本数据类型和使用详解》String是Redis最基本的数据类型,一个键对应一个值,它的功能十分强大,可以存储字符串、整数、浮点数等多种数据格式,本文给大家介绍Redis基本数据类型和... 目录一、Redis 入门介绍二、Redis 的五大基本数据类型2.1 String 类型2.2 Hash
阅读更多...
uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面：本文主要介绍uni-app小程序项目中实... 目录方式一：使用<canvas>实现图片压缩（推荐，兼容性好）示例代码（小程序平台）：方式二：使用uni
阅读更多...
Java Instrumentation从概念到基本用法详解

Java Instrumentation从概念到基本用法详解

《JavaInstrumentation从概念到基本用法详解》JavaInstrumentation是java.lang.instrument包提供的API,允许开发者在类被JVM加载时对其进行修改... 目录一、什么是 Java Instrumentation主要用途二、核心概念1. Java Agent
阅读更多...
Kotlin 协程之Channel的概念和基本使用详解

Kotlin 协程之Channel的概念和基本使用详解

《Kotlin协程之Channel的概念和基本使用详解》文章介绍协程在复杂场景中使用Channel进行数据传递与控制,涵盖创建参数、缓冲策略、操作方式及异常处理,适用于持续数据流、多协程协作等,需注... 目录前言launch / async 适合的场景Channel 的概念和基本使用概念Channel 的
阅读更多...
Python函数的基本用法、返回值特性、全局变量修改及异常处理技巧

Python函数的基本用法、返回值特性、全局变量修改及异常处理技巧

《Python函数的基本用法、返回值特性、全局变量修改及异常处理技巧》本文将通过实际代码示例,深入讲解Python函数的基本用法、返回值特性、全局变量修改以及异常处理技巧,感兴趣的朋友跟随小编一起看看... 目录一、python函数定义与调用1.1 基本函数定义1.2 函数调用二、函数返回值详解2.1 有返
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2