摘要：官方的設計規范文檔基于此找到在上的項目，完全符合的設計標準。該項目已經被收錄。現在四個按鈕分別為賬目圖表類別我的。的具體使用方法可以或百度了解，在這個需求下使用的子類結合其模式就可以輕松實現，并得到修改后的對象。

記賬軟件最準確的使用方式，是在花費后立即記賬，所以應用需要考慮單手操作下可以快捷地開始記賬操作，比如在右下角放置 floating button 來實現，并在其上增加類似小米懸浮球或印象筆記的效果，使得在記賬時可以快捷選擇記賬類別，提高記賬便利性；

應用需要有一個管理界面，用來編輯記錄的類別和類別對應的顏色；

增加微信第三方快捷登陸入口；

實現賬目、設置、配色、用戶信息云端同步；

在記賬頁面增加簡易計算器，便捷用戶操作；

使用自定義組件美化應用界面，并增加動畫；

新訂單的類型可以自定義設置，儲備常見圖標；

增加可拖拽更改順序的類別界面；

增加詞庫，自動將公交、打的、出租、高鐵等詞匯匯集為交通類，在圖表中展示。

一階主題色：#336799

二階主題色：#489ed8（基本色）

三階主題色：#34c5f3

四階主題色：#9ddbf0

7月27日

由于現有 Andoid 平臺上的記賬軟件，要么動畫不夠流暢，要么太過繁瑣，或者不太美觀，所以有了自己做記賬應用的想法。

7月28日

梳理需求與計劃，準備開始開發。

7月29日

開始實現底部導航欄部分。

google 官方的 bottom navigation 設計規范文檔：
https://material.google.com/c...

基于此找到在 github 上的項目 BottomBar，完全符合 material design 的設計標準。
https://github.com/roughike/B...

BottomBar 更加詳細的使用教程：
http://androidgifts.com/build...

類似印象筆記的 floating action button 實現方式基于 github 的 android floating action button 項目。該項目已經被 awesome android UI 收錄。
https://github.com/futuresimp...

google material design icon samples:
https://design.google.com/icons/

app launcher icon:

原始素材來自淘圖網，此 icon 經過適當編輯。

實現了底欄樣式，暫定如下：

7月30日

修改了底欄樣式，使其有底色、增加了一個類別按鈕。
現在四個按鈕分別為：賬目、圖表、類別、我的。

首先需要了解 floating action button 的使用方式，閱讀 github 項目 sample 中的源碼是非常有效的方式，很清楚。

在 runtime 中動態添加了三個按鈕，分別為餐飲、交通和其他，并完成了選色，配色方案如下：

#40c4ff
#FFAB40
#00E676
#4CAF50
#FF9800
#9E9E9E
#CDDC39
#7E57C2
#673AB7

效果圖：

四個按鈕分別為：賬目、圖表、類別、我的。
修改了賬目和圖表的 icon，使得四個 icons 都是沒有規則外框線的，更統一。

在實現的過程中遇到一個問題，icons 需要不同顏色怎么辦。

一方面后期用戶將可以自定義顏色，另一方面在 res 中放置大量的 icons 非常浪費空間。

那么這時候就需要用到 tint，但是 tint 只能在 API > 21 時才能使用，所以作罷。
tint 具體的使用方法請 google 或百度了解。

為了兼容性，我們需要使用相對更復雜但兼容性更好、功能更強大的 ColorFilter 來實現。

ColorFilter 的具體使用方法可以 google 或百度了解，在這個需求下使用 ColorFilter 的子類 PorterDuffColorFilter 結合其 PorterDuff.Mode.SRC_ATOP 模式就可以輕松實現，并得到修改后的 drawable 對象。
其中 PorterDuffColorFilter 類似 Photoshop 中的混合模式。

實現了在 runtime 中增加按鈕以及用 ColorFilter上色的代碼如下：

Drawable drawable;
ColorFilter colorFilter;    // 使用 ColorFilter 類完成 tint
floatingActionButton = new FloatingActionButton(getActivity());     // 新建一個 fab
floatingActionButton.setColorNormalResId(R.color.white);    // 設置常規色
floatingActionButton.setColorPressedResId(R.color.white_pressed);   // 設置按下時顏色
floatingActionButton.setTitle(getActivity().getString(R.string.others));    // 設置標題
drawable = ContextCompat.getDrawable(   // 為保證兼容性使用 ContextCompat
        getActivity(), R.drawable.ic_loyalty_black_24dp);   // 使用 getActivity() 獲取context
// 使用 PorterDuffColorFilter 的 SRC_ATOP 模式實現 tint 效果
colorFilter = new PorterDuffColorFilter(ContextCompat.getColor(getActivity(),
        R.color.deep_purple_400), PorterDuff.Mode.SRC_ATOP);
drawable.setColorFilter(colorFilter);   // drawable 應用 ColorFilter
floatingActionButton.setIconDrawable(drawable);
floatingActionsMenu.addButton(floatingActionButton);

8月1日

根據 google 官方的 Orthographic view of app structure 來進行 UI 微調：

并把 App 更名為水滴記賬，符合 icon 特征。

8月10日

各種 Material 顏色系統內本身就有內置

用 RecyclerView 來實現展示類別頁面

使用 RealmRecyclerViewAdapter 來實現 Adapter

編寫自定義圓形 ImageView 控件

自定義圓形 ImageView 見新寫的博文：