Android APP 浅尝笔记

Google 提供的 Android 使用入门

首个应用

#

本部分内容来自 创建您的首个 Android 应用

主函数

#

根据自带的基本模板创建后，MainActivity.kt 文件中包含类似以下 hello world 级别代码：

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("Android")
               }
           }
       }
   }
}

onCreate() 函数是此应用的入口点，并会调用其他函数来构建 UI。在 Kotlin 程序中，main() 函数是 Kotlin 编译器在代码中开始编译的特定位置；在 Android 应用中，则是由 onCreate() 函数来担任这个角色。

onCreate() 函数中的 setContent() 函数用于通过可组合函数定义布局。任何标有 @Composable 注解的函数都可通过 setContent() 函数或其他可组合函数进行调用。该注解可告知 Kotlin 编译器：Jetpack Compose 使用的这个函数会生成 UI。

可组合函数

#

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp,
    )
}

• @Composable 函数名称采用首字母大写形式。
• 需在该函数前面添加 @Composable 注解。
• @Composable 函数无法返回任何内容。
• 最好让可组合项接受 Modifier 形参，并将该 modifier 传递给其第一个子项。

用来预览的函数

#

DefaultPreview() 函数是一项很酷的功能，让您无需构建整个应用就能查看应用的外观。若要使其成为预览函数，您需要添加 @Preview 注解。

如您所见，@Preview 注解可以接收名为 showBackground 的参数。如果 showBackground 设置为 true，则会向应用预览添加背景。

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

资源

#

您应始终将每种类型的资源放在项目的 res/ 目录下的相应子目录中。例如，以下是一个简单项目的文件层次结构：

MyProject/
    src/
        MyActivity.kt
    res/
        drawable/
            graphic.png
        mipmap/
            icon.png
        values/
            strings.xml

在此示例中，res/ 目录中包含存储在不同子目录中的所有资源，其中包括存储图片资源的 drawable/ 目录、存储启动器图标的 mipmap/ 目录和存储字符串资源的 values/ 目录。如需详细了解应用资源的用法、格式和语法，请参阅 资源类型概览 。

添加文本

#

可缩放像素（SP）是字体大小的度量单位。Android 应用中的界面元素使用两种不同的度量单位：一种是密度无关像素（DP），另一种是可缩放像素（SP）。默认情况下，SP 单位与 DP 单位大小相同，但前者的大小会根据用户在手机设置下的首选文本大小进行调整。

参阅 遵循良好的编码规范

硬编码字符串是直接写在应用代码中的字符串，会使得将应用翻译为其他语言的难度增大，在应用的不同位置重复使用字符串变得更困难。可以通过将字符串提取到资源文件中来解决这类问题。也就是说，您可以不必将字符串硬编码到代码中，而是将字符串放在文件中，并为这些字符串资源命名，然后在想要使用字符串时使用名称进行调用。即使更改了字符串或将其翻译成了其他语言，名称仍将保持不变。举例：

1. 选择某个字符串，例如 Happy Birthday Sam!。
2. 点击屏幕左侧的灯泡。
3. 选择 Extract string resource。
4. 将 Resource name 更改为 happy_birthday_text。

字符串资源应使用小写名称，并且多个单词之间应使用下划线分隔。

自动替换后，原来的字符串会变成 getString(R.string.happy_birthday_text)

在 Project 窗格中，从路径 app > res > values > strings.xml 打开 strings.xml 文件，您会发现 Android Studio 创建了一个名为 happy_birthday_text 的字符串资源。

strings.xml 文件包含用户将在应用中看到的所有字符串。请注意，应用的名称也是一个字符串资源。通过将所有字符串集中放置在一处，您可以更轻松地翻译应用中的所有文本，同时也能更轻松地在应用的不同部分重复使用字符串。

添加图片

#

参阅 添加 Image 可组合项

格式相关

#

布局元素

#

Compose 中的 3 个基本标准布局元素是 Column、Row 和 Box 可组合项。初次添加时，Android Studio 会自动在 import 部分导入相关内容。

一个例子，它还传递了 modifier：

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

布局修饰符 Modifier

#

修饰符用于装饰 Jetpack Compose 界面元素或为其添加行为。例如，您可以为行、文本或按钮添加背景、内边距或行为。若要设置这些效果，可组合项或布局需要接受修饰符作为形参。

如需在 Row 中设置子元素的位置，请设置 horizontalArrangement 和 verticalAlignment 实参。对于 Column，请设置 verticalArrangement 和 horizontalAlignment 实参。注意 Arrange 和 Align 两个单词不一样。

排列方式属性用于在布局大小大于其子元素大小的总和时排列子元素。对齐方式属性用于在布局中按左对齐、居中或右对齐方式对齐子元素。

例如，当 Column 的大小大于其子元素大小的总和时，可以指定 verticalArrangement 来定义 Column 中的子元素的排列方式。下图显示了不同的垂直排列方式：

当 Row 的大小大于其子元素大小的总和时，可以指定 horizontalArrangement 来定义 Row 中的子元素的排列方式。下图显示了不同的水平排列方式：

对齐和排列文本

#

verticalArrangement = Arrangement.Center - 垂直排列方式设为中心对齐。

textAlign = TextAlign.Center - 文本居中对齐。

padding - 添加内边距。最好以 4.dp 为增量使用内边距值。

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
            modifierr = Modifier
                .padding(
                    start = 16.dp,
                    top = 8.dp
                )
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

缩放

#

有多种 ContentScale 类型 可供选择。例如，使用 ContentScale.Crop 形参进行缩放时，系统会均匀缩放图片以保持宽高比不变，进而使图片的宽度和高度等于或大于屏幕的相应尺寸。

Image(
    painter = image,
    contentDescription = null,
    contentScale = ContentScale.Crop
)

• 当 Android Studio 提示时，导入 androidx.compose.ui.layout.ContentScale 接口。

不透明度

#

向 Image 可组合项添加 alpha 形参

Image(
    painter = image,
    contentDescription = null,
    contentScale = ContentScale.Crop,
    alpha = 0.5F
)

Surface 更改背景颜色

#

Surface 是一个容器，代表界面的某一部分，您可以在其中更改外观（如背景颜色或边框）。

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}

使用 Android Studio 操作：

1. 突出显示该行文本，按下 Alt+Enter (Windows) 或 Option+Enter (Mac)，然后选择 Surround with widget。
2. 选择 Surround with Container。
3. 默认容器为 Box，但您可以将其更改为其他容器类型。
4. 删除 Box，改为输入 Surface()。

代码风格的注意事项

#

尾随 lambda 语法

#

将函数作为形参传递时，您可以使用尾随 lambda 语法。您可以将函数放在圆括号外部的大括号中，而不是放在圆括号内。这是 Compose 中的一种常见且推荐的做法，因此您需要熟悉代码的格式。

例如，Row() 可组合函数中的最后一个形参是 content 形参，它是一个描述子界面元素的函数。假设您想要创建一个包含三个文本元素的行。以下代码行得通，但如果为尾随 lambda 使用具名形参，则非常麻烦：

Row(
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)

由于 content 形参是函数签名中的最后一个形参，并且您要将其值作为 lambda 表达式传递（不知道 lambda 是什么也没关系，熟悉一下语法即可），因此可以移除 content 形参和括号，如下所示：

Row {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}

采用最佳实践

#

最好从父级可组合项传递修饰符属性和修饰符。更新 GreetingText() 中的修饰符形参，如下所示：

onCreate()

Surface(
    //...
) {
    GreetingText(
        message = "Happy Birthday Sam!",
        from = "From Emma",
        modifier = Modifier.padding(8.dp)
    )
}

GreetingText()

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        // ...
    }
}