(Swift) 使用 MVC 架構製作聊天室畫面

YEN HUNG CHENG

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

10 min readMar 25, 2023

目的：學習使用 MVC 架構，製作聊天室對話畫面

創建一個 UITableViewController ChatTableViewController 在 storyboard 中

將底部的格線隱藏 TableView Separator -> None

在第一個 TableViewCell 中新增 UIImageView TextView

UIImageView height width -> 50

TextView Scrolling -> 取消勾選

設定第一個 Cell 的 AutoLayout

設定 UIImageView 的 width = 50

勾選 UIImageView 的 Aspect Ratio

再使用 StackView 將 UIImageView TextView 包住

Stack View 設定

Alignment -> Top Distribution -> Fill Spacing -> 10

設定 StackView AutoLayout

設定 StackView 右邊的 Horizpntal Space Constraint 的

Relatior -> Greater Than or Equal

設定 TextView 中的 Horizontal Content Compression Resistance Priority 750 -> 1000

新增第二個 Cell

TableView Prototype Cell -> 2

刪除 Cell 中左邊的 UIImageView ，並將左右的 Horizontal Space Constraint Relation Equal <-> Greater Than or Equal 對調

新增兩個 TableViewCell 自定義類別 AskChatTableViewCell TeachChatTableViewCell

設定 TeachChatTableViewCell 的 Identifier -> Teach AskChatTableViewCell 的 Identifier -> Ask

新增一個 Swift File -> Content

在 Content 中定義 name content property

import Foundation

struct Content {
    // 存放老師或是詢問人
    var name: String
    // 存放回應的內容
    var content: String
    
    static let teacher = "teacher"
    static let ask = "ask"
}

在 ChatTableViewController 準備對話內容

import UIKit

class ChatTableViewController: UITableViewController {
    
    let chatHistory = [
        Content(name: Content.teacher, content: "有什麼問題想問嗎？"),
        Content(name: Content.ask, content: "請問可以講解一下梯度下降嗎？"),
        Content(name: Content.teacher, content: "梯度下降是一種最小化函數的優化算法，常用於機器學習和深度學習中。在機器學習中，我們通常需要尋找一組參數，使得損失函數（loss function）的值最小化，從而使我們的模型更加準確。"),
        Content(name: Content.ask, content: "常見的有哪幾種方法呢？"),
        Content(name: Content.teacher, content: "梯度下降算法可以分為三種類型：批量梯度下降（Batch Gradient Descent）、隨機梯度下降（Stochastic Gradient Descent）和小批量梯度下降（Mini-batch Gradient Descent）。"),
        Content(name: Content.ask, content: "為何訓練神經網路時，batch size 過大會容易造成震盪"),
        Content(name: Content.teacher, content: "1. 訓練過程不穩定：當 batch size 過大時，每次迭代使用的樣本數量增加，訓練過程的噪聲也會增加。這可能會導致模型訓練的不穩定性，使得模型難以收斂。2. 過度擬合：當 batch size 過大時，模型可能會過度擬合訓練集，從而導致泛化能力降低。這是因為大批量的數據會使模型更容易記住訓練集的細節，而忽略了更廣泛的特徵。3. 資源限制：當 batch size 過大時，需要更大的記憶體來處理每個批次的數據。如果記憶體不足，訓練過程可能會變得非常緩慢或無法進行。"),
        Content(name: Content.ask, content: "為何使用 CNN 來做影像辨識，不是使用 MLP 呢？"),
        Content(name: Content.teacher, content: "CNN 在影像辨識中的優勢主要體現在參數共享、局部感知和深度學習等方面。這些特性使得 CNN 更加適合處理具有空間結構的數據，例如影像，因此在影像辨識中，CNN 比 MLP 更加適合使用。")
    ]

在 override func numberOfSections(in tableView: UITableView) -> Int

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

輸入以下程式碼

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return chatHistory.count
    }

設定 TeachChatTableViewCell AskChatTableViewCell 的 @IBOutlet

並且將 UIImageView textView 邊緣設定為圓角

import UIKit

class TeachChatTableViewCell: UITableViewCell {

    
    @IBOutlet weak var photoImageView: UIImageView!
    @IBOutlet weak var textView: UITextView!
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        textView.textContainerInset = UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5)
        textView.layer.cornerRadius = 10
        photoImageView.layer.cornerRadius = 25

    }

import UIKit

class AskChatTableViewCell: UITableViewCell {

    
    @IBOutlet weak var textView: UITextView!
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        
        textView.textContainerInset = UIEdgeInsets(top: 10, left: 5, bottom: 10, right: 5)
        textView.layer.cornerRadius = 10
    }