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 见新写的博文：