快速动手，10分钟带你轻松制作Android版简单个人记账应用教程

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

⛱️序言

前段时间期末周，这学期有一门课叫移动应用开发，这门课的期末作业是用 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"
            android:layout_marginVertical="15dp">

            <TextView
                android:id="@+id/textView8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="密  码:  "
                android:textColor="#0C6BC2"
                android:textSize="22sp" />

            <EditText
                android:id="@+id/edt_rpwd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:ems="10"
                android:hint="请输入密码"
                android:inputType="textPassword" />
        </LinearLayout>

        <Button
            android:id="@+id/btn_registeruser"
            android:layout_width="260dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginVertical="20dp"
            android:background="#2D6C2F"
            android:gravity="center"
            android:text="注册"
            android:textSize="22sp"
            app:backgroundTint="#1C8DE6" />

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

（3）用户个人中心页面activity_user_center.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=".UserCenterActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:orientation="horizontal"
            android:gravity="center">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="60dp"
                android:layout_height="60dp"
                app:srcCompat="@drawable/girl"
                android:layout_marginHorizontal="30dp"/>

            <TextView
                android:id="@+id/tv_welcome"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center|left"
                android:textColor="#4F92CF"
                android:textSize="24sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_horizontal"
            android:layout_marginTop="40dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="20dp"
                android:background="#FFFFFF"
                android:gravity="center_horizontal"
                android:orientation="vertical"
                android:padding="24dp"
                android:elevation="10dp"
                app:cornerRadius="30dp">

                <ImageView
                    android:id="@+id/btn_recordmanage"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    app:srcCompat="@drawable/revenue" />

                <TextView
                    android:id="@+id/textView17"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="收支管理"
                    android:textColor="#252020"
                    android:textSize="18sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                android:layout_marginHorizontal="20dp"
                android:background="#FFFFFF"
                android:padding="24dp"
                android:elevation="10dp"
                app:cornerRadius="30dp">

                <ImageView
                    android:id="@+id/btn_searchrecord"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    app:srcCompat="@drawable/look" />

                <TextView
                    android:id="@+id/textView22"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="查看收支"
                    android:textColor="#FF252020"
                    android:textSize="18sp"
                    android:layout_marginTop="20dp"/>
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_horizontal"
            android:layout_marginVertical="30dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                android:layout_marginHorizontal="20dp"
                android:background="#FFFFFF"
                android:padding="24dp"
                android:elevation="10dp"
                app:cornerRadius="30dp">

                <ImageView
                    android:id="@+id/btn_exit"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    app:srcCompat="@drawable/exit" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="退出登录"
                    android:textColor="#FF252020"
                    android:textSize="18sp"
                    android:layout_marginTop="20dp"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal"
                android:layout_marginHorizontal="20dp"
                android:background="#FFFFFF"
                android:padding="24dp"
                android:elevation="10dp"
                app:cornerRadius="30dp">

                <ImageView
                    android:id="@+id/btn_calcmoney"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    app:srcCompat="@drawable/statics" />

                <TextView
                    android:id="@+id/textView23"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="收支统计"
                    android:textColor="#FF252020"
                    android:textSize="18sp"
                    android:layout_marginTop="20dp"/>
            </LinearLayout>
            
        </LinearLayout>
        
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

（4）用户搜索记录页面activity_search_record.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="wrap_content"
    tools:context=".SearchRecordActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_marginTop="50dp"
            android:layout_marginBottom="10dp">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="120dp"
                android:layout_height="120dp"
                app:srcCompat="@drawable/income_2" />

            <TextView
                android:id="@+id/textView20"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="我的收支"
                android:textColor="#3F51B5"
                android:textSize="20sp"
                android:layout_marginTop="10dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginHorizontal="24dp"
            android:layout_marginTop="30dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/textView33"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:text="日期  "
                    android:gravity="center_vertical"
                    android:textColor="#111113"
                    android:textSize="18sp" />

                <TextView
                    android:id="@+id/textView34"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:text="类型  "
                    android:gravity="center_vertical"
                    android:textColor="#FF111113"
                    android:textSize="18sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_weight="1"
                android:orientation="vertical">

                <Spinner
                    android:id="@+id/spin_date"
                    android:layout_width="match_parent"
                    android:layout_height="50dp" />

                <Spinner
                    android:id="@+id/spin_type"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:gravity="center_vertical">

                <Button
                    android:id="@+id/btn_search"
                    android:layout_width="60dp"
                    android:layout_height="40dp"
                    android:background="#39DC54"
                    android:text="搜索"
                    android:textColor="#FAF9F9"
                    android:textSize="12sp"
                    app:backgroundTint="#5E97DA" />
            </LinearLayout>
        </LinearLayout>

        <ImageView
            android:layout_width="360dp"
            android:layout_height="0.5dp"
            android:background="#D1CDCD"
            android:layout_gravity="center"
            android:paddingHorizontal="24dp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:layout_marginHorizontal="24dp">

            <TextView
                android:id="@+id/textView32"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:text="总金额  "
                android:gravity="center_vertical"
                android:textColor="#FF111113"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/tv_show"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:textColor="#4CAF65"
                android:textSize="24sp"
                android:gravity="center_vertical"/>

            <Button
                android:id="@+id/btn_calc"
                android:layout_width="60dp"
                android:layout_height="40dp"
                android:gravity="center_vertical"
                android:text="计算"
                android:textColor="#FAF9F9"
                android:textSize="12sp"
                
																				

						

							上一篇：							
								快速搭建手机网页应用：无需专业设计，仅用Vue + Element-ui							
						
						

							下一篇：							
								手机应用专属设计开发的益处与优点							
						
					
															

						

							推荐阅读						
						

														

								
									

										快速动手，10分钟带你轻松制作Android版简单个人记账应用教程