1、记账界面搭建
从记账的需求出发，该界面需要用户输入以下账单信息：
（1）账单金额
（2）账单类型
（3）相关账户
（4）账单产生的日期
（5）备注
那么，结合一下需求，开始构思一下界面如何搭建吧。
记账界面
其实这个界面不难搭建，一个控制器的scrollView添加包含两个控制器的视图（一个是收入，一个是支出）。子控制器分别用CollectView布局即可。这里就不详细说明了
2、数据准备
首先，我们来看看账单类型的模型声明。
/// 账单类型模型
@interface MPCategoryModel : RLMObject
/// 类别ID
@property (nonatomic, copy) NSString *cateID;
/// 类型名称
@property (nonatomic, copy) NSString *categoryName;
/// 类型图片名
@property (nonatomic, copy) NSString *categoryImageFileName;
/// 是否为收入类型
@property (nonatomic, assign) BOOL isIncome;
@end
RLM_ARRAY_TYPE(MPCategoryModel)
那么，对应地，我们在程序第一次启动时，从本地的plist文件读取数据，写入数据库。这样一来，我们就可以方便的从数据库进行查询了。因此在MPCategoryManager创建时，马上进行初始化操作，部分代码如下
/// MPCategoryManager.m文件
+ (instancetype)shareManager
{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
instance = [[self alloc] init];
[instance setup];
});
return instance;
}
/**
初始化
*/
- (void)setup
{
if([self isEmpty])
{
[self loadCategoryDataFromPlist];
}
}
当数据写入完毕后，通过Realm Browser可以看到数据表如下
账单类别表
3、数据查询
以isIncome为查询条件，分别查询支出，收入类型类型列表。
/**
获得收入类型列表
@return MPCategory模型数组
*/
- (RLMResults *)getIncomeCategoryList
{
RLMResults *results = [MPCategoryModel objectsWhere:@"isIncome = YES"];
return results;
}
得到以上数据后，即可进行展示了，具体展示就不详细说了。
/**
获得支出类型列表
@return MPCategory模型数组
*/
- (RLMResults *)getOutcomeCategoryList
{
RLMResults *results = [MPCategoryModel objectsWhere:@"isIncome = NO"];
return results;
}
4、选择动画效果
点击按钮后，会提取选中的图标颜色，然后从左到右进行“覆盖”，如下所示：
这里写图片描述
因此，我们的动画要分两步：
- 提取颜色
- 做"覆盖"动画
4.1、提取颜色
在这里使用了一个框架CCColorCube，通过该框架，我们可以方便的提取图标的颜色。提取方法如下：
/// 从图片提取颜色
- (UIColor *)extractColorFromImage:(UIImage *)image
{
CCColorCube *cube = [[CCColorCube alloc] init];
NSArray *colors = [cube extractColorsFromImage:image flags:CCAvoidBlack count:1];
// 由于我们的图标都是单色的，因此直接取第一个元素即为我们所需要的颜色
return colors.firstObject;
}
4.2、覆盖动画
通过shapeLayer的动画，一开始先添加宽为“1”的线条，再设置动画，将线条的lineWidth改为屏幕宽
- (void)animationWithBgColor:(UIColor *)color {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
animation.fromValue = @0.0;
animation.toValue = @(self.bounds.size.width * 2);
animation.duration = 0.3f;
//* 设置填充色 */
self.bgColorlayer.fillColor = color.CGColor;
//* 设置边框色 */
self.bgColorlayer.strokeColor = color.CGColor;
self.previousColor = color;
//* 保持动画 */
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.bgColorlayer addAnimation:animation forKey:@"bgColorAnimation"];
}
- (CAShapeLayer *)bgColorlayer
{
if(_bgColorlayer == nil)
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:self.bounds.origin];
[path addLineToPoint:CGPointMake(self.bounds.origin.x, self.bounds.size.height)];
CAShapeLayer *layer = [CAShapeLayer layer];
//* 设置路径 */
layer.path = path.CGPath;
//* 设置填充色 */
layer.fillColor = [UIColor clearColor].CGColor;
//* 设置边框色 */
layer.strokeColor = [UIColor clearColor].CGColor;
[self.layer insertSublayer:layer atIndex:0];
self.bgColorlayer = layer;
}
return _bgColorlayer;
}
5、数字键盘
由于数字键盘设计到了“+-=.”等操作符，所以需要判定各情况的输入，来决定输入的内容。流程图如下所示：
这里写图片描述
具体判断的过程，看项目中的代码吧，判断起来有点繁琐。
6、小结
建议从记账模块入手，这一块完成后。记账软件的基本功能就完成了，剩下的只是对写入的数据，进行操作。所以这一模块是重中之重，有不明白的可以评论或者github上issue我~
github地址
https://github.com/maple1994/MPTally
请顺手给一个start哦，哈哈
