在IDE的右上角有Code
,Split
,Design
三个选项。分别是只显示代码,同时显示代码和布局和只显示布局。
当更改跟UI相关的代码时,会显示如下图的一个横条通知,点击Build&Refresh
即可更新显示所更改代码的UI。
2.2.3 setContent
setContent
的作用是和zaiLayout/View
中的setContentView
是一样的。
setContent
的方法也是有@Compose
注解的方法。所以,在setContent
中写入关于UI的@Compopse
方法,即可在Activity中显示。
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { JetpackComposeDemoTheme { Greeting("Android") } } }
2.2.4 *Theme
在创建新的Compose项目时会自动创建一个项目名+Theme
的@Compose
方法。 我们可以通过更改颜色来完成对主题颜色的设置。 生成的Theme方法的代码如下。
private val DarkColorPalette = darkColorPalette( primary = purple200, primaryVariant = purple700, secondary = teal200 ) private val LightColorPalette = lightColorPalette( primary = purple500, primaryVariant = purple700, secondary = teal200 /* Other default colors to override background = Color.White, surface = Color.White, onPrimary = Color.White, onSecondary = Color.Black, onBackground = Color.Black, onSurface = Color.Black, */ ) @Composable fun JetpackComposeDemoTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) { val colors = if (darkTheme) { DarkColorPalette } else { LightColorPalette } MaterialTheme( colors = colors, typography = typography, shapes = shapes, content = content ) }
Theme方法中有正常主题和Dark主题的颜色设置,里面还有关于MeterialTheme
的设置。
关于Theme方法的用法如下。
setContent { JetpackComposeDemoTheme { Greeting("Android") } }
在JetpackComposeDemoTheme
里面的所有UI方法都会应用上述主题中指定的颜色。
2.2.4 Modifier
Modifier
是各个Compose
的UI组件一定会用到的一个类。它是被用于设置UI的摆放位置,padding等信息的类。关于Modifier
相关的设置实在是太多,在这里只介绍会经常用到的。
padding
设置各个UI的padding。padding的重载的方法一共有四个。
Modifier.padding(10.dp) // 给上下左右设置成同一个值 Modifier.padding(10.dp, 11.dp, 12.dp, 13.dp) // 分别为上下左右设值 Modifier.padding(10.dp, 11.dp) // 分别为上下和左右设值 Modifier.padding(InnerPadding(10.dp, 11.dp, 12.dp, 13.dp))// 分别为上下左右设值
这里设置的值必须为Dp
,Compose
为我们在Int中扩展了一个方法dp
,帮我们转换成Dp
。
plus
可以把其他的Modifier加入到当前的Modifier中。
Modifier.plus(otherModifier) // 把otherModifier的信息加入到现有的modifier中
fillMaxHeight
,fillMaxWidth
,fillMaxSize
类似于match_parent
,填充整个父layout。
Modifier.fillMaxHeight() // 填充整个高度
width
,heigh
,size
设置Content的宽度和高度。
Modifier.width(2.dp) // 设置宽度 Modifier.height(3.dp) // 设置高度 Modifier.size(4.dp, 5.dp) // 设置高度和宽度
widthIn
,heightIn
,sizeIn
设置Content的宽度和高度的最大值和最小值。
Modifier.widthIn(2.dp) // 设置最大宽度 Modifier.heightIn(3.dp) // 设置最大高度 Modifier.sizeIn(4.dp, 5.dp, 6.dp, 7.dp) // 设置最大最小的宽度和高度
gravity
在Column
中元素的位置。
Modifier.gravity(Alignment.CenterHorizontally) // 横向居中 Modifier.gravity(Alignment.Start) // 横向居左 Modifier.gravity(Alignment.End) // 横向居右
rtl
,ltr
开始布局UI的方向。
Modifier.rtl // 从右到左 Modifier.ltr // 从左到右
Modifier的方法都返回Modifier的实例的链式调用,所以只要连续调用想要使用的方法即可。
@Composable fun Greeting(name: String) { Text(text = "Hello $name!", modifier = Modifier.padding(20.dp).fillMaxSize()) }
2.2.5 Column,Row
正如其名字一样,Column
和Row
可以理解为在View/Layout
体系中的纵向和横向的ViewGroup
。
需要传入的参数一共有四个。
-
Modifier
用上述的方法传入已经按需求设置好的Modifier即可。 -
Arrangement.Horizontal
,Arrangement.Vertical
需要给Row
传入Arrangement.Horizontal
,为Column
传入Arrangement.Vertical
。 这些值决定如何布置内部UI组件。
可传入的值为Center
,Start
,End
,SpaceEvenly
,SpaceBetween
,SpaceAround
。 重点解释一下SpaceEvenly
,SpaceBetween
,SpaceAround
。
SpaceEvenly
:各个元素间的空隙为等比例。
SpaceBetween
:第一元素前和最后一个元素之后没有空隙,所有空隙都按等比例放入各个元素之间。 SpaceAround
:把整体中一半的空隙平分的放入第一元素前和最后一个元素之后,剩余的一半等比例的放入各个元素之间。
-
Alignment.Vertical
,Alignment.Horizontal
需要给Row
传入Alignment.Vertical
,为Column
传入Alignment.Horizontal
。 使用方法和Modifier
的gravity
中传入参数的用法是一样的,这里就略过了。 -
@Composable ColumnScope.() -> Unit
需要传入标有@Compose
的UI方法。但是这里我们会有lamda函数的写法来实现。
整体代码如下。
Column { Row(modifier = Modifier.ltr.fillMaxWidth(),horizontalArrangement = Arrangement.SpaceAround, verticalGravity = Alignment.Top) { // ..,... }
3. 其他
写的有点多,关于Android全新UI编程的第一篇就到这里。我会抓紧写下一篇的。
JetpackComposeDemo Github
Android全新UI编程 - Jetpack Compose 超详细教程:
第1弹
其他教程:
神一样的存在,Dagger Hilt !!
Android10的分区存储机制(Scoped Storage)适配教程
Android Jetpack Room的详细教程
Android的属性动画(Property Animation)详细教程
Android ConstraintLayout的易懂教程
Google的MergeAdapter的使用
Paging在Android中的应用
Android UI测试之Espresso
Android WorkManager的使用
本文使用 mdnice 排版
总结
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识,这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021面试真题解析,我把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包知识脉络 + 诸多细节。
还有 高级架构技术进阶脑图、Android开发面试专题资料 帮助大家学习提升进阶,也节省大家在网上搜索资料的时间来学习,也可以分享给身边好友一起学习。
网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。
2021年虽然路途坎坷,都在说Android要没落,但是,不要慌,做自己的计划,学自己的习,竞争无处不在,每个行业都是如此。相信自己,没有做不到的,只有想不到的。祝大家2021年万事大吉。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
系对大家有一个方向参考。
2021年虽然路途坎坷,都在说Android要没落,但是,不要慌,做自己的计划,学自己的习,竞争无处不在,每个行业都是如此。相信自己,没有做不到的,只有想不到的。祝大家2021年万事大吉。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!