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哦，哈哈