Android — 我的簡潔記帳本項目開發日誌

一期項目計劃

1. 記帳軟件最準確的使用方式，是在花費後當即記帳，因此應用須要考慮單手操做下能夠快捷地開始記帳操做，好比在右下角放置 floating button 來實現，並在其上增長相似小米懸浮球或印象筆記的效果，使得在記帳時能夠快捷選擇記帳類別，提升記帳便利性；

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

二期項目計劃

1. 增長微信第三方快捷登錄入口；

2. 實現帳目、設置、配色、用戶信息雲端同步；

3. 在記帳頁面增長簡易計算器，便捷用戶操做；

4. 使用自定義組件美化應用界面，並增長動畫；

5. 新訂單的類型能夠自定義設置，儲備常見圖標；

6. 增長可拖拽更改順序的類別界面；

7. 增長詞庫，自動將公交、打的、出租、高鐵等詞彙聚集爲交通類，在圖表中展現。

配色方案

1. 一階主題色：#336799

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

3. 三階主題色：#34c5f3

4. 四階主題色：#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 中動態添加了三個按鈕，分別爲餐飲、交通和其餘，並完成了選色，配色方案以下：

<color name="light_blue_accent_200">#40c4ff</color>
<color name="orange_accent_200">#FFAB40</color>
<color name="green_accent_400">#00E676</color>
<color name="green_500">#4CAF50</color>
<color name="orange_500">#FF9800</color>
<color name="grey_500">#9E9E9E</color>
<color name="lime_500">#CDDC39</color>
<color name="deep_purple_400">#7E57C2</color>
<color name="deep_purple_500">#673AB7</color>

效果圖：

四個按鈕分別爲：帳目、圖表、類別、個人。
修改了帳目和圖表的 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日

1. 各類 Material 顏色系統內自己就有內置

2. 用 RecyclerView 來實現展現類別頁面

3. 使用 RealmRecyclerViewAdapter 來實現 Adapter

4. 編寫自定義圓形 ImageView 控件

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