家庭记账本1

从今天开始打算完成一个Android开发的小型家庭记账本。

首先打算确立它的基本功能：

• 点击添加按钮，可以出现填写界面，提交后将信息保存起来，并能显示出来。
• 填写界面包含金额、日期（可以进行选择）、类型（支出或收入）、详情，以及一个提交按钮
• 可以选择删除某一条记录

功能比较简单，如有机会以后打算再进行功能的扩充。

接下来要知道完成这些功能需要涉及到哪些知识：

页面的基本布局、ListView的使用、SQLite数据库的基本操作、Dialog对话框、按钮的点击事件、单选框的使用、自动获取系统时间等

首先进行一些必要的UI布局

1、布局activity_main.xml

在这个页面内我需要一个添加信息的按钮，一个展示信息的listview空间

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:padding="5dp"
    tools:context=".MainActivity"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/mtitle"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="家庭记账本"
        android:textSize="20sp"
        android:gravity="center"
        android:background="@drawable/bg_title" />

    <ListView
        android:id="@+id/lv_money"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/mtitle"/>


    <Button
        android:id="@+id/add"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@+id/mtitle"
        android:layout_marginTop="500dp"
        android:background="@drawable/bg_circle" <!--这里为了美观我把添加按钮设置成圆形按钮 -->
        android:drawableLeft="@drawable/icon_add"  <!--在一个圆形组件上添加了一个加号图片-->
        android:layout_marginLeft="80dp"
        android:layout_centerInParent="true"
        android:paddingLeft="10dp"/>



</RelativeLayout>

 样式：

当我们想要为某些UI组件设计样式（例如EditView的圆角、背景颜色；TextView的背景颜色；按钮的样式和颜色等），我们可以通过写布局文件来设置

通常我们在project-src-main-res下面new一个Directory，名为drawable-xxhdpi，用于存放项目中需要用到的图片，在res-drawable下面存放项目中用到的布局文件

例如，上述代码中的 bg_circle.xml（圆形组件）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_pressed="true">
                <shape android:shape="oval">
                    <corners
                        android:bottomLeftRadius="70dp"
                        android:bottomRightRadius="70dp"
                        android:topLeftRadius="0dp"
                        android:topRightRadius="0dp"
                        >
                    </corners>
                    <solid android:color="#fffdfd" />
                </shape>
            </item>

            <item>
                <shape android:shape="oval">
                    <corners
                        android:bottomLeftRadius="0dp"
                        android:bottomRightRadius="0dp"
                        android:topLeftRadius="20dp"
                        android:topRightRadius="20dp"
                        >
                    </corners>
                    <solid android:color="#00ccff" />

                </shape>

            </item>

        </selector>

    </item>

</layer-list>

icon_add（放在project-src-main-res-drawable-xxhdpi）

这里推荐一个图标库，有各种好看常用的图标（下载PNG格式即可）

iconfont——阿里巴巴矢量图标库

2、布局activity_add.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="400dp"
    android:paddingTop="20dp">

    <EditText
        android:id="@+id/et_money"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:textColor="#008B00"
        android:hint="请输入金额"
        android:background="@drawable/bg_frame"  <!--EditView的样式-->
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginHorizontal="10dp"
        android:maxLines="1"
        android:drawableRight="@drawable/icon_money"/>  <!--插入的图标-->

    <EditText
        android:id="@+id/et_date"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:textColor="#008B00"
        android:hint="请选择日期"
        android:background="@drawable/bg_frame"  <!--EditView的样式-->
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginHorizontal="10dp"
        android:maxLines="1"
        android:layout_below="@+id/et_money"
        android:layout_marginTop="10dp"
        android:drawableRight="@drawable/icon_calendar"/>  <!--插入的图标-->

    <TextView
        android:id="@+id/text"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_date"
        android:layout_marginTop="5dp"
        android:paddingLeft="15dp"
        android:text="请选择类型"
        android:textSize="18sp" />

    <RadioGroup
        android:id="@+id/typegroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@+id/et_date"
        android:paddingTop="3dp"
        >

        <RadioButton
            android:id="@+id/zhichu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="支出"
            android:textSize="18sp"
            android:layout_marginLeft="120dp" />

        <RadioButton
            android:id="@+id/shouru"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="收入"
            android:textSize="18sp"
            android:layout_marginLeft="3dp"/>

    </RadioGroup>

    <EditText
        android:id="@+id/et_title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:textColor="#008B00"
        android:hint="请输入描述"
        android:background="@drawable/bg_frame"  <!--EditView的样式-->
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginHorizontal="10dp"
        android:maxLines="1"
        android:layout_below="@+id/typegroup" 
        android:layout_marginTop="10dp"/>

    <Button
        android:id="@+id/tijiao"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_below="@+id/et_title"
        android:layout_marginTop="10dp"
        android:text="提交"
        android:textSize="20sp"
        android:background="@drawable/bg_tijiao" <!--Button的样式-->
        android:layout_marginHorizontal="10dp"
        android:layout_marginBottom="20dp"/>

</RelativeLayout>

 **注：当你发现你设置的颜色无法展示出来，可以在app-src-main-res-values-themes.xml中找到

  <style name="Theme.Money" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

将其修改为

<style name="Theme.Money" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">

涉及到的布局文件（可参考）

bg_frame.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#999999"/>

    <corners
        android:radius="5dp"/>
</shape>

bg_tijiao.xml （这里为提交按钮设置了一个颜色的变化）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"> <!--当按钮被按压时实行一些样式-->
        <shape>
            <solid android:color="#99FF33"/>
            <corners android:radius ="5dp" />
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#CCFF99"/>
            <corners android:radius ="5dp" />
        </shape>
    </item>
</selector>

bg_title.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    android:shape="rectangle">
    <solid
        android:color="#ffff33"/>
    <corners
        android:radius="5dp"/>
</shape>