Compose Weekly #1: 小狗领养应用

onlyloveyd
• 阅读 1209

本文同步发表于我的微信公众号,在微信搜索 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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
onlyloveyd onlyloveyd
3年前
Compose Weekly #2:Countdown Timer
本文同步发表于我的微信公众号,在微信搜索OpenCVorAndroid即可关注。前言最近Android官方发起了JetpackCompose的推广活动:JetpackCompose开发者挑战赛。活动时间一个月,每周一题,广大开发者根据官方需求,Clone官方模板工程并使用JetpackCompose技术结题后按要求提交,即可参与活动。
onlyloveyd onlyloveyd
2年前
Compose Weekly #4:Weather App
本文同步发表于我的微信公众号,在微信搜索OpenCVorAndroid即可关注。前言It'sraining...Compose!Pulloutallthestopsforthisfinalchallenge.BuildabeautifulweatherappforachancetowinaPixel
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Stella981 Stella981
2年前
Android蓝牙连接汽车OBD设备
//设备连接public class BluetoothConnect implements Runnable {    private static final UUID CONNECT_UUID  UUID.fromString("0000110100001000800000805F9B34FB");
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这