連到網站 Coolors

點選 Start the generator 產生顏色清單

開發 SwiftUI App 時，我們時常利用 modifier 設計元件的樣式，比方以下的 padding( ) 將讓文字的上下左右增加一些間距。

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

接著我們將示範如何從 Attributes inspector 移除 modifier。

點選 text ，切換到它的 Attributes inspector 頁面

實心圓圈表示有加入的 modifier，因此目前只有加入 Padding。

當我們千辛萬苦地開發出有趣的 App，開心地在 Medium 或 FB 分享 GitHub 專案的連結給朋友時，它的預覽圖片如下，縮圖是單調地呈現專案的基本資訊。

想要顯示漂亮的預覽圖片，展現自己帥氣寫程式的模樣或作品的截圖嗎 ? 可以的，接下來讓我們一步步修改專案的預覽圖片吧。(ps: 此處設定的預覽圖片是針對專案，所以不同的專案要分別設定。）

連到 GitHub 的專案頁面，點選右上的 Settings

macOS 內建許多 iOS 沒有的漂亮字體，喜歡的話我們也可以將它加到開發的 iOS App，增添 App 的吸引力。

打開 Font Book，找到喜歡的字體

彼得潘平常寫字行雲流水就像行書，因此選擇 Xingkai TC(行楷)。

點選 File > Export Fonts

當我們使用 table view 或 collection view 時，cell 重覆利用的特性可以帶給更好的效能。不過當 cell 上顯示的照片是非同步抓取，比方從網路抓取，或是利用 PHCachingImageManager 從使用者的相簿抓取時，需要特別注意照片顯示的問題。

當照片是非同步抓取時，由於照片抓取需要時間，使用者將看到 cell 先顯示之前的圖片，然後才更新成正確的圖片。為了防止重覆利用的 cell 顯示之前的照片，我們最好在抓到照片前，先讓它顯示預設的照片，或是將它清空。

那麼設定預設照片，或是將照片清空的程式，該寫在哪裡呢？有以下兩種做法。

方法 1: 在 dequeueReusableCell 得到 cell 後先將 cell 的照片清空或設成預設照片

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "\(MovieTableViewCell.self)", for: indexPath) as? MovieTableViewCell else {
            return UITableViewCell()
        }
        cell.coverImageView.image = nil
        
        // fetch image
        // set coverImageView after get image 
        
        return cell
}

方法 2: 在 cell 的 prepareForReuse 裡將照片清空或設成預設照片

在 cell 被重覆利用前，cell 的 function prepareForReuse 將被觸發，我們可在其中設定 cell 的預設狀態。

class MovieTableViewCell: UITableViewCell {
    
    @IBOutlet var coverImageView: UIImageView!    override func prepareForReuse() {
        super.prepareForReuse()
        coverImageView.image = nil
    }
}

參考範例

Apple 的 Browsing and Modifying Photo Albums

下圖為 FB App 的 po 文明細頁面，包含文章的內容和留言清單。(以 Apple TV 的好笑影集 Ted Lasso 為例）這樣的畫面該如何設計呢？

最近有同學問到一個有趣的問題，如何讓 table view 可以多選，而且每個 section 只能選一個 cell。

比方我們想做一個高級西式餐廳點餐 App，點餐畫面如下。客人點餐時必須在各個分類裡各選一道菜。為了他的健康和荷包著想，怕他吃太多肉或花太多錢，我們限制他不能在一個分類裡選多道菜。

解答

接下來我們將從最基本的 table view 開始，一步步說明如何實現這樣的功能。

先實作單選的表格

MealCourse

定義餐點的資料型別，利用變數 data 儲存餐點的 array。

import Foundationenum MealCategory: String {
    case soup
    case mainCourse = "main course"
    case dessert
}struct MealCourse …

開發多人連線遊戲，例如大富翁。也可以製作大富翁以外的遊戲，不過修課同學必須先提出來跟我討論，比方不行製作剪刀石頭布，因為太簡單了。

大富翁的遊戲規則

https://forum.gamer.com.tw/Co.php?bsn=60076&sn=36660403

App 範例參考: Monopoly

Part 2 功能需求

• 採用 MVVM 架構，附上分類截圖。