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

Image for post
Image for post


Image for post
Image for post

功能需求

  • 使用 SwiftUI 製作以下其中一種跟電腦 PK 的撲克牌遊戲。

撿紅點,99,接龍,抽鬼牌,吹牛,德州撲克,大老二,UNO。

修課大學生若想製作其它撲克牌遊戲,可事先跟我討論。

  • 遊戲開始時玩家有一定的籌碼,獲勝會增加籌碼,失敗會損失籌碼。
  • 使用 sheet 或 fullScreenCover 切換頁面顯示獲勝或失敗的畫面。
  • 獲勝或失敗的畫面包含返回遊戲畫面的 button,使用 Binding。
  • 玩家破產時切換到可憐的 Game Over 頁面。
  • 利用 extract subview 將 view 模組化。
  • 使用 Link 打開遊戲規則的說明網頁。
  • 設定 App 名稱。
  • 設定 App icon。
  • 設定開頭畫面。
  • 支援 dark mode。
  • 撲克牌圖片參考。

hayeah 大大的撲克牌圖庫。

六角學院 The F …


Image for post
Image for post

Apple 貼心地提供 SF Symbol 讓我們使用兩千多種的 icon 圖片,不過圖片永遠沒有夠用的一天,因此接下來讓我們從 Google 那裡拿一些 icon 來用吧。

連到 Google 的 Material Icon 網站

Google 的 Material Icon 網站提供了大量的 icon 圖片。

從網站找尋並點選喜歡的 icon

在此彼得潘點選可愛的 Face。


想學習 Swift,當然要閱讀世界上最棒的 Swift 程式書呀。世界上最棒的Swift 程式書是誰寫的呢?

很可惜不是彼得潘。寫得最棒的當然是 Apple 官方寫的 Swift 電子書。

不用花錢,也不用走路出門去書局買,我們可以舒服地躺在床上,打開 Xcode ,從 menu 的 Help 點選 Swift Programming Language Book 即可開始一邊喝咖啡,一邊展開美好的 Swift 旅程。

Image for post
Image for post


開發 SwiftUI App 時,我們時常在 function 型別的參數傳入 { } 表示的 closure,比方以下 Button 的例子。

struct ContentView: View {
var body: some View {
Button(action: {
print("別按我")
}, label: {
Text("可愛的 button")
})

}
}

不過 function 型別參數有的是 ViewBuilder,有的不是,比方剛剛 Button 的參數 action 不是 ViewBuilder,label 是 ViewBuilder,而 ViewBuilder 裡可以寫的程式是有限制的,因此我們最好先判斷參數是否是 ViewBuilder,才知道 { } 裡可以寫怎樣的程式。

Image for post
Image for post

判斷的方法有以下幾種:

方法1: 從參數的名字和功能判斷

以 Button 為例,參數 action 是它要做的動作,參數 label 是它要顯示的內容,因此參數 label 是 ViewBuilder。


初學者剛開始開發 iOS App 時,時常會利用 IBAction,IBOutlet &segue。由於 IBAction,IBOutlet & segue 是用連線的方式產生,所以常常會遇到多連,少連或連錯的問題。

要怎麼找出連線問題呢 ? 我們可以點選感興趣的元件,利用 Connections inspector 檢查連線。

接下來我們以下圖的計算 button 為例,說明如何叫出它的 Connections inspector。

Image for post
Image for post

方法一: 點選元件後,顯示右邊的 Inspector 區塊,切換到 Connections inspector 分頁

點選 Inspector 最右邊的 icon。


Image for post
Image for post

使用 URLSession 抓取資料時,為了安全性的考量,Apple 限制我們只能抓取 https 的資料,因此以下 http 連結的圖片將無法抓取。

struct ContentView: View {
var body: some View {

Button(action: {
if let url = URL(string: "http://i.annihil.us/u/prod/marvel/i/mg/c/e0/535fecbbb9784/standard_xlarge.jpg") {
URLSession.shared.dataTask(with: url) { (data, respons …

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