一期项目计划
记账软件最准确的使用方式,是在花费后立即记账,所以应用需要考虑单手操作下可以快捷地开始记账操作,比如在右下角放置 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 见新写的博文: