【iOS】基於Realm資料庫的記賬軟體--記賬模組（二）

  • 2020 年 3 月 31 日
  • 筆記

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我~

Tags:

VirMach 便宜 VPS