Compose Weekly #1: 小狗领养应用

onlyloveyd 等级 547 0 0
标签: https移动端

本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。

前言

最近Android官方发起了Jetpack Compose的推广活动:Jetpack Compose开发者挑战赛。活动时间一个月,每周一题,广大开发者根据官方需求,Clone官方模板工程并使用Jetpack Compose技术结题后按要求提交,即可参与活动。上周完成了第一题,今天第二周的题目已经出来了,感兴趣的同学可以参与下。

环境

学习任何技术,首先拜读官文,无一例外。

第一周

题目:小狗领养应用

要求:包含显示小狗列表的概览画面,以及显示每只小狗具体情况的详细信息画面。

知识点:

  • 基础控件:Column、Modifier、Card、Box、Text、Icon、Image、IconButton、Spacer等
  • 控件修饰:Modifier
  • 可变状态:mutableStateOf

定义数据

// 狗狗实体
data class Dog(val name: String, val avatar: Int, val desc: String)

// 狗狗列表
object DogPool {
    val Dogs = listOf(
        Dog(getRandomString(6), getRandomAvatar(), getRandomString(100)),
        Dog(getRandomString(6), getRandomAvatar(), getRandomString(100)),
        Dog(getRandomString(6), getRandomAvatar(), getRandomString(100)),
        Dog(getRandomString(6), getRandomAvatar(), getRandomString(100)),
        Dog(getRandomString(6), getRandomAvatar(), getRandomString(100)),
        Dog(getRandomString(6), getRandomAvatar(), getRandomString(100)),
    )
}

// 狗狗头像素材
val avatars = listOf(
    R.drawable.dog_one,
    R.drawable.dog_two,
    R.drawable.dog_three,
    R.drawable.dog_four,
    R.drawable.dog_five,
    R.drawable.dog_six
)

// 随机产生狗狗头像
fun getRandomAvatar(): Int {
    return avatars[Random.nextInt(0, 5)]
}

// 随机生成固定长度字符串
fun getRandomString(length: Int): String {
    val allowedChars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"
    return (1..length)
        .map { allowedChars.random() }
        .joinToString("")
}

列表界面

使用Column展示一个纵向列表,使用Modifier调整布局元素的各种属性。

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Spacer(modifier = Modifier.size(16.dp))
    DogPool.Dogs.forEach {
        Box(Modifier.padding(8.dp)) {
            DogView(
                dog = it,
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { selectedDog = it }
            )
        }
    }
}

列表项

@Composable
fun DogView(dog: Dog, modifier: Modifier = Modifier) {
    Card(modifier, shape = RoundedCornerShape(26.dp)) {
        Box {
            Image(
                painterResource(dog.avatar),
                null,
                modifier = Modifier.fillMaxWidth(),
                contentScale = ContentScale.FillWidth
            )
            Box(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .background(
                        Brush.verticalGradient(
                            listOf(
                                Color.Transparent,
                                MaterialTheme.colors.onSurface
                            )
                        )
                    )
                    .fillMaxWidth()
                    .padding(26.dp)
            ) {
                Text(
                    text = dog.name,
                    style = MaterialTheme.typography.h5,
                    color = MaterialTheme.colors.surface
                )
            }
        }
    }
}

详情界面

@Composable
fun DogDetails(dog: Dog) {
    val context = LocalContext.current as? Activity
    val scrollState = rememberScrollState()

    // Calculate the offset of the background image to make it scroll with a parallax effect
    val imageOffset = (-scrollState.value * 0.2f).dp

    // Calculate the alpha used in the background of the back arrow
    val iconBackgroundAlpha =
        ((scrollState.value / START_TOP_PADDING.toFloat()) * 0.2f).coerceAtMost(0.2f)

    Box {
        Image(
            painter = painterResource(id = dog.avatar),
            contentDescription = null,
            contentScale = ContentScale.FillWidth,
            modifier = Modifier
                .offset(y = imageOffset)
                .height(200.dp)
                .fillMaxWidth()
        )

        Column(
            Modifier
                .verticalScroll(scrollState)
                .padding(top = START_TOP_PADDING.dp)
                .background(
                    MaterialTheme.colors.surface,
                    RoundedCornerShape(topStart = 3.dp, topEnd = 20.dp)
                )
                .fillMaxHeight()
                .fillMaxWidth()
                .padding(all = 32.dp)
        ) {
            Text("Hello I Am", style = MaterialTheme.typography.h6)
            Spacer(Modifier.size(10.dp))
            Text(text = dog.name, style = MaterialTheme.typography.h3)
            Spacer(Modifier.size(16.dp))
            Spacer(modifier = Modifier.size(16.dp))
            Text(text = dog.desc)
        }

        IconButton(
            onClick = { context?.onBackPressed() },
            modifier = Modifier
                .padding(8.dp)
                .background(Color.Black.copy(alpha = iconBackgroundAlpha), shape = CircleShape)
        ) {
            Icon(
                painter = painterResource(id = R.drawable.ic_arrow_back),
                contentDescription = null,
                modifier = Modifier
                    .size(32.dp),
                tint = Color.White
            )
        }
    }
}

代码检查

./gradlew app:spotlessApply

针对Wildcard import错误,进行如下配置后删除对应以*号形式引入的包,重新执行引入操作。

Compose Weekly #1: 小狗领养应用

效果

Compose Weekly #1: 小狗领养应用

Compose Weekly #1: 小狗领养应用

源码

https://github.com/onlyloveyd/Jetpack-Compose-Dog

收藏
评论区

相关推荐

从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统(https://juejin.im
写C端,如何优雅的处理多个弹框的显示?(附带源码)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
Redux系列之分析中间件原理(附经验分享)
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。 如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
金三银四了,掌握 JS 这 36 个概念,助你一臂之力
作者:Mahdhi Rezvi 译者:前端小智 来源:dmitripavlutin 点赞再看,微信搜索【大迁世界(https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA)】,B站关注【前端小智(https://space.bilibili.com/31089477)】这个没有大厂背景,但有着
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
Compose Weekly #1: 小狗领养应用
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言 最近Android官方发起了Jetpack Compose的推广活动:Jetpack Compose开发者挑战赛。活动时间一个月,每周一题,广大开发者根据官方需求,Clone官方模板工程并使用Jetpack Compose技术结题后按要求提交,即可参与活动。
Compose Weekly #2:Countdown Timer
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言 最近Android官方发起了Jetpack Compose的推广活动:Jetpack Compose开发者挑战赛。活动时间一个月,每周一题,广大开发者根据官方需求,Clone官方模板工程并使用Jetpack Compose技术结题后按要求提交,即可参与活动。
7个关于"this"面试题,你能回答上来吗?
作者:Shadeed 译者:前端小智 来源:dmitripavlutin 点赞再看,微信搜索【大迁世界(https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA)】,B站关注【前端小智(https://space.bilibili.com/31089477)】这个没有大厂背景,但有着一股向上积
Compose Weekly #3:Bloom
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言第三周挑战赛是速度比拼,按照官方发出的设计图最快完成且符合所有设计规范者胜出。不仅要做得快,还要做得好,奖品自然不会少。这一期的奖品是:Google Pixel 5。深知干不过业界大佬们,花个半天纯当练手完成题目。 设计图 设计风格 界面导航 界面标注 完整设计图:
Compose Weekly #4:Weather App
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言 It's raining... Compose! Pull out all the stops for this final challenge. Build a beautiful weather app for a chance to win a Pixel
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
SpringCloud升级之路2020.0.x版-21.Spring Cloud LoadBalancer简介
本系列代码地址:https://github.com/HashZhang/springcloudscaffold/tree/master/springcloudiiford我们使用 Spring Cloud 官方推荐的 Spring Cloud LoadBalancer 作为我们的客户端负载均衡器。 Spring Cloud LoadBalancer背景Sp
appium+python+mumu模拟器的安装教程window
windows 版本 Appium 环境搭建1、安装 nodejs下载.msi文件https://nodejs.org/en/download/注意:1、下载12.版本双击安装即可。2、无须配置环境变量,直接重启一个 cmd 输入下面的命令,能够查看这两个版本号即安装成功。2、安装 appium desktop直接官网下载 Appium 客户端版本安装即可。