10分钟手把手教你用Android手撸一个简易的个人记账App

Posted 2021-08-16 星期一研究室

用android手撸一个简易的个人记账系统

• ⛱️序言
• 📋一、系统结构设计Design
• • 1. 需求分析
  • 2. 数据库设计
  • 3. 界面设计
  • 4. 过程设计
• 📘二、编码阶段Coding
• • 1. 项目结构🗂️
  • • （1）文件目录
    • （2）AndroidManifest.xml
    • （3）Activity类解读
    • （4）XML解读
  • 2. 静态页面⌛
  • • （1）用户登录页面activity_main.xml
    • （2）用户注册页面activity_register.xml
    • （3）用户个人中心页面activity_user_center.xml
    • （4）用户搜索记录页面activity_search_record.xml
    • （5）收支管理页面activity_manage.xml
    • （6）列表数据记录record_item_layout.xml
  • 3. 逻辑结构💡
  • • （1）DBHelper类
    • （2）MainActivity类
    • （3）RegisterActivity类
    • （4）UserCenterActivity类
    • （5）SearchRecordActivity类
    • （6）ManageActivity类
    • （7）User类
• 🎵三、运行结果Result
• 📈四、结束语
• 🐣彩蛋 One More Thing
• • (:不合理设计
  • (:番外篇

⛱️序言

前段时间期末周，这学期有一门课叫移动应用开发，这门课的期末作业是用 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="请输入需要注册的账号"
                以上是关于10分钟手把手教你用Android手撸一个简易的个人记账App的主要内容，如果未能解决你的问题，请参考以下文章
 
 手把手带你10分钟手撸一个简易的Markdown编辑器
 手把手带你10分钟手撸一个简易的Markdown编辑器
 手把手教你用 Jenkins 构建 iOS 项目
 手把手教你用NDK9编译ffmpeg2.4.2
 手把手教你用AirtestIDE无线连接手机
 手把手教你用TensorFlowKeras打造美剧《硅谷》中的“识别热狗”APP