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

1.创建应用

需求：

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

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

项目结构如下：

2.配置Git

参考文章如下：

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

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

3.开始写代码

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

零起点行动
初学者常因过度准备（研究理论、购买设备）而拖延，导致迟迟不敢动手。实际上，技能提升的关键在于‌开始行动‌，而非追求完美。例如学习视频剪辑时，可先用手机拍摄粗糙素材进行初步剪辑，而非纠结设备或色彩搭配。

即时反馈机制
通过快速产出"垃圾"作品，可立即发现知识盲区（如画面抖动、转场生硬），随后针对性学习相关技巧（如稳定器使用、转场技巧）。这种"做-错-学-改"循环比纯理论学习效率更高。

心理建设
大脑天生抗拒从零创造，但通过降低起点（如用基础功能完成简单任务），可快速突破心理障碍。程序员学习机器学习时，初期复制他人代码实现基础功能，逐步理解原理后迭代优化，比纯理论学习更有效。

避免结果导向误区
初期作品可能粗糙，但持续改进比完美计划更重要。例如短视频创作者初期播放量低但持续更新，最终形成个人风格；

容错机制‌
接受作品初期可能被批评或失败，但这是成长的必经之路。 ‌‌

刚开始写代码，我想到的是，应该好好学习一下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的参考：

详细看代码：

MainActivity.kt

kotlin 复制代码

package com.drson.appdemo

import 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.HomeView

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppDemoTheme {
            //新建的主界面
                HomeView()
            }
        }
    }
}

homeView.kt

kotlin 复制代码

package com.drson.appdemo.view

import 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 实现国际化和多语言支持

新建资源文件夹
选择Locale

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

xml 复制代码

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

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

3.2.1 用法

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

xml 复制代码

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

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

xml 复制代码

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

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

kotlin 复制代码

import com.drson.appdemo.R
import androidx.compose.ui.res.stringResource
import androidx.compose.material3.Text

Text(text = stringResource(R.string.topAppBar_title))

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

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

目录

1.创建应用

2.配置Git

3.开始写代码

3.1 APP的主界面

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

3.2.1 用法