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


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

範例的餐點來自 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

彼得潘的 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