Android全新UI编程 - Jetpack Compose 超详细教程第1弹

2401_87033955

于 2024-09-07 14:37:29 发布

阅读量722

点赞数 20

文章标签： android ui

本文链接：https://blog.csdn.net/2401_87033955/article/details/141995730

版权

2.1 创建新的项目或导入库

Jetpack Compose是从Android Studio 4.2开始支持的，所以需要通过4.2(现在是canary版本)创建新的项目或者添加导入库。这里按照创建新的项目来进行介绍。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

根据上图所示，在创建新的项目时需要选择Empty Compose Activity。

此时模块中的build.gradle文件会新增下列的库的依赖。

dependencies { ... implementation 'androidx.ui:ui-layout:"${compose_version}"' implementation 'androidx.ui:ui-material:"${compose_version}"' implementation 'androidx.ui:ui-tooling:"${compose_version}"' ... }

还有在模块的build.gradle文件中新增下列的设置。

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的注解中比较常用的参数如下：

name: String: 为该Preview命名，该名字会在布局预览中显示。
showBackground: Boolean: 是否显示背景，true为显示。
backgroundColor: Long: 设置背景的颜色。
showDecoration: Boolean: 是否显示Statusbar和Toolbar，true为显示。
group: String: 为该Preview设置group名字，可以在UI中以group为单位显示。
fontScale: Float: 可以在预览中对字体放大，范围是从0.01。
widthDp: Int: 在Compose中渲染的最大宽度，单位为dp。
heightDp: Int: 在Compose中渲染的最大高度，单位为dp。

上面的参数都是可选参数，还有像背景设置等的参数并不是对实际的App进行设置，只是对Preview中的背景进行设置，为了更容易看清布局。

@Preview(showBackground = true, name = "Home UI", showDecoration = true) @Composable fun DefaultPreview() { MyApplicationTheme { Greeting("Android") } }

在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。