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

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

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

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

實現(xiàn)賬目、設(shè)置、配色、用戶信息云端同步；

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

使用自定義組件美化應(yīng)用界面，并增加動畫；

新訂單的類型可以自定義設(shè)置，儲備常見圖標(biāo)；

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

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

一階主題色：#336799

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

三階主題色：#34c5f3

四階主題色：#9ddbf0

7月27日

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

7月28日

梳理需求與計劃，準(zhǔn)備開始開發(fā)。

7月29日

開始實現(xiàn)底部導(dǎo)航欄部分。

google 官方的 bottom navigation 設(shè)計規(guī)范文檔：
https://material.google.com/c...

基于此找到在 github 上的項目 BottomBar，完全符合 material design 的設(shè)計標(biāo)準(zhǔn)。
https://github.com/roughike/B...

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

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

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

app launcher icon:

原始素材來自淘圖網(wǎng)，此 icon 經(jīng)過適當(dāng)編輯。

實現(xiàn)了底欄樣式，暫定如下：

7月30日

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

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

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

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

效果圖：

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

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

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

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

為了兼容性，我們需要使用相對更復(fù)雜但兼容性更好、功能更強(qiáng)大的 ColorFilter 來實現(xiàn)。

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

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

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

8月1日

根據(jù) google 官方的 Orthographic view of app structure 來進(jìn)行 UI 微調(diào)：

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

8月10日

各種 Material 顏色系統(tǒng)內(nèi)本身就有內(nèi)置

用 RecyclerView 來實現(xiàn)展示類別頁面

使用 RealmRecyclerViewAdapter 來實現(xiàn) Adapter

編寫自定義圓形 ImageView 控件

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