Android应用开发 00：Jetpack Compose学习 生日贺卡 图片 Compose象限 名片

最新推荐文章于 2023-08-23 10:29:54 发布
最新推荐文章于 2023-08-23 10:29:54 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： android学习之路 文章标签： android 学习 kotlin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShowMeTheCod3/article/details/126710686
版权

写一张生日贺卡

在这里插入图片描述

代码实现

package com.example.greetingcard

import android.media.Image
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.tooling.preview.Preview
import com.example.greetingcard.ui.theme.GreetingCardTheme
import androidx.compose.ui.unit.dp
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.Role.Companion.Image
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GreetingCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Happy Birthday, Tony!",
                        "- from Alice")
                }
            }
        }
    }
}

@Composable
fun Greeting(message: String, from: String) {
    Column {
        Text(
            text = message,
            fontSize = 36.sp,
            modifier = Modifier.fillMaxWidth()
                .wrapContentWidth(Alignment.CenterHorizontally)
                .padding(16.dp)
        )
        Text(
            text = from,
            fontSize = 24.sp,
            modifier = Modifier.fillMaxWidth()
                .wrapContentWidth(Alignment.CenterHorizontally)
        )
    }
}

@Composable
fun GreetingWithImage(message: String, from: String) {
    val image = painterResource(id = R.drawable.androidparty)
    // Greeting(message = message, from = from)
    Box {
        Image(
            painter = image,
            contentDescription = null,
            modifier = Modifier.fillMaxHeight()
                .fillMaxWidth(),
            contentScale = ContentScale.Crop
        )
        Greeting(message = message, from = from)
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingCardPreview() {
    GreetingCardTheme {
        GreetingWithImage(
                    stringResource(R.string.happy_birthday_text),
            stringResource(R.string.signature_text)
                    )
    }
}

写一个任务管理器（图片）

在这里插入图片描述

代码实现

package com.example.taskmanager

import android.graphics.Picture
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.modifier.modifierLocalConsumer
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.taskmanager.ui.theme.TaskManagerTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TaskManagerTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Show()
                }
            }
        }
    }
}

@Composable
fun TaskCompleteImage() {
    val image = painterResource(id = R.drawable.ic_task_completed)
    Image(painter = image,
        contentDescription = null
        )
}

@Composable
fun Show() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        TaskCompleteImage()
        Text(
            text = stringResource(R.string.task_complete),
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(top = 24.dp, bottom = 8.dp)
        )
        Text(
            text = stringResource(R.string.nice_work),
            fontSize = 16.sp
        )
    }
}

@Preview(showBackground = true,
showSystemUi = true)
@Composable
fun DefaultPreview() {
    TaskManagerTheme {
        Show()
    }
}

Compose象限（练习weight）

在这里插入图片描述

代码实现

package com.example.composequadrant

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeQuadrantTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ComposeQuadrant()
                }
            }
        }
    }
}

@Composable
fun TextFunc(text1: String, text2: String) {
    Text(text = text1,
        fontWeight = FontWeight.Bold,
        modifier = Modifier.padding(bottom = 16.dp)
    )
    Text(text = text2)
}

@Composable
fun ComposeQuadrant() {
    Column(
        modifier = Modifier.fillMaxSize()
            ) {
        Row(
            modifier = Modifier.weight(weight = 1f, fill = true)
        ) {
            Column(
                modifier = Modifier
                    .weight(1f, fill = true)
                    .fillMaxHeight()
                    .background(color = Color.Green)
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                Text(text = "Text composable",
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(text = "Displays text and follows Material Design guidelines.",
                    textAlign = TextAlign.Justify)
            }
            Column(
                modifier = Modifier
                    .weight(1f, fill = true)
                    .fillMaxHeight()
                    .background(color = Color.Yellow)
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                Text(text = "Image composable",
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(text = "Creates a composable that lays out and draws a given Painter class object.",
                    textAlign = TextAlign.Justify)
            }
        }
        Row(
            modifier = Modifier
                .weight(weight = 1f, fill = true)
                .background(color = Color.Red)
        ) {
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .weight(1f)
                    .background(color = Color.Cyan)
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                Text(text = "Row composable",
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(text = "A layout composable that places its children in a horizontal sequence.",
                    textAlign = TextAlign.Justify)
            }
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .weight(1f)
                    .background(color = Color.LightGray)
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                Text(text = "Column composable",
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Text(text = "A layout composable that places its children in a vertical sequence.",
                    textAlign = TextAlign.Justify)
            }
        }
    }
}

@Preview(showBackground = true,
showSystemUi = true)
@Composable
fun DefaultPreview() {
    ComposeQuadrantTheme {
        ComposeQuadrant()
    }
}

个人名片

在这里插入图片描述

代码实现

package com.example.mybusinesscard

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Email
import androidx.compose.material.icons.outlined.Phone
import androidx.compose.material.icons.outlined.Star
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.modifier.modifierLocalConsumer
import androidx.compose.ui.modifier.modifierLocalOf
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.mybusinesscard.ui.theme.MyBusinessCardTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyBusinessCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Show()
                }
            }
        }
    }
}

@Composable
fun Topic() {
    Image(
        painter = painterResource(
            id = R.drawable._645857859942
        ),
        contentDescription = null,
        modifier = Modifier.size(100.dp, 160.dp)
    )
    Text(
        text = "Tony Wei",
        fontWeight = FontWeight.Bold,
        fontSize = 40.sp
    )
    Text(
        text = "Android Primary Engineer"
    )
}

@Composable
fun Information() {
    Row(
        modifier = Modifier.fillMaxWidth(),
    ) {
        Spacer(modifier = Modifier.width(35.dp))
        Icon(
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .size(50.dp, 50.dp),
            imageVector = Icons.Outlined.Phone,
            contentDescription = null,
            tint = Color.Blue
        )
        Spacer(modifier = Modifier.width(40.dp))
        Text(
            text = "+86 18390856237",
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp,
            modifier = Modifier.align(Alignment.CenterVertically)
        )
    }
    Row(
        modifier = Modifier.fillMaxWidth(),
    ) {
        Spacer(modifier = Modifier.width(35.dp))
        Icon(
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .size(50.dp, 50.dp),
            imageVector = Icons.Outlined.Star,
            contentDescription = null,
            tint = Color.Blue
        )
        Spacer(modifier = Modifier.width(40.dp))
        Text(
            text = "@ShowM3theCode",
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp,
            modifier = Modifier.align(Alignment.CenterVertically)
        )
    }
    Row(
        modifier = Modifier.fillMaxWidth()
            .padding(bottom = 28.dp),
    ) {
        Spacer(modifier = Modifier.width(35.dp))
        Icon(
            modifier = Modifier
                .align(Alignment.CenterVertically)
                .size(50.dp, 50.dp),
            imageVector = Icons.Outlined.Email,
            contentDescription = null,
            tint = Color.Blue
        )
        Spacer(modifier = Modifier.width(40.dp))
        Text(
            text = "2643484090@qq.com",
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp,
            modifier = Modifier.align(Alignment.CenterVertically)
        )
    }
}

@Composable
fun Show() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 16.dp, end = 16.dp)
    ) {
        Topic()
    }
    Column(
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 16.dp, end = 16.dp)
    ) {
        Information()
    }
}

@Preview(showBackground = true,
showSystemUi = true)
@Composable
fun DefaultPreview() {
    MyBusinessCardTheme {
        Show()
    }
}
ShowM3TheCode
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jetpack Compose
猿猿袁
12-02 3047
Jetpack Compose：声明式UI框架 (Composition over inheritance) 组合优于继承 1. 什么是Compose，有什么优势？ Jetpack Compose 是一个现代工具包，旨在简化UI开发。它结合了反应式编程模型和Kotlin编程语言的简洁性和易用性。它是完全声明性的，Compose的口号就是消灭xml，在撸过代码之后总结总体上UI的结构和Flutte...
jetpack compose —— Card
江小白的博客
06-13 1270
最后，Card 是 Jetpack Compose 中常用的组件之一，提供了简单而强大的方式来呈现卡片式的用户界面。在这个示例中，我们在 Card 的 Modifier 中使用了 Modifier.clickable() 函数，并传递一个点击事件处理函数作为参数。它提供了一个容器，可以将其他组件包裹在其中，同时为这些组件提供背景、边框和阴影效果，使界面看起来更加吸引人。在这个示例中，我们在外层 Card 中嵌套了一个 Column 和一个内层 Card，形成了更复杂的卡片布局。一、什么是 Card 组件。
使用Jetpack Compose构建可折叠Card
最新发布
虎哥LoveDroid
08-23 756
扩展卡片在Android应用开发中广受欢迎，它们可以让开发者打造干净紧凑的用户界面，同时可以轻松展开，显示额外的内容。通过巧妙地使用扩展卡片，开发者可以为用户提供流畅、直观的体验，用户可以在无需切换到新屏幕或环境的情况下访问更详细的信息。这在移动应用中特别有用，因为屏幕空间有限，用户通常处于快速移动中。通过采用扩展卡片呈现信息，开发者可以减少点击和滑动次数，从而提升用户体验。扩展卡片是增强用户体验、使应用脱颖而出的绝佳方式。这只是展开式卡片在Android应用开发中的几个应用示例。
Jetpack Compose
mxiaomi的专栏
01-06 1466
Jetpack Compose概览为什么使用ComposeCompose编程思想可组合函数可以按任何顺序执行重组会跳过尽可能多的内容布局、控件布局主题列表文字图形动画手势 概览 Jetpack Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发，帮助您使用更少的代码、强大的工具和直观的 Kotlin API，快速打造生动而精彩的应用。 为什么使用Compose 更少的代码 编写代码只需要采用 Kotlin，而不必拆分成 Kotlin 和 XML 部
PCard:演示项目，展示使用JetPack Compose添加支付卡详细信息
03-25
PCard 添加使用JetPack Compose制作的支付卡屏幕 觉得这个资料库有用吗？ :red_heart: 通过加入此存储库的来支持它。 :star: 我进行下一个创作！ :star-struck: 执照 Designed and developed by 2021 elbehiry Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
JetpackComposePlayground:Jetpack Compose应用程序学习基础知识
03-20
Jetpack Compose是Google推出的一款用于构建Android用户界面的新工具，它采用声明式编程方式，让UI开发变得更加简洁、高效。在这个名为"JetpackComposePlayground"的应用程序中，我们将深入学习Jetpack Compose的...
CoffeeDrinksWithJetpackCompose:Jetpack Compose上的Coffee Drinks Android应用程序
04-15
Coffee Drinks是一个Android应用程序，旨在与Jetpack Compose框架一起使用。 浅色调色板 深色调色板 文章 特征 展示咖啡饮料清单 用户可以将咖啡饮料标记/取消标记为收藏 用户可以阅读有关每种咖啡饮料的信息 用户...
compose-icons:Jetpack Compose的开源图标包
03-28
Compose图标是一包库，提供了可在Jetpack Compose Multiplatform中使用的众所周知的Icon Pack。 库的使用受到“构成材料图标”的启发。 撰写版本 Jetpack撰写（Android）： 1.0.0-beta01 Jetbrains组成（桌面）： ...
JetExample:Jetpack Compose UI组件示例
05-08
即可编译并在屏幕上查看示例专案JetPoll（WIP） :construction_worker: JetPoll是一个由Firebase和Jetpack Compose制作，创建，共享和投票的民意测验的交互式民意测验应用程序。 为了运行JetPoll，请记住创建一个...
Compose-Tutorial:Jetpack Compose中文文档介绍，持续更新
04-04
此项目致力于帮助大家更好的理解和使用Jetpack Compose框架，从而提高开发效率 项目会包含很多关于Jetpack Compose的基本使用方法以及注意事项 我们在github page上创建了专门的教程和指导链接，欢迎访问 :backhand_...
2017Google Study Jams之L1Android Studio的安装与生日贺卡的实现
Shawpoo的专栏
03-19 1086
此次活动的举办方：Google Study Jams活动官网我的博客（同步此次活动笔记）：CSDN博客、我的简书 通过前面对View和ViewGroup的认识，相信你对基本的控件（TextView， ImageView， Button等）和简单的布局（LinearLayout，RelativeLayout）有了一定了解，此时此刻你一定也想自己动手敲一下，敲出自己的第一行代码，运行出自己的第一个程序
Jetpack Compose 学习指南
qxf865618770的博客
06-06 793
通过这个完整的教程，我们将学习如何使用 Text、TextField、Preview、Column、Row、Button、Card、AlertDialog、MaterialDesign 元素等。因此，事不宜迟，让我们开始创建一个 Jetpack Compose 项目。因此，本教程是关于通过示例学习适用于 Android 的 Jetpack Compose。GitHub地址...
安卓开发：使用Compose开发象限demo
yinge0508的博客
04-20 264
Jetpack Compose 是一款全新的 Android UI 工具包，它采用了声明式编程模型，可以让开发者更加高效地构建漂亮的用户界面。Jetpack Compose 还提供了一系列的组件和布局，可以帮助开发者快速构建复杂的 UI 界面。同时，Jetpack Compose 还支持动态主题、动画效果、手势交互等功能，可以让应用程序更加生动、丰富。总之，Jetpack Compose 是一款非常有前途的 Android UI 工具包，值得开发者们深入学习和使用。
Android Compose日期选择器
fanketly的博客
12-18 2654
由于官方还没有推出日期选择器，我们只能自己制作，或者通过AndoirdView和DatePickerDialog。 下面是我自己制作的一个Compose日期选择器，以下都只能用作学习，还达不到项目使用需要的效果。 将JitPack存储库添加到您的构建文件中(项目根目录下build.gradle文件) allprojects { repositories { … maven { url ‘https://jitpack.io’ } } } 添加依赖项 dependencies { implementation
android纪念日源码,分享超炫的表白页面和爱的纪念日源码
weixin_35045323的博客
05-29 1159
预览地址：是别人的源码，直接贴上作者说明：一、超炫表白页面：作者原话：为了预热情人节，麦葱二次开发了个表白程序。程序放在BAE上面，因为本地写这个原因，生成的页面过段时间就找不到了，导致链接页面404，麦葱在此表示歉意。今天麦葱把这款程序分享出来，如果你需要，可以拿去使用。①、模版文件说明：12345678910111213141516171819202122/2014/css/css/all.m...
Kotlin——jetpackCompose按钮弹出dialog、列表（类似recyclerView）、双向绑定--列表(可单选/多选)、列表选中显示边框（最简单的方式）
wy313622821的博客
12-26 6182
package com.example.jetpackcompose import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose....
Compose_08--列表LazyColumn和LazyRow
weixin_42404361的博客
11-25 3995
列表在普遍App中是一个十分重要组成部分，随处可见，而在Compose中是如何实现列表的呢？没错，就是使用LazyColumn实现纵向滚动列表，使用LazyRow实现横向滚动列表，下面是一个简单的例子。 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.backg
AndroidStudio Plugin插件开发
yidaozhiling的博客
08-28 1795
Gradle plugin
JetpackCompose从入门到实战学习笔记1—在compose中简单使用webview
u012556114的博客
11-19 757
在compose中简单使用webview
动脑学院Jetpack Compose学习笔记
07-29
动脑学院Jetpack Compose视频的学习笔记，根据公开的ppt以及代码整理

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值