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


開發 iOS App 時,我們時常修修改改,因此時常點選三角形重新執行 App。

不過如果原本已經有正在執行的 App, Xcode 將跳出一個煩人的視窗,詢問我們是否真的要關掉原本執行的 App,啟動新的 App。


SwiftUI 可以很方便地製作動畫效果,利用 modifier 的變化,SwiftUI 將能幫我們製造變化過程中的動畫。

比方以下例子,按下Peter 轉轉轉後,圖片的旋轉角度從原本的 0 度變成 70 度,因此圖片將以動畫的方式從 0 度轉到 70 度。

struct ContentView: View {

@State private var rotate = false

var body: some View {
VStack {
Image("peter")
.rotationEffect(.degrees(rotate ? 70 : 0))


SwiftUI 切換頁面有很多方法,除了使用 NavigationLink & sheet 幫我們切換,我們也可以利用 ZStack 容納頁面,然後用 if 控制頁面是否顯示,例如以下例子:

第一頁的畫面

struct FirstView: View {
var body: some View {
ZStack {
Color.pink
.edgesIgnoringSafeArea(.all)
Image(systemName: "1.circle")
.resizable()
.scaledToFit()


開發 SwiftUI App 時,我們時常使用 Stack,List 或 Grid 排列元件,呈現 array 的資料。有時我們會想調整元件排列的順序,能讓它用生動的動畫重新排列嗎 ?

當然可以。實現的方法很簡單,只要呼叫 withAnimation,在 closure 裡將 array shuffle 即可。接下來讓我們分別看看 Stack,List & Grid 的排列動畫。

Stack 的排列動畫

struct ContentView: View {

@State var albums = ["不夠大擔", "天使詩篇", "心焚如火", "如果沒有...林隆璇"]

var body: some View {

VStack(spacing: 2 …


江湖傳說程式高手都會用 Vim 打程式,因為它有以下好處:

  • 不用動到滑鼠,手指完全在鍵盤上操作,達到神人般快如閃電的開發速度。
  • 有許多特別的指令,比方它有 Xcode 沒有的 duplicate line,輸入 yy5p 可複製貼上 5 行程式。

從 Xcode 13 開始,我們也可以在 Xcode 用 vim 模式打程式了。彼得潘雖然不是 vim 高手,接下來也來試試 vim 打字的滋味,假裝自己是程式高手。(ps: 彼得潘跟 Vim 最熟的時候應該是研究所用 Linux 時候,其實離現在也沒有很久啦。)

打開 Xcode 的 Vim 編輯模式

點選 Xcode > Preferences。

切換到 Text Editing 頁面,勾選 Editing 分頁下的 Enable Vim key bindings


Xcode 13 的自動完成變得更方便了,主要包含以下幾點:

  • 搜尋二層的 property 或 method
  • if let & guard let
  • for in
  • switch 搭配 enum
  • 自動 import

搜尋二層的 property 或 method

struct Cat {
var name: String
}
struct Woman {
var cat: Cat
func sing() {
}
}
struct Man {
var girlFriend: Woman
}
let cat = Cat(name: "kitty")
let cuteWoman = Woman(cat: cat)
let superMan = Man(girlFriend: cuteWoman)

在 superMan 後輸入 c,找到 girlFriend.cat。

在 superMan 後輸入 si,找到 girlFriend.sing()。


Xcode 13 變得更方便了。當我們輸入 guard let 跟 if let 時,只要在 let 後輸入 optional 的名字,比方 name,就可以從選單選擇 name = name 的選項了。

if let 的自動完成


從 iOS 15 開始,SwiftUI 終於推出顯示網路圖片的元件了,AsyncImage。

顯示網路上的圖片

struct ContentView: View {
var body: some View {
AsyncImage(url: URL(string: "https://images-na.ssl-images-amazon.com/images/I/61+JNEBd6HL.jpg"))
}
}

生成 AsyncImage 時,我們可以傳入圖片的 url,它將自動幫我們抓取網路上的圖片顯示。

由於網路抓圖需要時間,所以 AsyncImage 還沒抓到圖時將顯示灰色, 抓到圖時再顯示抓到的圖片。


接下來我們將示範利用 previewInterfaceOrientation將以下程式的直向預覽畫面變成橫向。

struct ContentView: View {
var body: some View {
Image("wwdc")
.resizable()
.scaledToFit()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

設定橫向(landscape)的 preview

方法 1: 點選 preview 上方的旋轉按鈕

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