Android介绍

此文章是暑陪的时候写的，但是实际上就是参考官网的教程copy了一份。 # Android

创建 Android 应用

使用模版创建项目

打开 Android Studio后，我们将看到类似的界面
点击 New project 之后，出现类似的界面
我们选择 Empty Activity ，看到如下界面
- Name 字段用于输入项目名称。本次课程，请输入“Greeting Card”。
- 保持 Package name 字段不变。该字段用于指定文件在文件结构中的组织方式。在本例中，软件包名称将会指定为 com.example.greetingcard。
- 保持 Save location 字段不变。该字段用于指定保存与项目相关的所有文件的位置。请记下这些文件在计算机上的保存位置，以便查找文件。
- 在 Language 字段中，系统已选择 Kotlin。“Language”字段用于指定在构建项目时所采用的编程语言。由于 Compose 仅与 Kotlin 兼容，因此无法更改此字段。然后点击完成，等待一会
然后点击右上角的，可同时查看代码和设计。这个时候将会有三个区域
- 最左边的区域用于显示项目的文件和文件夹
- 中间的区域是修改代码的地方
- 右边的区域是预览应用外观的地方可能最开始看到这样的界面，点击 Build & Refresh。构建可能需要花一些时间，不过完成后，预览便会显示一个内容为 Hello Android! 的文本框。

更新文本

打开 MainActivity.kt 文件的 Code 视图。此代码中有一些自动生成的函数，具体而言就是 onCreate() 和 setContent() 函数。 onCreate() 函数是此应用的入口点，并会调用其他函数来构建 UI。在 Kotlin 程序中，main() 函数是 Kotlin 编译器在代码中开始编译的特定位置；在 Android 应用中，则是由 onCreate() 函数来担任这个角色。

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

接下来，查看 Greeting() 函数。Greeting() 函数是一种可组合函数；请留意它上方的 @Composable 注解。可组合函数会接受一些输入并生成屏幕上显示的内容。虽然我们在前面已经学习了函数，但是可组合函数还有一些不同之处： - @Composable 函数名称采用首字母大写形式。 - 需在该函数前面添加 @Composable 注解。 - @Composable 函数无法返回任何内容。

大家可以尝试加入不同的文本，我就以下面的为例子然后最右边的视框会更新文字。

GreetingPreview() 无需构建整个应用就能查看应用的外观。若要使其成为预览函数，需要添加 @Preview 注解。

@Preview 注解可以接收名为 showBackground 的参数。如果 showBackground 设置为 true，则会向应用预览添加背景。如果使用深色主题，就可以看到如下所示的区别了。

可以在 GreetingPreview() 更新名字，显示预览。

更改背景颜色

若要为自我介绍设置不同的背景颜色，需要使用 Surface 将文本包围起来。Surface 是一个容器，代表界面的某一部分，可以在其中更改外观（如背景颜色或边框）。如果有报错的话，悬停，然后 import 即可然后我们把颜色参数传进去即可

添加内边距

Modifier 用于扩充或修饰可组合项。可以使用的其中一个 Modifier 是 padding 修饰符，它会在元素周围应用空格（在本例中，是在文本周围添加空格）。为此，请使用 Modifier.padding() 函数。

在 Android 模拟器上运行应用

我们将使用设备管理器来创建 Android 虚拟设备 (AVD)。AVD 是移动设备的软件版本（也称为模拟器），可在计算机上运行，以及模拟特定类型 Android 设备的配置。它可以是任何手机、平板电脑、电视、手表或 Android Auto 设备。我们将使用 AVD 来运行 Greeting Card 应用。

创建 AVD

在 Android Studio 中，依次选择 Tools > Device Manager。系统随即会打开 Device Manager 对话框。如果以前创建过虚拟设备，则此对话框中会列出该设备。
我们点击左上角的加号，然后点击 Create virtual device 系统会显示出 Virtual Device Configuration 对话框。该对话框会显示一个预配置设备的列表（按类别整理），可以从中选择。对于每种设备，该表都提供了相应列来分别显示其屏幕尺寸（以英寸为单位）、屏幕分辨率（以像素为单位）和像素密度（每英寸像素数）。
选择 Phone 类别。
选择所需手机（例如 Pixel 8），然后点击 Next。此步骤会打开另一个屏幕，供选择在虚拟设备上运行的 Android 版本。这可在不同版本的 Android 系统上测试应用。大家 download 即可，点击 Next，看到如下界面，可以在其中为设备选择其他配置详情。
在 AVD Name 字段中，输入 AVD 的名称，或使用默认名称。保持其余字段不变。
点击 Finish。系统会返回到 Android Virtual Device Manager 窗格。

在 Android 模拟器上运行应用

在 Android Studio 窗口顶部选择创建的虚拟设备。
点击旁边的绿色三角
模拟器首次启动需要一些时间，有可能是几分钟。虚拟设备应该会在代码编辑器旁边打开。当应用准备就绪后，便会在虚拟设备上打开。

构建基本布局

构建一个显示文本和图像的、界面简单的 Android 应用。

Jetpack Compose 介绍

下面我们来介绍刚刚前面提到的 compose。

首先，Jetpack Compose 是用于构建 Android 界面的新款工具包。Compose 使用更少的代码、强大的工具和直观的 Kotlin 功能，可以帮助简化并加快 Android 界面开发。借助 Compose，可以通过定义一组函数来构建界面，这些函数称为可组合函数，它们会接受数据并描述界面元素。

可组合函数

在 Compose 中，可组合函数是界面的基本构建块。可组合函数： - 描述界面中的某一部分。 - 不会返回任何内容。 - 接受一些输入并生成屏幕上显示的内容。

注解

注解是用于在代码中附加额外信息的方式。此类信息可以帮助 Jetpack Compose 编译器等工具和其他开发者理解应用的代码。

若要应用注解，只需在要注解的声明开头为其名称（注解）添加 @ 字符作为前缀即可。可以为包括属性、函数和类在内的不同代码元素添加注解。

带形参的注解

注解可以接受形参。形参可以为处理它们的工具提供额外信息。就像我们之前用到的 @Preview 注解，可以加入不同的形参。

当然，也可以传递多个参数

可组合函数示例

可组合函数带有 @Composable 注解。所有可组合函数都必须带有此注解。此注解可告知 Compose 编译器：此函数用于将数据转换为界面。

以下代码段是一个简单的可组合函数示例，该函数接受传递的数据（name 函数参数）并用其在屏幕上渲染文本元素。

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

关于可组合函数的几点说明： - Jetpack Compose 是围绕可组合函数构建的。这些函数可让以程序化方式定义应用的界面，只需描述应用界面的外观，而不必关注界面的构建过程。如需创建可组合函数，只需将 @Composable 注解添加到函数名称中即可。 - 可组合函数可以接受一些实参，用来让应用逻辑描述或修改界面。在本例中，界面元素接受一个 String，以便在问候用户时称呼姓名。

可组合函数名称

不返回任何内容且带有 @Composable 注解的 Compose 函数必须使用 Pascal 命名法命名。Pascal 命名法是一种命名惯例，采用这种命名法时，复合词中每个单词的首字母大写。Pascal 命名法与骆驼命名法之间的区别在于：在 Pascal 命名法中，所有单词的首字母都大写；而在骆驼命名法中，首字母可以是大写或小写。

Compose 函数：

必须是名词：DoneButton()
不能是动词或动词短语：DrawTextField()
不能是名词性介词：TextFieldWithLink()
不能是形容词：Bright()
不能是副词：Outside()
名词可以添加描述性形容词作为前缀：RoundIcon()

添加新的文本元素

删除 Greeting 函数以及调用，并将 GreetingPreview 替换为 HappyBirthdayPreview。
在 BirthdayCardPreview() 函数前，添加一个名为 GreetingText() 的新函数。不要忘记在该函数前添加 @Composable 注解，因为该函数是一个用于描述 Text 可组合项的 Compose 函数。

1
2
3

@Composable
fun GreetingText() {
}

最好让可组合项接受 Modifier 形参，并将该 modifier 传递给其第一个子项。

1
2
3

@Composable
fun GreetingText(modifier: Modifier = Modifier) {
}

将类型为 String 的 message 形参添加到 GreetingText() 可组合函数中。

1
2
3

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
}

在 GreetingText() 函数中，添加一个 Text 可组合项并传入文本消息作为具体实参。

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message
    )
}

此 GreetingText() 函数用于在界面中显示文本。为此，它会调用 Text() 可组合函数。

预览函数在 BirthdayCardPreview() 函数中调用 GreetingText() 函数。将一个 String 参数传递给 GreetingText() 函数。
更改字体大小可以到 GreetingText() 函数中的 Text() 可组合项。向 Text() 函数传递 fontSize 实参作为第二个具名实参，并将其值设为 100.sp。

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

8. 消息重叠的原因是需要指定行高。更新 Text 可组合项以包含行高。

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

9. 添加一个新的文本元素在 GreetingText() 函数，向该函数传递一个类型为 String 的 from 参数作为的签名。

1	fun GreetingText(message: String, from: String, modifier: Modifier = Modifier)

在生日祝福语 Text 可组合项之后，再添加一个接受 text 实参（其值设为 from）的 Text 可组合项。

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Text(
        // ...
    )
    Text(
        text = from
    )
}

添加一个 fontSize 具名实参，并将其值设为 36.sp。

Text(
    text = from,
    fontSize = 36.sp
)

在 BirthdayCardPreview() 函数再添加一个 String 实参来为生日卡签名。一个可组合函数可能会描述多个界面元素。不过，如果未提供有关如何排列这些元素的指导，Compose 可能会以不喜欢的方式排列它们。例如，上面的代码生成了两个相互重叠的文本元素，因为没有提供有关如何排列这两个可组合项的指导。

将文本元素排列成一行或一列

界面层次结构

界面层次结构基于包含机制，意即一个组件可以包含一个或多个组件，有时会用“父级”和“子级”这两个词来表述。这种说法是指，父界面元素包含子界面元素，而子界面元素还可以继续包含子界面元素。在此部分中，将了解可用作父界面元素的 Column、Row 和 Box 可组合项。

Compose 中的 3 个基本标准布局元素是 Column、Row 和 Box 可组合项。

Column、Row 和 Box 都是接受可组合内容作为参数的可组合函数，因此可以在这些布局元素内放置项目。例如，Row 可组合项中的各个子元素彼此相邻地水平放置成一行。

// Don't copy.
Row {
    Text("First Column")
    Text("Second Column")
}

因此，在我们的函数中可以使用 Row 对文字进行布局（暂时将生日祝福语的字体大小更改为 30.sp）。

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Row {
        Text(
            text = message,
            fontSize = 30.sp,
            lineHeight = 110.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

我们也可以使用 Column 来将文本元素排成一列。

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

在模拟器上运行

我们可以回到 onCreate() 函数，从 Scaffold 代码块调用 GreetingText() 函数，传递 GreetingText() 函数、的生日祝福和签名。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    GreetingText(
                        message = "Happy Birthday Sam!",
                        from = "From Emma",
                        modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

如需在屏幕中心对齐问候语，请添加一个名为 verticalArrangement 的形参，并将其设置为 Arrangement.Center。围绕列添加 8.dp 内边距。最好以 4.dp 为增量使用内边距值。

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

也可以使用 textAlign 将问候语文本居中对齐。

Text(
    text = message,
    fontSize = 100.sp,
    lineHeight = 116.sp,
    textAlign = TextAlign.Center
)

为签名添加内边距，并使其右对齐。

Text(
    text = from,
    fontSize = 36.sp,
    modifier = Modifier
        .padding(16.dp)
        .align(alignment = Alignment.End)
)