实战演练-家庭记账本（一）

在学习了Android studio的基本使用方法和了解了APP的基本结构后，准备开始开发一个家庭记账本app，就算是对假期学习的一个小小的总结。由于刚接触app方面的知识，所以目前只能开发出一个简单的app项目。

思路构想：用户打开app进入主页  app会显示当前所有的消费记录（以商品、购买日期、价格形式显示）。在此页面，用户点击添加按钮后会弹出一个文本框，用户可以依次输入购买的商品名，价格，选择购买日期。当用户选择“OK”，则确定添加，同时会回到主页，并刷新出用户所添加的信息。总的思路构想就是这些了。

下面是app的功能流程图：

 今天主要实现页面布局，效果图及代码如下：

首先需要在创建好的Basic Activity项目中修改已部署好的content_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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lv_main"/>

</androidx.constraintlayout.widget.ConstraintLayout>

1、主页面布局

 代码如下：在layout下创建list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="80dp">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:layout_alignParentLeft="true"
        android:gravity="center"
        android:singleLine="true"
        android:textSize="35sp"
        android:ellipsize="marquee"
        android:text="costTitle"/>


    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginLeft="15dp"
        android:gravity="center"
        android:layout_toRightOf="@id/tv_title"
        android:text="costDate"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_cost"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="3dp"
        android:gravity="center"
        android:text="30"
        android:textSize="30sp" />

</RelativeLayout>

2、弹出框布局  

 代码如下：在layout下创建new_cost_data.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/et_cost_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Cost Title"
        android:layout_margin="4dp"/>

    <EditText
        android:id="@+id/et_cost_money"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Cost Money"
        android:layout_margin="4dp"/>
    <DatePicker
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:id="@+id/dp_cost_date"
        android:datePickerMode="spinner"
        android:calendarViewShown="false"/>


</LinearLayout>

今天就完成到这儿，明天继续。。。。