Android开发自学笔记 --- 构建简单的UI视图

1.创建应用

需求：

• 由于旧的工业园区内安装的都是没有远程抄表功能的水电表，所以需要开发一个抄表软件，用于工业园抄水电表
• 具体需求，一边编码，一边想

首先，在Android Studio中创建一个空项目：

项目结构如下：

2.配置Git

参考文章如下：

• Android Studio 3.6.1上使用gitee
• Git国内极速下载与安装全攻略：无需翻墙的完整解决方案
• Git配置error:could not lock config file D:/orcad/Cadence/SPB_Data/.gitconfig: No suchfile or directory

我的项目代码将会托管到gitee平台，具体操作如下（详细参考上面的文章）：

1. 到git官网下载git安装包，并安装
   国内下载连接
2. 在Android Studio中配置Git
3. 下载并安装Gitee插件
4. 登录Gitee账号
5. 上传创建好的项目到gitee，仓库连接

3.开始写代码

"先做个垃圾出来"是自学中一种高效的思维方法，核心是通过快速行动打破完美主义陷阱，通过试错和迭代实现技能提升。以下是具体应用方法和注意事项：

1. 零起点行动
   初学者常因过度准备（研究理论、购买设备）而拖延，导致迟迟不敢动手。实际上，技能提升的关键在于‌开始行动‌，而非追求完美。例如学习视频剪辑时，可先用手机拍摄粗糙素材进行初步剪辑，而非纠结设备或色彩搭配。
2. 即时反馈机制
   通过快速产出"垃圾"作品，可立即发现知识盲区（如画面抖动、转场生硬），随后针对性学习相关技巧（如稳定器使用、转场技巧）。这种"做-错-学-改"循环比纯理论学习效率更高。
3. 心理建设
   大脑天生抗拒从零创造，但通过降低起点（如用基础功能完成简单任务），可快速突破心理障碍。程序员学习机器学习时，初期复制他人代码实现基础功能，逐步理解原理后迭代优化，比纯理论学习更有效。
4. 避免结果导向误区
   初期作品可能粗糙，但持续改进比完美计划更重要。例如短视频创作者初期播放量低但持续更新，最终形成个人风格；
5. 容错机制‌
   接受作品初期可能被批评或失败，但这是成长的必经之路。 ‌‌

刚开始写代码，我想到的是，应该好好学习一下MVVM架构、系统学习以下Jetpack Compose等等。后来发现，当你一开始就去啃理论，啃文字，啃架构，到头来发现自己一直都在头脑风暴，一直都在想要有一个完美的开始，但是迟迟不能动手，或者代码写一半发现并不是自己想象的那么完美，想着想着就会半途而废，又把自学的初心忘记了。看过我博客的就知道，我有很多系列的文章想写，但都是因为种种原因，会搁置而没有下文。所以，在这里我在一次提醒自己，贵在坚持，先做一个垃圾出来，一边做，一边学。

3.1 APP的主界面

接下来的UI开发，都将使用Material Design 3，样式主题都将使用默认配置，以求可以快速实现UI界面，不扣细节，不纠结界面是否符合哪些审美标准。

新建一个包，命名为view。由于我粗略看过MVVM架构的介绍，所以在构建项目文件结构时，有意识地将view表示MVVM中的视图V，model将表示MVVM中的模型M（即数据库的操作），viewmodel将表示MVVM中的视图模型VM（即业务逻辑）。当然，这是我自己对MVVM架构的初步理解，所以才作出这样设计，不知道是否理解正确。

jetpack compose的参考：

1. 官方文档
2. 常用组件

详细看代码：

MainActivity.kt

package com.drson.appdemoimport android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.drson.appdemo.ui.theme.AppDemoTheme
import com.drson.appdemo.view.HomeViewclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enableEdgeToEdge()setContent {AppDemoTheme {//新建的主界面HomeView()}}}
}

homeView.kt

package com.drson.appdemo.viewimport androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier/*** APP的主界面** 使用Scaffold组件作为主界面，添加搜索栏，添加一些图标按钮** 官方Scaffold示例`https://developer.android.google.cn/develop/ui/compose/components/scaffold?hl=zh-cn`* */
@Composable
fun HomeView(){Scaffold(modifier = Modifier.fillMaxSize(),topBar = { HomeTopBar() }) { innerPadding ->Column(modifier = Modifier.fillMaxSize().padding(innerPadding)) {  }}
}/*** 定义一个顶部栏* */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun HomeTopBar(){var expanded by remember { mutableStateOf(false) }CenterAlignedTopAppBar(title = { Text("物业管理应用程序") },actions = {IconButton(onClick = {//点击弹出菜单expanded = !expanded}) {Icon(imageVector = Icons.Filled.Menu,contentDescription = "菜单")}DropdownMenu(expanded = expanded,onDismissRequest = { expanded = false }) {DropdownMenuItem(text = {Text("菜单1")},onClick = {/* 点击菜单事件 */})DropdownMenuItem(text = {Text("菜单2")},onClick = {/* 点击菜单事件 */})}},colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primaryContainer,titleContentColor = MaterialTheme.colorScheme.primary))
}

真机效果如下图：

3.2 实现国际化和多语言支持

1. 新建资源文件夹
   
2. 选择Locale

3. 选择中文
4. 新建本地化的文件
6. 在strings.xml写以下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources><string name="app_name">我的应用</string>
</resources>

将应用下载到手机上，应用的名称会显示中文。

3.2.1 用法

1. 在values\strings.xml文件中写如下代码：

<resources><string name="app_name">AppDemo</string><string name="topAppBar_title">Property management application</string>
</resources>

2. 在zh-rCN\strings.xml文件中写如下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources><string name="app_name">我的应用</string><string name="topAppBar_title">物业管理应用程序</string>
</resources>

3. HomeView.kt中需要显示文本的位置，使用如下的代码，就可以实现本地化。当你手机使用的是中文语言环境时，应用程序就会显示中文文本。

import com.drson.appdemo.R
import androidx.compose.ui.res.stringResource
import androidx.compose.material3.TextText(text = stringResource(R.string.topAppBar_title))

这里只做演示，为了开发过程的简单明了，不做过多的考虑（国际化，本地化等）。