Android记账本开发(一):整体UI界面布局

今天开始进行记账本的开发。

主要想法表述:

  1、与用户界面交互的主要有三个界面,总资金管理,收入界面管理,支出管理。

  2、实现登录注册功能,在数据库中不同用户有着不同的数据记录。

其他细节在具体开发中进行实现。

今天实现的几个Activity和Fragment的布局界面设计,没有内部逻辑,简单实现UI界面。

首先,Android Studio为我们提供了一种比较好用的抽屉模板Activity,我们可以使用它方便的实现UI界面的设计。

我们可以直接新建navigation drawer activity来使用这种Activity。

根据这个模板,把抽屉栏样式设定成记账本,如下效果:

 预期每一个都是一个功能模块,之后实现Activity的跳转。

之后是主界面的设计,使用3个Fragment完成summary、income和outlay的界面布局。

在content_main.xml中,完成3个fragment的切换。

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/layoutContent"
    tools:showIn="@layout/app_bar_main">
<!--主界面的内容-->

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

    </androidx.viewpager.widget.ViewPager>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation">

    </com.google.android.material.bottomnavigation.BottomNavigationView>

</RelativeLayout>

其中navigation是自定义的menu文件。

效果如下   

 并分别创建SummaryFragment、IncomeFragment和OutlayFragment,对应下方的三个图标。

今天不进行内部逻辑的编写,故主要将前端界面大体描绘了一下,后期再添加细节。

对于收入支出,主要思路是用listView展现出来,但内容来自数据库,故此处只将测试内容编写,之后再改即可。

 本次完成了整体上记账本的应用布局及界面设计,后期还会做出很多修改。

posted @ 2020-02-12 20:19  大雪初晴丶  阅读(1589)  评论(0编辑  收藏  举报