Android记账本开发（一）：整体UI界面布局
<p>今天开始进行记账本的开发。</p><p>主要想法表述：</p>
<p> 1、与用户界面交互的主要有三个界面，总资金管理，收入界面管理，支出管理。</p>
<p> 2、实现登录注册功能，在数据库中不同用户有着不同的数据记录。</p>
<p>其他细节在具体开发中进行实现。</p>
<p>今天实现的几个Activity和Fragment的布局界面设计，没有内部逻辑，简单实现UI界面。</p>
<p>首先，Android Studio为我们提供了一种比较好用的抽屉模板Activity，我们可以使用它方便的实现UI界面的设计。</p>
<p>我们可以直接新建navigation drawer activity来使用这种Activity。</p>
<p>根据这个模板，把抽屉栏样式设定成记账本，如下效果：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1717560/202002/1717560-20200212170933474-800627018.png" alt="" width="286" height="505"></p>
<p> 预期每一个都是一个功能模块，之后实现Activity的跳转。</p>
<p>之后是主界面的设计，使用3个Fragment完成summary、income和outlay的界面布局。</p>
<p>在content_main.xml中，完成3个fragment的切换。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><?</span><span style="color: rgba(255, 0, 255, 1)">xml version="1.0" encoding="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">?></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">RelativeLayout </span><span style="color: rgba(255, 0, 0, 1)">xmlns:android</span><span style="color: rgba(0, 0, 255, 1)">="http://schemas.android.com/apk/res/android"</span><span style="color: rgba(255, 0, 0, 1)">
xmlns:app</span><span style="color: rgba(0, 0, 255, 1)">="http://schemas.android.com/apk/res-auto"</span><span style="color: rgba(255, 0, 0, 1)">
xmlns:tools</span><span style="color: rgba(0, 0, 255, 1)">="http://schemas.android.com/tools"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_width</span><span style="color: rgba(0, 0, 255, 1)">="match_parent"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_height</span><span style="color: rgba(0, 0, 255, 1)">="match_parent"</span><span style="color: rgba(255, 0, 0, 1)">
app:layout_behavior</span><span style="color: rgba(0, 0, 255, 1)">="@string/appbar_scrolling_view_behavior"</span><span style="color: rgba(255, 0, 0, 1)">
android:id</span><span style="color: rgba(0, 0, 255, 1)">="@+id/layoutContent"</span><span style="color: rgba(255, 0, 0, 1)">
tools:showIn</span><span style="color: rgba(0, 0, 255, 1)">="@layout/app_bar_main"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)">主界面的内容</span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">androidx.viewpager.widget.ViewPager
</span><span style="color: rgba(255, 0, 0, 1)">android:id</span><span style="color: rgba(0, 0, 255, 1)">="@+id/viewpager"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_width</span><span style="color: rgba(0, 0, 255, 1)">="match_parent"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_height</span><span style="color: rgba(0, 0, 255, 1)">="match_parent"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_above</span><span style="color: rgba(0, 0, 255, 1)">="@id/navigation"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">androidx.viewpager.widget.ViewPager</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">com.google.android.material.bottomnavigation.BottomNavigationView
</span><span style="color: rgba(255, 0, 0, 1)">android:id</span><span style="color: rgba(0, 0, 255, 1)">="@+id/navigation"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_width</span><span style="color: rgba(0, 0, 255, 1)">="match_parent"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_height</span><span style="color: rgba(0, 0, 255, 1)">="wrap_content"</span><span style="color: rgba(255, 0, 0, 1)">
android:background</span><span style="color: rgba(0, 0, 255, 1)">="?android:attr/windowBackground"</span><span style="color: rgba(255, 0, 0, 1)">
android:layout_alignParentBottom</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(255, 0, 0, 1)">
app:menu</span><span style="color: rgba(0, 0, 255, 1)">="@menu/navigation"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">com.google.android.material.bottomnavigation.BottomNavigationView</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">RelativeLayout</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>其中navigation是自定义的menu文件。</p>
<p>效果如下 <img src="https://img2018.cnblogs.com/i-beta/1717560/202002/1717560-20200212171943227-2089342208.png" alt="" width="299" height="524"></p>
<p> 并分别创建SummaryFragment、IncomeFragment和OutlayFragment，对应下方的三个图标。</p>
<p>今天不进行内部逻辑的编写，故主要将前端界面大体描绘了一下，后期再添加细节。</p>
<p>对于收入支出，主要思路是用listView展现出来，但内容来自数据库，故此处只将测试内容编写，之后再改即可。</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1717560/202002/1717560-20200212173354049-185191859.png" alt="" width="280" height="510"><img src="https://img2018.cnblogs.com/i-beta/1717560/202002/1717560-20200212173410313-1715520227.png" alt="" width="280" height="510"><img src="https://img2018.cnblogs.com/i-beta/1717560/202002/1717560-20200212173428823-458226263.png" alt="" width="279" height="512"></p>
<p> 本次完成了整体上记账本的应用布局及界面设计，后期还会做出很多修改。</p><br><br>
来源：https://www.cnblogs.com/dongao/p/12299103.html
頁:
[1]