一、開發環境

二、基礎知識

1.往期知識點

2.簡易自動布局——Stack View

三、實驗步驟

1.先在Xcode建立一個APP專案

2.界面搭建

3.連接控制元件與代碼

4.補充代碼，完善功能

一、開發環境

開發工具： Xcode 12.2（集成開發平臺）、Simulator（模擬器，Xcode自帶）
開發語言： Swift 5
界面搭建： Storyboard（故事板）

二、基礎知識

1.往期知識點

00 | Swift基礎語法(上)

01 | Swift基礎語法(下)

10 | 如何構建一個APP

2.簡易自動布局——Stack View

Stack View（堆疊視圖）類似于HTML的盒模型，你可以把它理解為一個容器，我們可以利用Stack View在水平(或垂直)方向堆疊多個子視圖，

一個Stack View可以用來封裝各種UI控制元件以及其他Stack View，通過添加對Stack View的約束（設定該View到父View的距離）可以實作UI控制元件的定位和布局，

1）添加Stack View

2）添加約束

3）查看約束

4）設定Stack View的屬性

三、實驗步驟

在MVC架構下，用故事板來開發一個簡易計算器APP需要以下步驟：

搭建界面——添加必要的UI控制元件，并實作UI控制元件的自動布局
連接UI控制元件與代碼
不斷完善代碼，實作需求的功能

應用界面的設計如下，要求計算器至少能實作整數和浮點數的加減乘除運算，

1.先在Xcode建立一個APP專案

2.界面搭建

1）打開Main.storyboard主故事板

同時，模擬器和View視圖統一選擇iPhone 8 Plus

2）先添加一個Button（按鈕）控制元件

通過Inspector設定Button的屬性

將Button顯示的文字“Button”修改為“1”，文字大小Font設定為30，文字顏色Text Color暫不修改

將Button的背景顏色Background修改為Yellow（或其他你喜歡的顏色）

修改Button的寬和高為50

3）添加容器

方法是按住滑鼠左鍵框選要放入容器里的控制元件，完成后點擊左下角的Stack View

可以看到Button1已經被放入Stack View里了：

4）批量添加Button（包括它外面的容器）

一個比較快捷的方法是，框選你要復制的控制元件，然后按住option鍵往旁邊拖拽

如果不清楚這個方法，一個Button一個容器地添加也可以，就是沒上面的方法快，

5）為一行的Button添加容器

框選+Stack View

6）繼續往下添加Button

我們繼續往下復制，總共需要4*5個Button，依然使用框選+按住option+拖拽的方法

7）把所有Button封裝進一個容器

8）在頂部添加一個Lable（標簽）控制元件

同時，也將Lable封裝進一個Stack View

9）將Lable和Button都封裝進一個容器中

到了這一步，所有的控制元件和容器都以添加完成，接下來要做的就是為各個容器添加約束，實作自動布局，

10）為最外層的Stack View設定約束

添加4條約束：將其上下左右四個方向的距離設定為0

11）設定包含所有Button的Stack View

這一步是實作自動約束的關鍵步驟，在左側的Documen Outline中選擇包含所有Button的Stack View，設定Stack View的屬性

Alignment 設定為Fill，Distribution設定為Fill Equally，Spacing設定為10

12）為每一行的Button添加約束

添加2個約束：左右距離為0

完成后結果如下：

顯然，我們需要設定包含一行Button的Stack View的屬性

13）設定包含一行Button的Stack View的屬性

Alignment 設定為Fill，Distribution設定為Fill Equally，Spacing設定為10

將所有包含一行Button的Stack View的屬性Alignment 設定為Fill，Distribution設定為Fill Equally，Spacing設定為10

14）設定Lable的高

15）修飾背景和UI控制元件

將Lable的文字設定為0，顏色Color設定為白色，文字大小Font設定為50

在Documen Outline中選擇最外層的Stack View，將背景顏色Background設定為黑色

修改Lable文字的對齊方式（改為右對齊）

修改各個Button的文字

iOS支持特殊符號（例如π對應快捷鍵option+P，平方根對應快捷鍵option+V）

修改Button的文字顏色和背景顏色

完成后：

到了這一步，頁面的搭建就已經完成了，可以試運行一下，看看有沒有bug，

3.連接控制元件與代碼

添加一個新的視窗，同時打開主故事板和ViewController.swift頁面

由于這里不需要viewDidLoad函式，直接刪掉

連接控制元件與代碼，方法是選中控制元件，按住Ctrl+拖拽

將Lable連接到代碼區：

將某個Button連接到代碼區：

接著把所有Button都連接到touch代碼塊

通過滑鼠懸停在代碼區左側的實心圓點上，可以查看連接的情況：

洗掉連接、重建連接請參考10 | 如何構建一個APP 的結尾部分

將所有控制元件與代碼連接完可以試運行一下，看連接有無錯誤

4.補充代碼，完善功能

1）添加代碼，實作Lable的數字顯示功能

試運行一下，我們發現，每按一個數字鍵，之前的數字就被覆寫掉了，沒辦法顯示2位及以上的數值，為了解決這個問題，我們采用下面的代碼：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var display: UILabel!
    
    @IBAction func touch(_ sender: UIButton) {
        let digit = sender.currentTitle!    //獲取按鈕值
        let textInDisplay = display.text!   //獲取標簽值
                
        if let mathematicalSymbol = sender.currentTitle {
            switch mathematicalSymbol {
                case "0","1","2","3","4","5","6","7","8","9":
                    if textInDisplay != "0" {
                        display.text = textInDisplay + digit
                    } else {
                        display.text = digit
                    }
                default:
                    break
            }
        }
    }
    

}

通過Lable標簽原來顯示的數值textInDisplay與數字鍵代表的數值digit的拼接，實作了多位數字的顯示，

2）繼續完善代碼

//
//  ViewController.swift
//  Calculator
//
//  Created by Apple on 2021/12/5.
//

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var display: UILabel!
    
    var num1: Double?   //運算元1
    var num2: Double?   //運算元2
    var ope: String?    //運算子
    var IsFloat = false //浮點運算標志位
    var displayValue : Double {
        get{
            return Double(display.text!)!
        }
        set{
            display.text = String(newValue)
        }
    }
    
    @IBAction func touch(_ sender: UIButton) {
        let digit = sender.currentTitle!    //獲取按鈕值
        let textInDisplay = display.text!   //獲取標簽值
                
        if let mathematicalSymbol = sender.currentTitle {
            switch mathematicalSymbol {
                case "0","1","2","3","4","5","6","7","8","9":
                    if textInDisplay != "0" {
                        display.text = textInDisplay + digit
                    } else {
                        display.text = digit
                    }
                case "AC": display.text = "0"
                case "π": display.text = String(Double.pi)
                case "√": display.text = String(sqrt(displayValue))
                case "sin": display.text = String(sin(displayValue))
                case "+","-","*","/":
                    if textInDisplay.contains(".") {
                        IsFloat = true
                    }
                    self.ope = mathematicalSymbol   //記錄運算子
                    self.num1 = displayValue        //記錄運算元1
                    display.text = "0"              //清空計算器顯示
                case "=":
                    if textInDisplay.contains(".") {
                        IsFloat = true
                    }
                    self.num2 = displayValue
                    display.text = calculation(num1: num1, num2: num2, ope: ope, IsFloat: IsFloat)
                    IsFloat = false
                    case ".":
                        if textInDisplay != "0" {
                            display.text = textInDisplay + digit
                        } else {
                            display.text = "0."
                        }
                    default:
                        break
            }
        }
    }
    
    //calculation：執行計算操作
    func calculation(num1: Double?, num2: Double?, ope: String?, IsFloat: Bool) -> String {
        if ope == nil {
            return "EOF"
        }
        if num1 == nil || num2 == nil {
            return "0"
        }
        var result: Double
        switch ope {
            case "+": result = num1! + num2!
            case "-": result = num1! - num2!
            case "*": result = num1! * num2!
            case "/":
                if(num1 != 0) {
                    result = num1! / num2!
                }
                else {
                    return "EOF"
                }
            default:
                return "EOF"
        }
        if IsFloat {
            return String(Float(result))
        } else {
            return String(Int(result))
        }
    }

    
}