1、記賬界面搭建

從記賬的需求出發(fā)，該界面需要用戶輸入以下賬單信息：
（1）賬單金額
（2）賬單類型
（3）相關(guān)賬戶
（4）賬單產(chǎn)生的日期
（5）備注
那么，結(jié)合一下需求，開始構(gòu)思一下界面如何搭建吧。

記賬界面

其實(shí)這個(gè)界面不難搭建，一個(gè)控制器的scrollView添加包含兩個(gè)控制器的視圖（一個(gè)是收入，一個(gè)是支出）。子控制器分別用CollectView布局即可。這里就不詳細(xì)說明了

2、數(shù)據(jù)準(zhǔn)備

首先，我們來看看賬單類型的模型聲明。

/// 賬單類型模型
@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)

那么，對(duì)應(yīng)地，我們?cè)诔绦虻谝淮螁?dòng)時(shí)，從本地的plist文件讀取數(shù)據(jù)，寫入數(shù)據(jù)庫。這樣一來，我們就可以方便的從數(shù)據(jù)庫進(jìn)行查詢了。因此在MPCategoryManager創(chuàng)建時(shí)，馬上進(jìn)行初始化操作，部分代碼如下

/// 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];
  }
}

當(dāng)數(shù)據(jù)寫入完畢后，通過Realm Browser可以看到數(shù)據(jù)表如下

賬單類別表

3、數(shù)據(jù)查詢

以isIncome為查詢條件，分別查詢支出，收入類型類型列表。

/**
 獲得收入類型列表
 
 @return MPCategory模型數(shù)組
 */
- (RLMResults *)getIncomeCategoryList
{
  RLMResults *results = [MPCategoryModel objectsWhere:@"isIncome = YES"];
  return results;
}

得到以上數(shù)據(jù)后，即可進(jìn)行展示了，具體展示就不詳細(xì)說了。

/**
 獲得支出類型列表
 
 @return MPCategory模型數(shù)組
 */
- (RLMResults *)getOutcomeCategoryList
{
  RLMResults *results = [MPCategoryModel objectsWhere:@"isIncome = NO"];
  return results;
}

4、選擇動(dòng)畫效果

點(diǎn)擊按鈕后，會(huì)提取選中的圖標(biāo)顏色，然后從左到右進(jìn)行“覆蓋”，如下所示：

這里寫圖片描述

因此，我們的動(dòng)畫要分兩步：

• 提取顏色
• 做"覆蓋"動(dòng)畫

4.1、提取顏色

在這里使用了一個(gè)框架CCColorCube，通過該框架，我們可以方便的提取圖標(biāo)的顏色。提取方法如下：

/// 從圖片提取顏色
- (UIColor *)extractColorFromImage:(UIImage *)image
{
  CCColorCube *cube = [[CCColorCube alloc] init];
  NSArray *colors = [cube extractColorsFromImage:image flags:CCAvoidBlack count:1];
  // 由于我們的圖標(biāo)都是單色的，因此直接取第一個(gè)元素即為我們所需要的顏色
  return colors.firstObject;
}

4.2、覆蓋動(dòng)畫

通過shapeLayer的動(dòng)畫，一開始先添加寬為“1”的線條，再設(shè)置動(dòng)畫，將線條的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;
  //* 設(shè)置填充色 */
  self.bgColorlayer.fillColor = color.CGColor;
  //* 設(shè)置邊框色 */
  self.bgColorlayer.strokeColor = color.CGColor;
  
  self.previousColor = color;
  //* 保持動(dòng)畫 */
  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];
    //* 設(shè)置路徑 */
    layer.path = path.CGPath;
    //* 設(shè)置填充色 */
    layer.fillColor = [UIColor clearColor].CGColor;
    //* 設(shè)置邊框色 */
    layer.strokeColor = [UIColor clearColor].CGColor;
    [self.layer insertSublayer:layer atIndex:0];
    self.bgColorlayer = layer;
  }
  return _bgColorlayer;
}

5、數(shù)字鍵盤

由于數(shù)字鍵盤設(shè)計(jì)到了“+-=.”等操作符，所以需要判定各情況的輸入，來決定輸入的內(nèi)容。流程圖如下所示：

這里寫圖片描述

具體判斷的過程，看項(xiàng)目中的代碼吧，判斷起來有點(diǎn)繁瑣。

6、小結(jié)

建議從記賬模塊入手，這一塊完成后。記賬軟件的基本功能就完成了，剩下的只是對(duì)寫入的數(shù)據(jù)，進(jìn)行操作。所以這一模塊是重中之重，有不明白的可以評(píng)論或者github上issue我~

github地址

https://github.com/maple1994/MPTally
請(qǐng)順手給一個(gè)start哦，哈哈