大家好,我是彼得潘,我將在 7 月推出兩門 iOS App 課程,分別針對有程式背景和無程式基礎的學生。我會一步一步慢慢教,搭配溫暖的冷笑話,帶著你開心地從無到有創作出自己的 App,歡迎有興趣的朋友們參考。有任何 iOS App 開發或程式設計的相關問題,也都歡迎跟我聯絡,謝謝。


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,點餐畫面如下。客人點餐時必須在各個分類裡各選一道菜。為了他的健康和荷包著想,怕他吃太多肉或花太多錢,我們限制他不能在一個分類裡選多道菜。

範例的餐點來自 Trine&Zen 崔妮傑恩微風信義店 menu,不過彼得潘還沒吃過

解答

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

先實作單選的表格

MealCourse

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

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


當我們打開 Xcode 時,Xcode 的 Welcome 視窗會貼心地顯示最近開啟過的 project,方便我們開啟最近編輯的 project。不過 Xcode 的記憶力有限,它最多可以記得幾個最近開過的 project 呢 ?

其實這個數量可以從 macOS 的 System Preferences 設定,方法如下:

打開 System Preferences,點選 General


開發 Swift 程式時,我們時常在呼叫 function 時傳入 closure,比方以下呼叫 function dataTask 的例子。

如上圖所示,當 closure 有參數時,在 in 的前面會用 ( ) 包含參數,但 closure 有許多精簡的寫法,其中一種是省略 ( ),讓我們少打兩個字,可以有更多的時間做更多有意義的事。

Xcode 12.5 看到了我們的需求,現在我們在輸入 closure 時在藍色框框按下 enter,即可輸入省略參數 ( ) 的版本。


彼得潘的 iOS App 程式設計入門合影,感謝大家的熱情參與,以後遇到任何 Swift 問題,都歡迎隨時跟我聯絡,也歡迎跟我相約免費 1 小時的一對一iOS App 開發討論或每週討論準備上架的 App 作品 ~


預設上下捲動

SwiftUI 的 ScrollView 可以上下捲動,也可以左右捲動,若是沒有特別設定,它預設將是上下捲動,此時 ScrollView 裡通常會用 VStack 裝著呈現的內容。

struct ContentView: View {
let colors = ["blue", "green", "pink", "silver",
"yellow", "orange", "purple"]
var body: some View {
ScrollView {
VStack {
ForEach(colors, id: \.self) { color in
Image("\(color)Imac")
.resizable()
.scaledToFit()
.frame(width: 300, height: 300)
}
}
}
}
}

彼得潘的 iOS App Neverland

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store