Jetpack Compose 初体验(上)
Image
的其中一个构造函数支持以下参数,其中 painter
参数和 contentDescription
参数没有默认值,为必传参数。
这样,图片就被构造出来啦,看一下效果:
那怎么该对图片进行一些约束呢?作为一个头图,我不希望它这么哗众取宠,做图片要低调一点。
在上面,我们认识了 Modifier
,那就寻求它的帮助,让我们的图片小一些吧。
Image(
painter = painterResource(id = R.drawable.hello_world_new_black),
contentDescription = null,
modifier = Modifier
.width(126.dp)
.height(62.dp),
contentScale = ContentScale.Inside
)
借助 Modifier
将图片的高度和宽度分别进行限定。然后通过 contentScale
参数对图片的缩放方式进行约束。ContentScale.Inside
保持图片比例不变的情况下尽可能地充满父控件的体积。
把上面的 Image
放入 preview 方法,看一下效果:
现在头图就被我们拿捏得死死的,但是它还不是很好看,没脖子,加个脖子。
@Preview(showBackground = true)
@Composable
fun VerticalText() {
Column(
modifier = Modifier.padding(16.dp)
) {
Image(
painter = painterResource(id = R.drawable.hello_world_new_black),
contentDescription = null,
modifier = Modifier
.width(126.dp)
.height(62.dp),
contentScale = ContentScale.Inside
)
Spacer(modifier = Modifier.height(16.dp))
Text(“Hello World!”)
Text(“Hello Again World!”)
Text(“How old are you, World!”)
}
}
这样是不是好看多了,嗯,是的。
3.Material Design
谷歌霸霸的产品当然是支持 Material Design 的,那咱就看看。
做头图不要锋芒毕露,做图处事要圆滑一点。给头图加个圆角是个不错的想法。
在 Android 传统的 UI 编写中,圆角图片一直没有很简单的解决方案,需要通过诸如自定义 Imag **《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】** eView
的方式来实现。但是,朋友们,当你使用 Compose 框架的时候,只需要一行代码就可以圆角图片的显示!家祭无忘告乃翁。
@Preview(showBackground = true)
@Composable
fun VerticalText() {
Column(
modifier = Modifier.padding(16.dp)
) {
Image(
painter = painterResource(id = R.drawable.hello_world_new_black),
contentDescription = null,
modifier = Modifier
.width(126.dp)
.height(62.dp)
.clip(shape = RoundedCornerShape(4.dp)),
contentScale = ContentScale.Inside
)
Spacer(modifier = Modifier.height(16.dp))
Text(“Hello World!”)
Text(“Hello Again World!”)
Text(“How old are you, World!”)
}
}
这里还是通过 Modifier
来实现需求,怎么样,现在的头图是不是圆滑可爱了很多。
头图这么求上进,文字也不能落后,一篇好的文章要主次分明,错落有致。
声明 Typography
对象,然后给 Text
添加 style
属性,来控制文字的样式。
@Preview(showBackground = true)
@Composable
fun VerticalText() {
val typography = MaterialTheme.typography
Column(
modifier = Modifier.padding(16.dp)
) {
Image(
painter = painterResource(id = R.drawable.hello_world_new_black),
contentDescription = null,
modifier = Modifier
.width(126.dp)
.height(62.dp)
.clip(shape = RoundedCornerShape(4.dp)),
contentScale = ContentScale.Inside
)
Spacer(modifier = Modifier.height(16.dp))
Text(“Hello World!”, style = typography.h3)
Text(“Hello Again World!”, style = typography.body1)
Text(“How old are you, World!”, style = typography.body2)
}
}
Typography
提供如下预设属性,囊括标题、子标题、段落体、按钮等。
最终效果如下:
怎么样,是不是主次开始变得分明了?结构变得清晰了?情节展开得顺滑了?故事开始自然了?……
当然,其他的诸如最大行数、字体、对齐方式等都可以被配置。
二、主题
基本布局已经差不多啦,那么我们再来搞一些共性的东西,就像我们黄种人都有一样的肤色——散在土地里的黄,有种顽强,非常东方……
以前的 View 系统其实也有关于 theme 的定义,那些被定义的 style,在官方定义的一系列 theme 的基础上加以扩展,形成我们 app 的主题。
Compose 框架提供了 Material Design 的实现,Material Design Theme 自然也被应用到 Compose 中,Material Design Theme 包括了对颜色、文本样式和形状等属性的定义,咱们自定义这些属性后,包括 button、cards、switches 等控件都会相应的改变它们的默认样式。
1.颜色
颜色在前端开发中真的是无处不在了,Color
可以帮助我们快速地构建颜色模型。
你可以泡着吃:
val red = Color(0xffff0000)
可以扭着吃:
val blue = Color(red = 0f, green = 0f, blue = 1f)
欸,你还可以干吃:
val black = Color.Black
只要你喜欢,你甚至可以空翻360度加转体一周半的时候吃:
// 我不会空翻,也不会转体,期待你的表现,加油!
Compose 提供了 [Colors
](()数来创建成套的浅色或深色:
val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
private val DarkColorPalette = darkColors(
primary = Purple200,
primaryVariant = Purple700,
secondary = Teal200,
onPrimary = Color.Green
)
private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant Customize= Purple700,
secondary = Teal200,
onPrimary = Color.Green
/* Other default colors to override
background = Color.White,
surface = Color.White,
onPrimary = Color.White,
onSecondary = Color.Black,
onBackground = Color.Black,
onSurface = Color.Black,
*/
)
然后,就可以传递给 MaterialTheme
使用喽:
@Composable
fun TestComposeTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
怎么样,还自动适配深色模式。
而且,我们也可以随时随地获取到主题色:
Text(
text = “Hello theming”,
color = MaterialTheme.colors.primary
)
表面颜色和内容颜色又是另一个概念了,许多组件都接受一对颜色和「内容颜色」:
Surface(
color: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(color),
…
TopAppBar(
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
…
这样一来,您不仅可以设置可组合项的颜色,而且还能为包含在可组合项中的内容提供默认颜色。默认情况下,许多可组合项都使用这种内容颜色。例如,Text
的颜色基于其父项的内容颜色,而 Icon
:「俺也一样」,它可以使用该颜色来设置其色调。
contentColorFor()
方法可以为任何主题颜色检索适当的“on”颜色。例如,如果您设置 primary
背景,就会将 onPrimary
设置内容颜色。如果您设置非主题背景颜色,还应指定合理的内容颜色。使用 LocalContentColor
可检索与当前背景形成对比的当前内容颜色。
我们以上面自定义的 Theme 来试验,使用它作为我们的主题:
@Preview
@Composable
fun TestColor() {
TestComposeTheme {
Button(onClick = {}) {
Text(
“hello world”
)
}
}
}Customize
效果:
2.字体排版
字体排版主要通过 Typography
和 TextStyle
类来完成。Typography
构造函数可以提供每种样式的默认值,因此您可以省略不希望自定义的任何样式:
val Rubik = FontFamily(
Font(R.font.rubik_regular),
Font(R.font.rubik_medium, FontWeight.W500),
Font(R.font.rubik_bold, FontWeight.Bold)
)
val MyTypography = Typography(
h1 = TextStyle(
fontFamily = Rubik,
fontWeight = FontWeight.W300,
fontSize = 96.sp
),
body1 = TextStyle(
fontFamily = Rubik,
fontWeight = FontWeight.W600,
fontSize = 16.sp
)
/…/
)
MaterialTheme(typography = MyTypography, /…/)
如果您希望自始至终使用同一字体,请指定 defaultFontFamily
参数,并省略所有 TextStyle
元素的 fontFamily
:
val typography = Typography(defaultFontFamily = Rubik)
MaterialTheme(typography = typography, /…/)
使用时,可以从主题检索 TextStyle
,如以下示例所示:
Text(
text = “Subtitle2 styled”,
style = MaterialTheme.typography.subtitle2
)
3.形状
Compose 中可以轻松地定义各种形状,比如圆角或者操场跑道形状,在传统 View 系统中实现都比较麻烦。
我们现在修改一下上面的 Button 的形状来看看效果:
val Shapes = Shapes(
small = CutCornerShape(
topStart = 16.dp,
topEnd = 0.dp,
bottomStart = 16.dp,
bottomEnd = 0.dp
),
medium = RoundedCornerShape(percent = 50),
large = RoundedCornerShape(0.dp)
)
这里有一点需要注意的是,默认情况下,许多组件使用这些形状。例如,Button、TextField 和 FloatingActionButton 默认为 small,AlertDialog 默认为 medium,而 ModalDrawerLayout 默认为 large。如需查看完整的对应关系,请参阅[形状方案](()参考文档。
.dp,
bottomStart = 16.dp,
bottomEnd = 0.dp
),
medium = RoundedCornerShape(percent = 50),
large = RoundedCornerShape(0.dp)
)
[外链图片转存中…(img-G1GBHLl7-1651217222829)]
这里有一点需要注意的是,默认情况下,许多组件使用这些形状。例如,Button、TextField 和 FloatingActionButton 默认为 small,AlertDialog 默认为 medium,而 ModalDrawerLayout 默认为 large。如需查看完整的对应关系,请参阅[形状方案](()参考文档。
Jetpack Compose 初体验(上)相关推荐
- Jetpack Compose 初体验(上),flutter人脸识别系统
fun VerticalText() { Column( modifier = Modifier.padding(16.dp) ) { Text("Hello World!") T ...
- Jetpack Compose 初体验(上),retrofit原理面试
声明 Typography 对象,然后给 Text 添加 style 属性,来控制文字的样式. @Preview(showBackground = true) @Composable fun Vert ...
- 麒麟座V3.1接入OneNET平台初体验--上传温湿度
一..前言 这篇文章不得不有前言, 一直在搭建自己的云服务器, 最后还是觉得OneNet的平台更加方便, 省时省力, 功能强大, 调用方便. 这次开发麒麟座也没有硬件基础, 用着官方的例程就成功连接到 ...
- IBatis初体验2
继上一篇IBatis初体验 上一篇介绍了基本配置和一个简单的插入(其它RUD操作也类似) 本篇主要是对于一对多和多对一的基本使用 还是Userinfo 与 Score 双向一对多关系 javaBea ...
- 探索 Jetpack Compose
前言 在大前端概念快速发展下,出现了很多声明式 UI 写法的语言或框架,像前端的 react.iOS 的 Swift UI,还有 Google 的 Flutter,但很少会听到 Android 原生有 ...
- 《Jetpack Compose 从入门到实战》带你踏上 Compose 开发之旅~
写书的契机 Jetpack Compose 首次亮相于 2019 年的 Google I/O 大会,彼时的我正在为抖音客户端研发一款基于原生视图渲染的声明式 UI 框架,由于声明式开发理念在当时还过于 ...
- ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)
早就听说ASP.NET Core 3.0中引入了gRPC的服务模板,正好趁着家里电脑刚做了新系统,然后装了VS2019的功夫来体验一把.同时记录体验的过程.如果你也想按照本文的步骤体验的话,那你得先安 ...
- 拿来吧你,Compose尝鲜初体验!
前言 Compose 正式版在七月份的尾巴如期而至,我也写了一份 Compose 版本的项目,Demo其实比较简单. 地址:github.com/mCyp/Hoo. 这已经是它的第三个版本: 第一版: ...
- 我的Go+语言初体验——iPad上搭建Go+开发环境(ish版)
目录 欢迎来到用iPad来学习Go+之旅 一.在 iPad 安装 Go+ 前的准备 1. iSH Shell 的作用 2. 安装 iSH Shell 3. 在 iSH 里安装一些常用软件 apk 命令 ...
最新文章
- Android实现双击事件的两种方式
- php内核总结_深入PHP内核之面向对象总结
- 某大型国企技术平台建设
- python统计英文句子每个单词字数_Python小书3-文本英文单词统计
- 信息学奥赛一本通 1022:整型与布尔型的转换 | OpenJudge NOI 1.2 09
- 02:同行列对角线的格子
- mac版本 sadptool_【Koala 工具】设备调试相关工具集锦
- OpenCV获取轮廓最大内接正矩形(C++源码)
- Python下selenium的get()方法大量时间超时报错TimeOut
- 温度报警器 c语言,红外遥控温度报警器
- (二)WebService之调用soap服务
- QQ引流脚本,QQ扩列引流脚本实操演示
- Tablestore结合Spark的流批一体SQL实战
- XML转Json 设置指定节点为数组
- c语言 空指令的作用,单片机C语言编程空指令产生短延时怎么办
- PyTorch+YOLOv5环境搭建(未完待续)
- 总线通信协议-PCI
- UVALive 7279	Sheldon Numbers (暴力打表)
- 支撑电子政务平台的CMS内容管理系统
- Delphi快速开发本机跨平台Google Maps谷歌地理信息系统GIS解决方案