【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。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
基本知识点

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入，读取速度会加快（但是在字符串的题里面和容易出现问题） 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器，指向键值>= key的第一个元素。 iterator upper_bou
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...
android-opencv-jni

android-opencv-jni

//------------------start opencv--------------------@Override public void onResume(){ super.onResume(); //通过OpenCV引擎服务加载并初始化OpenCV类库，所谓OpenCV引擎服务即是 //OpenCV_2.4.3.2_Manager_2.4_*.apk程序包，存
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
android应用中res目录说明

android应用中res目录说明

Android应用的res目录是一个特殊的项目，该项目里存放了Android应用所用的全部资源，包括图片、字符串、颜色、尺寸、样式等，类似于web开发中的public目录，js、css、image、style。。。。 Android按照约定，将不同的资源放在不同的文件夹中，这样可以方便的让AAPT(即Android Asset Packaging Tool , 在SDK的build-tools目
阅读更多...
Android fill_parent、match_parent、wrap_content三者的作用及区别

Android fill_parent、match_parent、wrap_content三者的作用及区别

这三个属性都是用来适应视图的水平或者垂直大小，以视图的内容或尺寸为基础的布局，比精确的指定视图的范围更加方便。 1、fill_parent 设置一个视图的布局为fill_parent将强制性的使视图扩展至它父元素的大小 2、match_parent 和fill_parent一样，从字面上的意思match_parent更贴切一些，于是从2.2开始，两个属性都可以使用，但2.3版本以后的建议使
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2