家庭记账本（一）页面绘制

　　主页面用来显示记录过的账单信息，可以用一个ListView来装这些信息。另外在ListView中我们可以使用一个头部。

　　具体的activity_main代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:id="@+id/main_top_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:padding="10dp"
            android:textStyle="bold"
            android:textSize="18sp"
            android:textColor="@color/black"/>

        <ImageView
            android:id="@+id/main_iv_search"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@mipmap/search"
            android:layout_alignParentRight="true"
            android:padding="10dp"/>
    </RelativeLayout>

    <ListView
        android:id="@+id/main_lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/main_top_layout"
        android:padding="10dp"
        android:divider="@null"
        android:dividerHeight="6dp"
        android:scrollbars="none"
        android:background="@color/grey"/>

    <ImageButton
        android:id="@+id/main_btn_more"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@mipmap/ic_other"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="20dp"
        android:background="@drawable/main_morebtn_bg"
        android:onClick="onBtnClick"/>

    <Button
        android:id="@+id/main_btn_record"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignBottom="@id/main_btn_more"
        android:layout_toLeftOf="@id/main_btn_more"
        android:text="@string/editone"
        android:textColor="@color/white"
        android:textStyle="bold"
        android:gravity="center"
        android:background="@drawable/main_recordbtn_bg"
        android:padding="5dp" />
</RelativeLayout>

　　在layout中新建一个item_mainlv_top.xml来设计ListView的头部。具体代码如下：

<?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:layout_height="match_parent"
    android:background="@color/grey">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:padding="20dp">

        <TextView
            android:id="@+id/item_mainlv_top_tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="本月支出"/>
        <TextView
            android:id="@+id/item_mainlv_top_out"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:layout_below="@id/item_mainlv_top_tv1"
            android:textSize="26sp"
            android:textStyle="bold"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:textColor="@color/black"/>

        <ImageView
            android:id="@+id/item_mainlv_top_iv_hide"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_alignTop="@id/item_mainlv_top_out"
            android:layout_alignParentRight="true"
            android:layout_marginTop="-17dp"
            android:layout_marginRight="82dp"
            android:layout_marginBottom="60dp"
            android:src="@mipmap/ic_show" />

        <TextView
            android:id="@+id/item_mainlv_top_tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="本月收入"
            android:layout_below="@id/item_mainlv_top_out"/>

        <TextView
            android:id="@+id/item_mainlv_top_tv_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="100000"
            android:textColor="@color/black"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@id/item_mainlv_top_tv2"
            android:layout_below="@id/item_mainlv_top_out"/>

        <TextView
            android:id="@+id/item_mainlv_top_tv_budget"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textColor="@color/black"
            android:layout_marginRight="50dp"
            android:layout_alignParentRight="true"
            android:layout_alignBottom="@id/item_mainlv_top_tv2"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/item_mainlv_top_tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="预算剩余"
            android:layout_toLeftOf="@id/item_mainlv_top_tv_budget"
            android:layout_alignBottom="@id/item_mainlv_top_tv2"/>

        <TextView
            android:id="@+id/item_mainlv_top_tv4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="查看图标分析"
            android:layout_below="@id/item_mainlv_top_tv2"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"/>
    </RelativeLayout>

    <TextView
        android:id="@+id/item_mainlv_top_tv_day"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="今日支出 0 收入 0"
        android:textStyle="bold"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"/>
</LinearLayout>

　　在layout中新建item_mainlv.xml设计ListView中的账单信息，我们只需要写一条样式即可。具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:padding="10dp"
    android:background="@color/white">

    <ImageView
        android:id="@+id/item_mainlv_iv"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:src="@mipmap/ic_fruit_selected"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/item_mainlv_iv"
        android:layout_marginLeft="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/item_mainlv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="水果"
            android:textStyle="bold"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/item_mainlv_tv_mark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="水果"
            android:textSize="12sp"
            android:layout_marginTop="5dp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/item_mainlv_tv_money"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="25.0"
            android:textStyle="bold"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/item_mainlv_tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="今天 18:10"
            android:textSize="12sp"
            android:layout_marginTop="5dp"/>
    </LinearLayout>
</RelativeLayout>

　　在记录页面中，我们使用tab标签进行分页。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="@color/grey">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <ImageView
            android:id="@+id/record_iv_back"
            android:layout_width="45dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/ih_error"
            android:layout_marginLeft="5dp"
            android:onClick="onClick"/>
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/record_tabs"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            app:tabGravity="center"
            app:tabMode="fixed"
            app:tabTextColor="@color/grey_7D7D7D"
            app:tabSelectedTextColor="@color/black"
            app:tabIndicatorColor="@color/black"/>
    </RelativeLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/record_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

　　ViewPager可以显示分页中的不同页面。我们可以使用fragment进行装载这些页面。

　　那么新建一个IncomeFragment和一个OutcomeFragment

　　在fragment_outcome.xml中，头部显示所选择的类别以及可以编辑的EditText用来输入账单的金额；中间部分使用GridView来显示可供选择的类别；底部有备注与时间，另外还有一个自定义的软键盘。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey">

    <RelativeLayout
        android:id="@+id/grag_record_r1_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:padding="10dp">

        <ImageView
            android:id="@+id/frag_record_iv"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@mipmap/ic_other" />

        <TextView
            android:id="@+id/frag_record_tv_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="其他"
            android:textSize="16sp"
            android:textStyle="bold"
            android:layout_toRightOf="@id/frag_record_iv"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"/>

        <EditText
            android:id="@+id/frag_record_et_money"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:inputType="number"
            android:background="@color/white" />
    </RelativeLayout>

    <View
        android:id="@+id/frag_record_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/grag_record_r1_top"
        android:background="@color/grey_7D7D7D"/>

    <GridView
        android:id="@+id/frag_record_gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/frag_record_line"
        android:background="@color/white"
        android:numColumns="4"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"/>

    <!--自定义软键盘-->
    <android.inputmethodservice.KeyboardView
        android:id="@+id/frag_record_keyboard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:keyBackground="@color/grey"
        android:keyTextColor="@color/black"
        android:focusableInTouchMode="true"
        android:focusable="true"
        android:layout_alignParentBottom="true"
        android:paddingTop="1dp"
        android:shadowColor="@color/white"
        android:shadowRadius="0.0"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:layout_above="@id/frag_record_keyboard">

        <TextView
            android:id="@+id/frag_record_tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2021.02.26 15:58"
            android:layout_alignParentRight="true"
            android:padding="10dp"/>

        <TextView
            android:id="@+id/frag_record_tv_mark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="添加备注"
            android:layout_toLeftOf="@id/frag_record_tv_time"
            android:padding="10dp"/>
    </RelativeLayout>

</RelativeLayout>

　　这样我们基本的界面绘制完成。