功能分析

記賬 APP 需要有如下三個系統(tǒng)： 統(tǒng)計系統(tǒng)、記賬系統(tǒng)、用戶系統(tǒng)。

• 統(tǒng)計系統(tǒng)需要實現(xiàn)當月消費統(tǒng)計，包括收入、支出、結(jié)余等內(nèi)容， 并可以讓用戶通過可視化圖的方式清晰了解使用情況。
• 記賬系統(tǒng)需要實現(xiàn)記賬的操作，包括選擇賬 目類別、消費類型、金額、具體內(nèi)容等，還需要有用戶交互的過程，包括刪除、修改、查詢賬目的 功能。
• 用戶系統(tǒng)需要實現(xiàn)用戶信息的提取，使用 APP 的幫助界面，用戶資產(chǎn)管理，包括用戶賬戶余 額可視化查看，用戶賬戶管理，賬戶余額修改，并與記賬系統(tǒng)交互，根據(jù)賬目的修改和添加，實時進行反饋更新。

?Activity 設(shè)計

MainActivity 設(shè)計

MainActivity 包含側(cè)滑欄 SlidingPaneLayout，tabLayout 頂部標簽以及 3 個 Fragment：賬目 明細，月支出分類，資產(chǎn)管理。

• 側(cè)滑欄 SlidingPaneLayout 主要實現(xiàn)側(cè)滑菜單欄的效果，用于用戶系統(tǒng)。左滑出現(xiàn)該用戶界 面，包含用戶的頭像，介紹，賬戶，幫助，主題，退出的功能欄。為了便于用戶查看，可從主 界面中通過左滑或者點擊標題欄左側(cè)的圖標完成出現(xiàn)側(cè)滑欄功能。為了用戶視覺上的體驗，本 側(cè)滑欄帶有縮放的效果，并不會完全覆蓋主頁面。為了使布局更美觀用戶界面功能有對應(yīng)的圖 標，且用戶界面顏色與主界面的顏色系列保持一致。

• tabLayout 頂部標簽包括賬目明細，月支出分類，資產(chǎn)管理三個標簽，分別對應(yīng)三個 Fragment， 點擊選擇不同標簽會出現(xiàn)不同 Fragment。
• 賬目明細 Fragment 內(nèi)包含當月的收入、支出、結(jié)余，以及賬目明細的列表。該頁面底部還含 有 4 個按鈕，左一是選擇日期查看該日的賬目，左二是取消日期選擇，左三為顯示所有歷史賬目， 右一是添加賬目，每條賬目還可右滑進行修改和刪除操作。
• 月支出分類 Fragment 顯示當月支出不 同類型的金額餅狀圖，并會隨賬目明細的改變而改變。
• 資產(chǎn)管理 Fragment 顯示虛擬賬戶、現(xiàn)金、 銀行賬戶三種賬戶的資產(chǎn)情況，并用餅狀圖顯示，同時配置修改按鈕，修改資產(chǎn)情況。該 Fragment 會隨賬目明細的改變而改變。

?EditActivity 設(shè)計

EditActivity 用于添加以及編輯賬目，包括分類導航欄、類型選擇、時間選擇、輸入賬目名稱、 金額、賬戶。

分類導航欄中含有 16 種賬目類型可滑動翻頁查看，類型包括收入和支出，只能二選其一。 賬目名稱和金額有輸入框，點擊賬目類型會自動填充賬目名稱，也用戶可以做更改，自動填入可以使用戶的操作更簡單，并在點擊選擇賬目類型時底部彈出提示框。賬戶的選擇由滾動選擇器實 現(xiàn)。選擇之后按鈕文字會變成賬戶名稱，便于用戶查看。時間設(shè)有修改按鈕，點擊修改按鈕會出現(xiàn)日歷選擇時間，選擇后會實時更新日期。

數(shù)據(jù)結(jié)構(gòu)設(shè)計

• 賬戶數(shù)據(jù)：賬戶數(shù)據(jù)是 Account 類，包括賬戶名稱和賬戶余額，該類包含構(gòu)造函數(shù)，以及所有成員變量的設(shè)置和讀取方法。 設(shè)置 AccountData 類存放賬戶數(shù)據(jù)，包括數(shù)據(jù)文件名稱 AccountData，上下文 Context，以 Account 類為元素的列表 AccountList。該類包含構(gòu)造函數(shù)，保存數(shù)據(jù) savaData 方法，加載數(shù)據(jù) loadData 方法。
• 賬目數(shù)據(jù)：賬目數(shù)據(jù)是 Money 類，包括賬目名稱，賬目金額，類型圖片 ID，日期，收支類型，使用賬 戶六個成員變量。該類包含構(gòu)造函數(shù)，以及所有成員變量的設(shè)置和讀取方法。設(shè)置 DataBank 類存放賬目數(shù)據(jù)，包括數(shù)據(jù)文件名稱 data，上下文 Context，以 Money 類為 元素的列表,MoneyList。該類包含構(gòu)造函數(shù)，保存數(shù)據(jù) savaData 方法，加載數(shù)據(jù) loadData 方法。
• 分類匯總數(shù)據(jù)：分類匯總數(shù)據(jù)是 Classify_ItemInfo 類，包括類型名稱，分類 ID，金額 3 個成員變量。該類包含構(gòu)造函數(shù)，以及所有成員變量的設(shè)置和讀取方法。

相關(guān)實現(xiàn)技術(shù)

數(shù)據(jù)儲存

用戶資產(chǎn)和賬目都需要儲存。本項目運用內(nèi)部儲存的方法。

設(shè)備中每一個安裝的 App，系 統(tǒng)都會在內(nèi)部存儲空間的 data/data 目錄下以應(yīng)用包名為名字自動創(chuàng)建與之對應(yīng)的文件夾。本 APP 用 data 文件儲存賬目，Accoundata 文件儲存資產(chǎn)信息。使用類將數(shù)據(jù)操作封裝。

利用對象輸出流和輸入流，為應(yīng)用提供對象持久化的功能，分別調(diào)用文件輸出流和文件輸入流來實現(xiàn)。

• 加載數(shù)據(jù)用對象輸入流 ObjectInputStream，確保每次從流中讀取的對象能匹配 Java 虛擬機中已經(jīng)存在的類，讀取存放在數(shù)據(jù)區(qū)的文件使用 openFileInput。利用對象輸入流的方法 Object readObject()，從流中讀取一個對象數(shù)據(jù)，賦值給類的列表成員變量。完成讀取。
• 保存數(shù)據(jù)用對象輸出流 ObjectOutputStream，將對象數(shù)據(jù)寫入到文件。因為只有支持 Serializable 接口的對象支持寫入到流，每個序列化對象被編碼，所以需要將單條數(shù)據(jù)類 Account 和 Money 支持 Serializable 接口，即 class XXX implements Serializable{……}。寫入存放在數(shù)據(jù) 區(qū)的文件使用 openFileOutput。利用對象輸出流的方法 writeObject(Object obj)，將一個對象，此處為列表，寫入到流中。

用戶菜單側(cè)滑欄

本 APP 實現(xiàn)側(cè)滑用戶菜單欄的效果，主要利用 SlidingPaneLayout，該組件提供了一個水平的、多窗格的布局。其布局文件下面的第一個子控件是作為一個導航視圖(滑動后左邊視圖)，其余部分是內(nèi)容視圖。

• 新建一個視圖類 CusSlidingPaneLayout 繼承 SlidingPaneLayout。在 activity_main.xml 中把所有布局內(nèi)容放入 CusSlidingPaneLayout 類的布局中，并將第一個 Layout 設(shè)置成用戶菜單欄界面效果。
• 在 MainActivity 中的 MyFragmentAdpater 建立方法 initSlidingPaneLayout()，實現(xiàn)左側(cè)欄滑動時有一個縮放的效果。
• onPanelSlide 方法滑動窗格的位置更改時調(diào)用，設(shè)置側(cè)面欄縮放 setPivotX/Y、setScaleX/Y，設(shè)置首頁滑動時縮放 setScaleX/Y、setElevation。在 onPaneSlide 中有兩個參數(shù)，第一個參數(shù)是被移動的 view，第二個參數(shù)則是滑動時的偏移值，范圍是 0~1。
• 對一 個 View 設(shè)置縮放動畫時，縮放軸點默認是該 View 的中心點。改變縮放軸點位置需要通過 setPivotX/Y (float pivotX/Y)設(shè)置縮放軸點的坐標。再通過 setScaleX/Y 來實現(xiàn)最終的縮放效果。
• 實現(xiàn)直接通過點擊一個按鈕來打開左邊欄，這時需要自定義方法 forbidSlide(boolean isForbid)禁止 SlidingPaneLayout 滑動。響應(yīng)按鈕 mSlidingPaneLayout.openPane();出現(xiàn)用戶界面。

繪制餅狀圖

本 APP 使用 PieChart 組件繪制餅狀圖。

• 在 Fragment 的 xml 文件中添加 PieChart 控件，將 控件的形成封裝在方法 Cteatechart()中，獲取數(shù)據(jù)封裝在方法 initData_classify()和 initData_out() 中。
• 不同分類的總金額需要借用另一個類 Classify_ItemInfo，利用方法 initData_classify()初始化類，獲取所有的分類名稱和 ID，加入一個列表中。
• initData_out()方法用于遍歷賬目，選擇本月相應(yīng)分類的賬目金額累加進 Classify_ItemInfo 類相應(yīng) ID 的金額中。完成數(shù)據(jù)獲取。
• 繪制餅狀圖，新建一個 List列表，存放處理好的數(shù)據(jù)，只加入不等于 0 的數(shù)據(jù)， 設(shè) 置 顏 色 列 表 用 于 表 示 不 同 分 類 ， PieDataSet 、 PieData 結(jié) 合 起 來 用 于 存 放 數(shù) 據(jù) ，pc.setData(pieData);設(shè)置餅圖數(shù)據(jù)。數(shù)據(jù)設(shè)置完成。
• 完善餅圖的視覺效果，更改字體顏色，餅圖變?yōu)榭招膱A，放入標題字體(setCenterText)，設(shè) 置連接線描述分類及具體金額，更改餅圖大小(setExtraOffsets)，完善布局,調(diào)用 Legend 類型的各 種方法設(shè)置圖例(getLegend)。

RadioButton 單選

RadioButton 與 RadioGroup 結(jié)合使用，實現(xiàn)在多項中選取單項。

在布局文件中加入 RadioGroup 布局，在該布局下放兩個 RadioButton。

在 EditActivity 中獲取兩個按鈕，設(shè)置監(jiān)聽， 點擊的時候?qū)⒆兞康闹蒂x值為 0 或 1，用于后面判斷當前選擇的是收入還是支出。

Item 側(cè)滑修改刪除

利用封裝好的組件 SwipeDelMenuLayout 實現(xiàn)側(cè)滑，出現(xiàn)兩個 Button 分別為修改和刪除， 并響應(yīng)它們的點擊事件。

• 需要添加 JitPack 倉庫依賴，以及依賴庫 SwipeDelMenuLayout。
• 在賬目列表的 item 中使用 SwipeDelMenuLayout 布局，將 item 的內(nèi)容打包成一個布局放入該布局中， 并添加兩個按鈕。
• 在適配器MoneyListAdapter中MyViewHolder里添加獲取SwipeDelMenuLayout 布局，并響應(yīng)兩個 Button，添加和刪除。
• 用列表方法 remove 響應(yīng)刪除，并用 savaData 保存數(shù)據(jù)到數(shù)據(jù)文件，并調(diào)用函數(shù)更新顯示列表。
• 在點擊刪除后創(chuàng)建對話框提示刪除。
• 響應(yīng)編輯按鈕需要在兩個 Activity 中傳遞數(shù)據(jù)。本 APP 利用 intent 傳遞數(shù)據(jù)。新建 itent， 向 Intent 寫入數(shù)據(jù)，調(diào)用方法 putExtra()，將 key-value 寫入內(nèi)部 Bundle mExtras，方法中傳入名和值。然后啟動 EditActivity。

日期選擇

本 APP 用到 DatePicker 組件實現(xiàn)日期選擇功能。

• 新建日期選擇布局，在布局中放置 DatePicker，完成布局。
• 通過 Calendar 類型的 c.get(Calendar.XXX)函數(shù)在 EditActivity 的 onCreate 函數(shù)中獲取當前日期。連接獲取的日期，設(shè)置為默認的日期，并設(shè)置修改按鈕，響應(yīng)點擊事件， 新建對話框與含有 DatePicker 的 View 綁定。
• 響應(yīng) view 的確定按鈕，獲取當前選擇的年月日拼 接成字符串，傳送給類成員變量。完成日期選擇

查看指定賬目

有選擇日期查看和查看全部歷史賬目兩個功能。

• 選擇日期查看運用到日期選擇功能， 彈出對話框選擇日期，傳回主界面將 item 中符合日期條件的 item 篩選出來調(diào)用 holder. mSwipeMenuLayout.setVisibility(View.VISIBLE)顯示，調(diào)用 View.GONE 隱藏。
• 初始主頁面挑選 本月賬目顯示，若點擊歷史賬目會顯示全部賬目。同時設(shè)置取消選擇按鈕，將數(shù)據(jù)顯示恢復(fù)初始狀態(tài)。本功能通過設(shè)置兩個布爾值 flag 進行每個 item 顯示與否的判斷，以及相應(yīng)更改判斷規(guī)則。

賬戶選擇

利用自定義控件 PickerScrollView 實現(xiàn)滾動進行賬戶的選擇。

• 新建類 PickerScrollView，封 裝滾動選擇器的響應(yīng)方法和布局繪制。
• 新建類 CommonPopWindow，用于實現(xiàn) popupwindow， 封裝彈出框的布局和新建 Builder 類方法，繼承于 PopupWindow.OnDismissListener，設(shè)置布局情況實現(xiàn)動畫滑滾的效果，并獲取點擊事件。
• 在主頁面中點擊修改賬戶按鈕，調(diào)用方法 setAddressSelectorPopup(view);出現(xiàn)選擇器，getChildView 用于設(shè)置默認數(shù)據(jù)以及滾動監(jiān)聽。
• 數(shù)據(jù)的設(shè)置直接從主頁面加載 Account 類的數(shù)據(jù)，將其賬戶名稱放入滑滾器中。
• 最后新建布局文件，放入兩個textview提示，并放入自定義的視圖類com.jnu.moneykeep.money.PickerScrollView。

賬目 item 布局美化

賬目 item 的顯示需要根據(jù)用戶的需求進行強調(diào)和區(qū)分顯示。

• 對金額和賬目名稱用大字體加粗(textStyle="bold")顯示，對于賬目的一些詳細信息使用小字體，并用不同字體顏色進行信息區(qū)分。
• 收入顯示為綠色，支出顯示為黑色。在顯示時對每條 item 進行支出收入類型判斷，并 根據(jù)判斷設(shè)置不同的字體顏色(holder.getTextViewXXX().setTextColor)。
• 在 item 之間繪制分割線以及預(yù)留一定的間隔使界面看起來更美觀。繪制分割線，直接在 RecyclerView 設(shè)置布局管理 器（setLayoutManager）的同時使用下面一行代碼添加分割線，使用代碼 addItemDecoration(new DividerItemDecoration(mainRecyclerView.getContext(), DividerItemDecoration.VERTICAL));繪制分割線。在布局文件 style 中修改分割線的樣式。

本月賬目情況

本月賬目情況包括收入、支出、結(jié)余。

• 獲取當前的年份和月份，與每個 item 比對，找到當前月份的 item，將其區(qū)分為收入和支出，分別相加。并根據(jù)刪除或修改的賬目實時更新匯總內(nèi)容。計算得到月收入和月支出后，用月收入-月支出得到結(jié)余，也需要及時更新。

item 按日期排序

• 在賬目類 Money 中重載函數(shù) Comparable，重載方法 compareTo，compareTo()返回值大于 0 表示前一個數(shù)據(jù)比后一個數(shù)據(jù)大， 0 表示相等，小于 0 表示前一個數(shù)據(jù)小于后一個數(shù)據(jù)，相等時會走到 equals()。
• 格式化日期為"yyyy 年 MM 月 dd 日"，再進行比對。
• 在每次顯示賬 目的 fragment 更新時都調(diào)用 Collections.sort(MoneyList);這個方法為列表值排序。
• 為了方便用戶查看最近的賬目，需要對賬目進行降序排列，故傳入 Collections.reverseOrder(), 返回一個倒敘的 Comparator 對象。

賬目類型分類導航欄

實現(xiàn)原理是一個 viewpager 嵌套一個 gridview。

• 創(chuàng)建一個 gridview 布局文件，在其中放 置 GridView 布局，并在主布局中添加 viewpager(android.support.v4.view.ViewPager)。
• 為了代碼簡潔，需要新建資源文件 arrays.xml，將圖片的文字和圖片放到 arrays.xml 中的數(shù)組。
• 新建一個 類 Classify_ItemInfo 存放圖片和文字信息。 初始化數(shù)據(jù) gridview 和 viewpager。
• 綁定布局，通過 inflate 加載 gridview 的布局，初始化 gridview 的控件并綁定，為 gridview 設(shè)置適配器，往 list 集合里添加 gridview，為 viewpager 設(shè) 置適配器。
• 設(shè)置兩個 pagerView 和兩個 GridView，實現(xiàn)翻頁顯示功能。
• 獲取 arrays.xml 中的數(shù)據(jù)。從 arrays.xml 文件中通過 getResources().getStringArray 和 obtainTypedArray，拿到對應(yīng)的圖片和文字后，通過 for 循環(huán)遍歷分類的圖片和文字信息，添加 判斷條件，<8 則添加進 OneData，其他添加進 TwoData。
• 設(shè)置適配器。viewPager 適配器中添加構(gòu)造函數(shù)和相應(yīng)的方法，Gridview 適配器中添加 View getView 方法，實現(xiàn)加載 gridView 中的子布局，初始化控件，為 gridView 子布局布局中添加圖片和文字。

測試及使用說明

主界面

• 主界面頂部有圖標，點擊出現(xiàn)用戶菜單欄。有三個標簽，主頁面為賬目明細頁面。

• ?每條賬目還可右滑，出現(xiàn)刪除和編輯按鈕，可進行相應(yīng)功能，刪除時出現(xiàn)提示框如圖 5。

• ?右一為增加賬目功能。底部左一為選擇日期顯示該日期的賬目，左二為取消選擇按鈕，點擊將頁面顯示條目恢復(fù)為默認狀態(tài)。

• ?歷史查看可顯示所有時間的賬目。

添加賬目

點擊主頁面底部加號，進入添加賬目頁面。頂部是一個分類頁面，擁有兩頁分類可滑動， 點擊分類后出現(xiàn)提示框，并自動填充項目名稱。

文章來源地址http://www.zghlxwxcb.cn/news/detail-401459.html

?開發(fā)參考

• 本APP gitee 地址：https://gitee.com/gulaks/Moneykeep
• 其他參考網(wǎng)址：
  • 分類導航欄：https://www.freesion.com/article/6375976829/ item
  • 左滑：https://blog.csdn.net/zhaihaohao1/article/details/80774749
  • 單選按鈕：https://blog.csdn.net/qq_28057577/article/details/52121977
  • 右滑用戶欄：https://zhuanlan.zhihu.com/p/234598182
  • 帶輸入對話框：https://blog.csdn.net/bingqingsuimeng/article/details/51433998
  • 選擇顯示：https://blog.csdn.net/weixin_41654311/article/details/102989131

到了這里，關(guān)于基于Android Studio的記賬類app開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！