Android全新UI编程-JetpackCompose超详细教程，焦虑的移动互联⽹开发者如
何破局
因为Jetpack Compose的内容⽐较多，我会分成多个⽂章来进⾏介绍。 内容包括常⽤UI组件的使⽤，Flow和Compose的结合使⽤，以及如何构建MVVM应⽤。 还有，Compose的API还没有完全的确定下来，如果有API的修改，我也会对⽂章进⾏修订，所以敬请放⼼。
第1弹将会介绍如何创建Compose应⽤以及基本注解，Compose⽅法的使⽤。 好了，闲话不多说，开整!
2. 教程
2.1 创建新的项⽬或导⼊库
Jetpack Compose是从Android Studio 4.2开始⽀持的，所以需要通过4.2(现在是canary版本)创建新的项⽬或者添加导⼊库。这⾥按照创建新的项⽬来进⾏介绍。
根据上图所⽰，在创建新的项⽬时需要选择Empty Compose Activity。
此时模块中的adle⽂件会新增下列的库的依赖。
dependencies {
…
implementation ‘androidx.ui:ui-layout:"${compose_version}"’
implementation ‘androidx.ui:ui-material:"${compose_version}"’
implementation ‘androidx.ui:ui-tooling:"${compose_version}"’
…
}
还有在模块的adle⽂件中新增下列的设置。
android {
…
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion “${compose_version}”
kotlinCompilerVersion “1.3.70-dev-withExperimentalGoogleExtensions-20200424”
}
}
2.2 UI相关
2.2.1 @Compose
所有关于构建View的⽅法都必须添加@Compose的注解才可以。并且@Compose跟协程的Suspend
的使⽤⽅法⽐较类似，被@Compose的注解的⽅法只能在同样被@Comopse注解的⽅法中才能被调⽤。
@Composable
fun Greeting(name: String) {
Text(text = “Hello $name!”)
}
2.2.2 @Preview
加上@Preview注解的⽅法可以在不运⾏App的情况下就可以确认布局的情况。
@Preview的注解中⽐较常⽤的参数如下：
1. name: String: 为该Preview命名，该名字会在布局预览中显⽰。
2. showBackground: Boolean: 是否显⽰背景，true为显⽰。
3. backgroundColor: Long: 设置背景的颜⾊。
4. showDecoration: Boolean: 是否显⽰Statusbar和Toolbar，true为显⽰。
5. group: String: 为该Preview设置group名字，可以在UI中以group为单位显⽰。
6. fontScale: Float: 可以在预览中对字体放⼤，范围是从0.01。
7. widthDp: Int: 在Compose中渲染的最⼤宽度，单位为dp。
8. heightDp: Int: 在Compose中渲染的最⼤⾼度，单位为dp。
上⾯的参数都是可选参数，还有像背景设置等的参数并不是对实际的App进⾏设置，只是对Preview中的背景进⾏设置，为了更容易看清布局。
@Preview(showBackground = true, name = “Home UI”, showDecoration = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
Greeting(“Android”)
}
}
当更改跟UI相关的代码时，会显⽰如下图的⼀个横条通知，点击Build&Refresh即可更新显⽰所更改代码的UI。
2.2.3 setContent
setContent的作⽤是和zai Layout/View中的setContentView是⼀样的。
setContent的⽅法也是有@Compose注解的⽅法。所以，在setContent中写⼊关于UI的@Compopse⽅法，即可在Activity中显⽰。override fun onCreate(savedInstanceState: Bundle?) {
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) // 给上下左右设置成同⼀个值android编程入门指南 pdf
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))// 分别为上下左右设值
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中元素的位置。
rtl, ltr 开始布局UI的⽅向。
Modifier.ltr // 从左到右 复制代码`
Modifier的⽅法都返回Modifier的实例的链式调⽤，所以只要连续调⽤想要使⽤的⽅法即可。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论