10分钟手把手教你用Android手撸一个简易的个人记账App
Posted 星期一研究室
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10分钟手把手教你用Android手撸一个简易的个人记账App相关的知识，希望对你有一定的参考价值。
用android手撸一个简易的个人记账系统
⛱️序言
前段时间期末周，这学期有一门课叫移动应用开发，这门课的期末作业是用 Android 写一个个人记账管理系统。 Android 的前台是用 xml 实现，后台是用 java 实现。于是，对这两门语言不太熟悉的周一，开始了漫漫长路的摸索之旅。
接下来就来讲解，如何从0到1实现一个简易的个人记账系统。
一起来学习⑧~🙃
温馨小提示： 第二部分的编码阶段代码较多，可直接滑到第三部分看运行效果，并到第四部分克隆github仓库代码，阅读体验更加~
📋一、系统结构设计Design
1. 需求分析
首先我们先来看下老师的需求👇
设计和实现一个类似个人财务管理的 Android APP ，数据库采用 SQLite （也可以直接访问 Web 端 mysql 数据库、或提供 Web 接口访问 MySQL 数据库）。
APP应具备以下功能：
- 用户注册和登录（这类
APP一般面对个人，用户不需要分类别）； - 收入和支出管理（单条收支记录的添加、删除和修改，收入和支出每一条记录至少包括日期、类型、金额和说明。）
- 收入和支出查询（根据时间段、类别等进行查询）
- 收入和支出统计（例如某个月、某个星期或指定时间段的总收支）
- 其他要求：界面设计应尽量美观，可以添加一些图片或背景。
基于以上需求，周一对所要实现的功能进行了整理。请看下方思维导图：
2. 数据库设计
分析完成之后，接下来开始设计数据库。详情见下方思维导图：
因为功能较为简单，所以数据库只设计了两张表。
3. 界面设计
设计完数据库之后，开始楷模润色该 APP 的界面。基于本次课题需求，周一设计了5个界面。接下来先来看 App 的具体界面设计：
看完五个界面所需要的内容之后，接下来，我们来对它进行原型绘制。请看下图：
现在，原型图设计完毕。我们接着设计高保真 App 界面。请看下图：
4. 过程设计
好了，看完原型图之后，我们是不是该来想想页面与页面之间，是怎么进行交互的呢？
因此，现在我们来对整个过程进行设计。详情见下方思维导图：
📘二、编码阶段Coding
1. 项目结构🗂️
（1）文件目录
先来看项目的文件目录，详情看下图👇
（2）AndroidManifest.xml
接下来附上 AndroidManifest.xml 的代码，具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.financial.management">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="个人财务管理App"
android:roundIcon="@mipmap/ic_launcher"
android:supportsRtl="true"
android:theme="@style/Theme.Final">
<activity android:name="com.financial.management.ManageActivity"></activity>
<activity android:name="com.financial.management.SearchRecordActivity" />
<activity android:name="com.financial.management.RegisterActivity"/>
<activity android:name="com.financial.management.UserCenterActivity" />
<activity android:name="com.financial.management.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
（3）Activity类解读
看完上面两个内容之后，接下来是Activity类的解读时间。详情见下表👇
| 文件名 | 作用 |
|---|---|
| MainActivity | 用户登录页面Activity，用户可以进行登录。 |
| RegisterActivity | 用户注册页面Activity，用户可以进行注册。 |
| UserCenterActivity | 个人中心Activity，对应用户个人中心的4个按钮进行功能编写，实现用户收支管理、查看收支、收支统计、退出登录四大功能。 |
| ManageActivity | 收支管理Activity，对用户的收入和支出进行管理。 |
| SearchRecordActivity | 查询收支Activity，通过条件对数据库中的数据进行查询，得出用户想要查询的收支结果。 |
| DBHelper | 创建数据库表和数据库数据，同时实现与数据库操作相关的登录和注册方法。 |
| User | 用户类Activity，用于获取用户ID以及密码。 |
（4）XML解读
解读完 Activity 类之后，现在来对 XML 的各个文件进行介绍。详情见下表👇
| 文件名 | 作用 |
|---|---|
| activity_main.xml | 用户登录页面，用户通过输入账号和密码，进行登录操作。 |
| activity_register.xml | 用户注册页面，用户通过输入账号和密码，进行注册操作。 |
| activity_user_center.xml | 个人中心页面，当用户登录成功以后，进行个人中心页面。个人中心实现收支管理、查看收支、收支统计、退出登录四大功能。 |
| activity_search_record.xml | 通过选择年份月份来进行查询该年该月份的各个收入支出详情，并且计算总金额以及根据类别来计算该类别的总金额。 |
| activity_manage.xml | 用户对自己的日常开销进行收支管理，可以进行添加、删除和修改等操作。 |
| record_item_layout.xml | 用来存储列表的传输数据 |
到这里，大家先对待会要编写的 Activity 类和 XML 文件所要展示的功能先进行一番了解。
2. 静态页面⌛
现在，我们到了真正的编码阶段啦！如果是按照我的编码习惯的话，我一般会先把静态页面进行构建，并把一些需要预留的id等等信息给先处理好，方便后面写业务逻辑时可以直接进行绑定。
针对以上6个静态页面，下面将进行代码编写。
（1）用户登录页面activity_main.xml
activity_main.xml 是用户登录页面，当用户通过输入账号和密码时，可以进行登录操作。具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/textView1"
android:layout_width="360dp"
android:layout_height="360dp"
android:gravity="center"
android:background="@drawable/login_logo"
android:textColor="#fff"
android:textSize="24dp"
android:layout_marginTop="-30dp"
android:layout_marginHorizontal="45dp"/>
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center|center_horizontal"
android:text="用户登录"
android:textColor="#5768C5"
android:textSize="20dp"
android:layout_marginTop="-60dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingHorizontal="20dp"
android:paddingVertical="10dp">
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="0"
app:srcCompat="@drawable/account" />
<EditText
android:id="@+id/edt_uid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:ems="10"
android:hint="请输入您的用户名"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal"
android:paddingHorizontal="20dp"
android:paddingVertical="10dp">
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="0"
app:srcCompat="@drawable/password" />
<EditText
android:id="@+id/edt_upwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="请输入您的密码"
android:inputType="textPassword" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingHorizontal="60dp">
<Button
android:id="@+id/btn_login"
android:layout_width="100dp"
android:layout_height="60dp"
android:layout_weight="1"
android:text="登录"
android:textSize="18dp"
app:backgroundTint="#4757AE"
app:cornerRadius="50dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/btn_register"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:text="还没有账号？现在注册"
android:textColor="#888282"
android:textColorHint="#FFFFFFFF"
android:backgroundTint="#FFFFFFFF"
android:color="#FFFFFF"
/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#FFFFFF"
android:layout_marginTop="-10dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
（2）用户注册页面activity_register.xml
activity_register.xml 是用户注册页面，用户通过输入账号和密码，可以进行注册操作。具体代码如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegisterActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/textView10"
android:layout_width="220dp"
android:layout_height="220dp"
android:background="@drawable/register_logo"
android:gravity="center"
android:textColor="#FFEB3B"
android:layout_marginBottom="20dp"/>
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="用户注册"
android:textColor="#0C6BC2"
android:textSize="22sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingHorizontal="20dp"
android:layout_marginTop="10dp">
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_weight="0"
android:text="账 号: "
android:textColor="#0C6BC2"
android:textSize="22sp" />
<EditText
android:id="@+id/edt_rid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="请输入需要注册的账号"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingHorizontal="20dp"
以上是关于10分钟手把手教你用Android手撸一个简易的个人记账App的主要内容，如果未能解决你的问题，请参考以下文章