Calculator - 计算器

1 + 2 + 3 = 6

Calculator - 计算器 - 图1

这是一个计算器应用程序，你可以在这里下载这个例子。

简介

这里的计算器是用响应式编程写的，而且它还用到了 RxFeedback 架构。它比较适合有经验的 RxSwift 使用者学习。接下来我们就来介绍一下这个应用程序是如何实现的。

整体结构

Calculator - 计算器 - 图2

  1. class CalculatorViewController: ViewController {
  3.     @IBOutlet weak var lastSignLabel: UILabel!
  4.     @IBOutlet weak var resultLabel: UILabel!
  6.     @IBOutlet weak var allClearButton: UIButton!
  7.     @IBOutlet weak var changeSignButton: UIButton!
  8.     @IBOutlet weak var percentButton: UIButton!
  10.     @IBOutlet weak var divideButton: UIButton!
  11.     @IBOutlet weak var multiplyButton: UIButton!
  12.     @IBOutlet weak var minusButton: UIButton!
  13.     @IBOutlet weak var plusButton: UIButton!
  14.     @IBOutlet weak var equalButton: UIButton!
  16.     @IBOutlet weak var dotButton: UIButton!
  18.     @IBOutlet weak var zeroButton: UIButton!
  19.     @IBOutlet weak var oneButton: UIButton!
  20.     @IBOutlet weak var twoButton: UIButton!
  21.     @IBOutlet weak var threeButton: UIButton!
  22.     @IBOutlet weak var fourButton: UIButton!
  23.     @IBOutlet weak var fiveButton: UIButton!
  24.     @IBOutlet weak var sixButton: UIButton!
  25.     @IBOutlet weak var sevenButton: UIButton!
  26.     @IBOutlet weak var eightButton: UIButton!
  27.     @IBOutlet weak var nineButton: UIButton!
  29.     override func viewDidLoad() {
  30.         let commands: Observable<CalculatorCommand> = Observable.merge([
  31.             allClearButton.rx.tap.map { _ in .clear },
  33.             changeSignButton.rx.tap.map { _ in .changeSign },
  34.             percentButton.rx.tap.map { _ in .percent },
  36.             divideButton.rx.tap.map { _ in .operation(.division) },
  37.             multiplyButton.rx.tap.map { _ in .operation(.multiplication) },
  38.             minusButton.rx.tap.map { _ in .operation(.subtraction) },
  39.             plusButton.rx.tap.map { _ in .operation(.addition) },
  41.             equalButton.rx.tap.map { _ in .equal },
  43.             dotButton.rx.tap.map { _ in  .addDot },
  45.             zeroButton.rx.tap.map { _ in .addNumber("0") },
  46.             oneButton.rx.tap.map { _ in .addNumber("1") },
  47.             twoButton.rx.tap.map { _ in .addNumber("2") },
  48.             threeButton.rx.tap.map { _ in .addNumber("3") },
  49.             fourButton.rx.tap.map { _ in .addNumber("4") },
  50.             fiveButton.rx.tap.map { _ in .addNumber("5") },
  51.             sixButton.rx.tap.map { _ in .addNumber("6") },
  52.             sevenButton.rx.tap.map { _ in .addNumber("7") },
  53.             eightButton.rx.tap.map { _ in .addNumber("8") },
  54.             nineButton.rx.tap.map { _ in .addNumber("9") }
  55.         ])
  57.         let system = Observable.system(
  58.             CalculatorState.initial,
  59.             accumulator: CalculatorState.reduce,
  60.             scheduler: MainScheduler.instance,
  61.             feedback: { _ in commands }
  62.         )
  63.             .debug("calculator state")
  64.             .share(replay: 1)
  66.         system.map { $0.screen }
  67.             .bind(to: resultLabel.rx.text)
  68.             .disposed(by: disposeBag)
  70.         system.map { $0.sign }
  71.             .bind(to: lastSignLabel.rx.text)
  72.             .disposed(by: disposeBag)
  73.     }
  75.     func formatResult(_ result: String) -> String {
  76.         if result.hasSuffix(".0") {
  77.             return result.substring(to: result.index(result.endIndex, offsetBy: -2))
  78.         } else {
  79.             return result
  80.         }
  81.     }
  82. }

首先合成出一个命令序列，它是通过按钮点击转换过来的：

Calculator - 计算器 - 图3

  1. let commands: Observable<CalculatorCommand> = Observable.merge([
  2.     allClearButton.rx.tap.map { _ in .clear },
  4.     changeSignButton.rx.tap.map { _ in .changeSign },
  5.     percentButton.rx.tap.map { _ in .percent },
  7.     divideButton.rx.tap.map { _ in .operation(.division) },
  8.     multiplyButton.rx.tap.map { _ in .operation(.multiplication) },
  9.     minusButton.rx.tap.map { _ in .operation(.subtraction) },
  10.     plusButton.rx.tap.map { _ in .operation(.addition) },
  12.     equalButton.rx.tap.map { _ in .equal },
  14.     dotButton.rx.tap.map { _ in  .addDot },
  16.     zeroButton.rx.tap.map { _ in .addNumber("0") },
  17.     oneButton.rx.tap.map { _ in .addNumber("1") },
  18.     twoButton.rx.tap.map { _ in .addNumber("2") },
  19.     threeButton.rx.tap.map { _ in .addNumber("3") },
  20.     fourButton.rx.tap.map { _ in .addNumber("4") },
  21.     fiveButton.rx.tap.map { _ in .addNumber("5") },
  22.     sixButton.rx.tap.map { _ in .addNumber("6") },
  23.     sevenButton.rx.tap.map { _ in .addNumber("7") },
  24.     eightButton.rx.tap.map { _ in .addNumber("8") },
  25.     nineButton.rx.tap.map { _ in .addNumber("9") }
  26. ])

通过使用 map 方法将按钮点击事件转换为对应的命令。如：将 allClearButton 点击事件转换为清除命令，将 plusButton 点击事件转换为相加命令，将 oneButton 点击事件转换为添加数字1命令。最后使用 merge 操作符将这些命令合并。于是就得到了我们所需要的命令序列。

几乎每个页面都是有状态的。我们通过命令序列来对状态进行修改，然后产生一个新的状态。例如，刚进页面后，点击了按钮 1 。那么初始状态为 0，在执行添加数字1命令后，状态就更新为 1。通过这种变换方式，就可以生成一个状态序列：

Calculator - 计算器 - 图4

  1. let system = Observable.system(
  2.     CalculatorState.initial,
  3.     accumulator: CalculatorState.reduce,
  4.     scheduler: MainScheduler.instance,
  5.     feedback: { _ in commands }
  6. )
  7.     .debug("calculator state")
  8.     .share(replay: 1)

由命令序列触发，对页面状态进行更新，在用更新后的状态组成一个序列。这就是我们所需要的状态序列。接下来我们用这个状态序列来控制页面显示：

Calculator - 计算器 - 图5

  1. system.map { $0.screen }
  2.     .bind(to: resultLabel.rx.text)
  3.     .disposed(by: disposeBag)
  5. system.map { $0.sign }
  6.     .bind(to: lastSignLabel.rx.text)
  7.     .disposed(by: disposeBag)

用 state.screen 来控制 resultLabel 的显示内容。用 state.sign 来控制 lastSignLabel 的显示内容。

Calculator

控制器主要负责数据绑定，而整个计算器的大脑在 Calculator.swift 文件内。

State:

这个页面主要有三种状态：

  1. enum CalculatorState {
  2.     case oneOperand(screen: String)
  3.     case oneOperandAndOperator(operand: Double, operator: Operator)
  4.     case twoOperandsAndOperator(operand: Double, operator: Operator, screen: String)
  5. }
  • oneOperand 一个操作数，例如：进入页面后，输入 1 时的状态
  • oneOperandAndOperator 一个操作数和一个运算符，例如：进入页面后，输入 1 + 时的状态
  • twoOperandsAndOperator 两个操作数和一个运算符，例如：进入页面后，输入 1 + 2 时的状态

Command:

这个计算器提供七种命令：

  1. enum Operator {
  2.     case addition
  3.     case subtraction
  4.     case multiplication
  5.     case division
  6. }
  8. enum CalculatorCommand {
  9.     case clear
  10.     case changeSign
  11.     case percent
  12.     case operation(Operator)
  13.     case equal
  14.     case addNumber(Character)
  15.     case addDot
  16. }
  • clear 清除，重置
  • changeSign 改变正负号
  • percent 百分比
  • operation 四则运算
  • equal 等于
  • addNumber 输入数字
  • addDot 输入 “.”

reduce:

当命令产生时，将它应用到当前状态上，然后生成新的状态：

Calculator - 计算器 - 图6

  1. extension CalculatorState {
  2.     static func reduce(state: CalculatorState, _ x: CalculatorCommand) -> CalculatorState {
  3.         switch x {
  4.         case .clear:
  5.             return CalculatorState.initial
  6.         case .addNumber(let c):
  7.             return state.mapScreen { $0 == "0" ? String(c) : $0 + String(c) }
  8.         case .addDot:
  9.             return state.mapScreen { $0.range(of: ".") == nil ? $0 + "." : $0 }
  10.         case .changeSign:
  11.             return state.mapScreen { "\(-(Double($0) ?? 0.0))" }
  12.         case .percent:
  13.             return state.mapScreen { "\((Double($0) ?? 0.0) / 100.0)" }
  14.         case .operation(let o):
  15.             switch state {
  16.             case let .oneOperand(screen):
  17.                 return .oneOperandAndOperator(operand: screen.doubleValue, operator: o)
  18.             case let .oneOperandAndOperator(operand, _):
  19.                 return .oneOperandAndOperator(operand: operand, operator: o)
  20.             case let .twoOperandsAndOperator(operand, oldOperator, screen):
  21.                 return .twoOperandsAndOperator(operand: oldOperator.perform(operand, screen.doubleValue), operator: o, screen: "0")
  22.             }
  23.         case .equal:
  24.             switch state {
  25.             case let .twoOperandsAndOperator(operand, operat, screen):
  26.                 let result = operat.perform(operand, screen.doubleValue)
  27.                 return .oneOperand(screen: String(result))
  28.             default:
  29.                 return state
  30.             }
  31.         }
  32.     }
  33. }
  • clear 重置当前状态
  • addNumber, addDot, changeSign, percent 只需要更改屏显即可
  • operation 需要根据当前状态来确定如何变化状态。
    • 如果只有一个操作数，就添加操作符。
    • 如果有一个操作数和操作符，就替换操作符。
    • 如果有两个操作数和一个操作符，将他们的计算结果作为操作数保留，然后加入新的操作符，以及一个操作数 0.
  • equal 如果当前有两个操作数和一个操作符，将他们的计算结果作为操作数保留。否则什么都不做。

剩下的都是一些辅助代码，接下来我们再来看下全部代码：

ViewController:

  1. class CalculatorViewController: ViewController {
  3.     @IBOutlet weak var lastSignLabel: UILabel!
  4.     @IBOutlet weak var resultLabel: UILabel!
  6.     @IBOutlet weak var allClearButton: UIButton!
  7.     @IBOutlet weak var changeSignButton: UIButton!
  8.     @IBOutlet weak var percentButton: UIButton!
  10.     @IBOutlet weak var divideButton: UIButton!
  11.     @IBOutlet weak var multiplyButton: UIButton!
  12.     @IBOutlet weak var minusButton: UIButton!
  13.     @IBOutlet weak var plusButton: UIButton!
  14.     @IBOutlet weak var equalButton: UIButton!
  16.     @IBOutlet weak var dotButton: UIButton!
  18.     @IBOutlet weak var zeroButton: UIButton!
  19.     @IBOutlet weak var oneButton: UIButton!
  20.     @IBOutlet weak var twoButton: UIButton!
  21.     @IBOutlet weak var threeButton: UIButton!
  22.     @IBOutlet weak var fourButton: UIButton!
  23.     @IBOutlet weak var fiveButton: UIButton!
  24.     @IBOutlet weak var sixButton: UIButton!
  25.     @IBOutlet weak var sevenButton: UIButton!
  26.     @IBOutlet weak var eightButton: UIButton!
  27.     @IBOutlet weak var nineButton: UIButton!
  29.     override func viewDidLoad() {
  30.         let commands: Observable<CalculatorCommand> = Observable.merge([
  31.             allClearButton.rx.tap.map { _ in .clear },
  33.             changeSignButton.rx.tap.map { _ in .changeSign },
  34.             percentButton.rx.tap.map { _ in .percent },
  36.             divideButton.rx.tap.map { _ in .operation(.division) },
  37.             multiplyButton.rx.tap.map { _ in .operation(.multiplication) },
  38.             minusButton.rx.tap.map { _ in .operation(.subtraction) },
  39.             plusButton.rx.tap.map { _ in .operation(.addition) },
  41.             equalButton.rx.tap.map { _ in .equal },
  43.             dotButton.rx.tap.map { _ in  .addDot },
  45.             zeroButton.rx.tap.map { _ in .addNumber("0") },
  46.             oneButton.rx.tap.map { _ in .addNumber("1") },
  47.             twoButton.rx.tap.map { _ in .addNumber("2") },
  48.             threeButton.rx.tap.map { _ in .addNumber("3") },
  49.             fourButton.rx.tap.map { _ in .addNumber("4") },
  50.             fiveButton.rx.tap.map { _ in .addNumber("5") },
  51.             sixButton.rx.tap.map { _ in .addNumber("6") },
  52.             sevenButton.rx.tap.map { _ in .addNumber("7") },
  53.             eightButton.rx.tap.map { _ in .addNumber("8") },
  54.             nineButton.rx.tap.map { _ in .addNumber("9") }
  55.         ])
  57.         let system = Observable.system(
  58.             CalculatorState.initial,
  59.             accumulator: CalculatorState.reduce,
  60.             scheduler: MainScheduler.instance,
  61.             feedback: { _ in commands }
  62.         )
  63.             .debug("calculator state")
  64.             .share(replay: 1)
  66.         system.map { $0.screen }
  67.             .bind(to: resultLabel.rx.text)
  68.             .disposed(by: disposeBag)
  70.         system.map { $0.sign }
  71.             .bind(to: lastSignLabel.rx.text)
  72.             .disposed(by: disposeBag)
  73.     }
  75.     func formatResult(_ result: String) -> String {
  76.         if result.hasSuffix(".0") {
  77.             return result.substring(to: result.index(result.endIndex, offsetBy: -2))
  78.         } else {
  79.             return result
  80.         }
  81.     }
  82. }

Calculator:

  1. enum Operator {
  2.     case addition
  3.     case subtraction
  4.     case multiplication
  5.     case division
  6. }
  8. enum CalculatorCommand {
  9.     case clear
  10.     case changeSign
  11.     case percent
  12.     case operation(Operator)
  13.     case equal
  14.     case addNumber(Character)
  15.     case addDot
  16. }
  18. enum CalculatorState {
  19.     case oneOperand(screen: String)
  20.     case oneOperandAndOperator(operand: Double, operator: Operator)
  21.     case twoOperandsAndOperator(operand: Double, operator: Operator, screen: String)
  22. }
  24. extension CalculatorState {
  25.     static let initial = CalculatorState.oneOperand(screen: "0")
  27.     func mapScreen(transform: (String) -> String) -> CalculatorState {
  28.         switch self {
  29.         case let .oneOperand(screen):
  30.             return .oneOperand(screen: transform(screen))
  31.         case let .oneOperandAndOperator(operand, operat):
  32.             return .twoOperandsAndOperator(operand: operand, operator: operat, screen: transform("0"))
  33.         case let .twoOperandsAndOperator(operand, operat, screen):
  34.             return .twoOperandsAndOperator(operand: operand, operator: operat, screen: transform(screen))
  35.         }
  36.     }
  38.     var screen: String {
  39.         switch self {
  40.         case let .oneOperand(screen):
  41.             return screen
  42.         case .oneOperandAndOperator:
  43.             return "0"
  44.         case let .twoOperandsAndOperator(_, _, screen):
  45.             return screen
  46.         }
  47.     }
  49.     var sign: String {
  50.         switch self {
  51.         case .oneOperand:
  52.             return ""
  53.         case let .oneOperandAndOperator(_, o):
  54.             return o.sign
  55.         case let .twoOperandsAndOperator(_, o, _):
  56.             return o.sign
  57.         }
  58.     }
  59. }
  62. extension CalculatorState {
  63.     static func reduce(state: CalculatorState, _ x: CalculatorCommand) -> CalculatorState {
  64.         switch x {
  65.         case .clear:
  66.             return CalculatorState.initial
  67.         case .addNumber(let c):
  68.             return state.mapScreen { $0 == "0" ? String(c) : $0 + String(c) }
  69.         case .addDot:
  70.             return state.mapScreen { $0.range(of: ".") == nil ? $0 + "." : $0 }
  71.         case .changeSign:
  72.             return state.mapScreen { "\(-(Double($0) ?? 0.0))" }
  73.         case .percent:
  74.             return state.mapScreen { "\((Double($0) ?? 0.0) / 100.0)" }
  75.         case .operation(let o):
  76.             switch state {
  77.             case let .oneOperand(screen):
  78.                 return .oneOperandAndOperator(operand: screen.doubleValue, operator: o)
  79.             case let .oneOperandAndOperator(operand, _):
  80.                 return .oneOperandAndOperator(operand: operand, operator: o)
  81.             case let .twoOperandsAndOperator(operand, oldOperator, screen):
  82.                 return .twoOperandsAndOperator(operand: oldOperator.perform(operand, screen.doubleValue), operator: o, screen: "0")
  83.             }
  84.         case .equal:
  85.             switch state {
  86.             case let .twoOperandsAndOperator(operand, operat, screen):
  87.                 let result = operat.perform(operand, screen.doubleValue)
  88.                 return .oneOperand(screen: String(result))
  89.             default:
  90.                 return state
  91.             }
  92.         }
  93.     }
  94. }
  96. extension Operator {
  97.     var sign: String {
  98.         switch self {
  99.         case .addition:         return "+"
  100.         case .subtraction:      return "-"
  101.         case .multiplication:   return "×"
  102.         case .division:         return "/"
  103.         }
  104.     }
  106.     var perform: (Double, Double) -> Double {
  107.         switch self {
  108.         case .addition:         return (+)
  109.         case .subtraction:      return (-)
  110.         case .multiplication:   return (*)
  111.         case .division:         return (/)
  112.         }
  113.     }
  114. }
  116. private extension String {
  117.     var doubleValue: Double {
  118.         guard let double = Double(self) else {
  119.            return Double.infinity
  120.         }
  121.         return double
  122.     }
  123. }

参考