Swift UI 基礎

今天開 2020 年的 WWDC 了，所以來學習一下 Apple 的 app 開發吧。

這篇文章是 Apple 給的 SwiftUI 官方教程的一部分，我自己閱讀學習的時候順便翻譯的，并加入了一些我自己的理解、看法和拓展。

英文原文：https://developer.apple.com/tutorials/swiftui/tutorials

創建并組合視圖

原文鏈接：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

這個教程教你構建一個 iOS app —— Landmarks。這個 App 是用來發現、分享你喜歡的地點的。我們會從構建一個顯示地標(Landmarks) 詳情的 View 開始。

要布局這個地標詳情的 View，我們用 stacks 來組合、堆放¹ 圖片和文本視圖組件。我們還要用引入 MapKit 組件來提供地圖視圖。在你修改視圖的時候，Xcode 會給你及時的反饋，讓你看到改變的代碼。

下載項目文件，跟著下面的步驟開始構建工程吧：

預計用時：40 分鐘

下載項目文件：https://docs-assets.developer.apple.com/published/b90bcabe8b9615e22850aaf17f3e7dfd/110/CreatingAndCombiningViews.zip

Xcode 11：https://itunes.apple.com/us/app/xcode/id497799835?mt=12

§ 1 創建新項目和探索畫布

原文鏈接：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#create-a-new-project-and-explore-the-canvas

在 Xcode 創建一個使用 SwiftUI 的新項目。在里面探索畫布、預覽和 SwiftUI 的模版代碼。

要在 Xcode 里預覽視圖，并與之交互，需要 macOS Catalina 10.15。²

Step 1. 打開 Xcode，然后在 Xcode 的啟動頁面點擊 Create a new Xcode project，或者選擇 File > New > Project。³

Step 2. 在模版選擇窗口里選擇 iOS 平臺、Single View App 模版，然后點擊 Next。

Step 3. 在 Product Name 處輸入“Landmarks”，user interface 選擇 SwiftUI，點擊 Next。然后選擇一個位置在你的 Mac 上保存這個項目。

Step 4. 在項目導航欄(Project navigator)里選擇ContentView.swift。默認情況下，SwiftUI 聲明了兩個結構體，第一個遵循了 View 協議，是用來描述視圖的內容和布局的；第二個結構體聲明了對這個視圖的預覽。

Step 5. 在畫布(canvas)里點擊 **Resume ** 來顯示預覽。

Tips：如果畫布沒有顯示，你可以選擇Editor > Editor and Canvas，來打卡它。

Step 6. 在 body 屬性里，把 “Hello World” 改成對你自己打招呼的話。

在你改變視圖體(a view’s body property)的時候，預覽及時地反映出了你的改變。

完成這一節后，我們的主要代碼看上去是這樣的：

struct ContentView: View {
    var body: some View {
        Text("Hello SwiftUI!")
    }
}

【譯注】：由于本人使用 MacOS Mojave 10.14，所以無法使用預覽的功能。這還是相當痛苦的，沒有預覽幾乎難以進行 UI 設計了，所以我采取的代替方案是在 Playground 中寫 SwiftUI。實現的步驟如下：

新建一個 Playground，選擇 iOS 平臺，Blank 模版。打開 Playground 后，把里面的代碼替換如下：

import SwiftUI
import PlaygroundSupport

struct HelloWoldView: View {
    var body: some View {
        Text("Hello World")
    }
}

PlaygroundPage.current.setLiveView(HelloWoldView())

運行 Playground 至第 10 行（鼠標移到第十行的行標處，數字變成表示運行的箭頭?，點擊這個箭頭），即可看到預覽：

這樣勉強可以進行 SwiftUI 的開發，只是無法如在 Catalina 的 Xcode 項目里那樣和畫布交互。

§ 2 定制文本視圖(Text View)

原文鏈接: https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#customize-the-text-view

通過修改代碼，你可以定制視圖的顯示效果。當然，你也可以用檢視器(inspector)來發現你可以做些什么，并幫助你完成代碼。

在構建 Landmarks app 的過程中，你可以隨意使用任何編輯器：代碼編輯器(source editor)，畫布(canvas)，檢視器(inspectors)。無論你使用了那種方式來編輯，代碼總會自動保持更新。

接下來，我們將使用監視器來定制文本視圖。

Step 1. 在預覽中，按住 command 點擊我們寫了問候的文本，會出現一個結構編輯彈出框(popover)。在這個彈出框里，選擇 Inspect。

這個彈出框里還有其他的你可以定制的屬性，不同的視圖可能有不同的屬性。

Step 2. 在檢視器中，把文本(Text)改成 “Turtle Rock” —— 你的 app 中要展現的第一個地標。

Step 3. 把字體修改成 Title (標題)。

這個操作是讓文本使用系統字體，這種字體可以跟隨用戶當前的偏好設置。

【譯注】也可以使用代碼完成這個更改: Text("Turtle Rock").font(.title)。哈哈，這種寫法就很 Swift，具體這是什么意思下面的原文有寫。

要用 SwiftUI 定制視圖，我們可以調用稱作修飾器(modifiers)的方法。修飾器會包裝一個 View 來更改其顯示效果或其他屬性。每個修飾器都會返回一個新的 View，所以我們常鏈式調用多個修飾器以疊加效果。

Step 4. 手動修改代碼，添加一個修飾器：foregroundColor(.green)，這是用來把文本顏色改成綠色的：

代碼才是我們的視圖效果的依據，當你用檢視器來修改或移除修飾器時，Xcode 都會立刻在代碼里做出相應的修改。

Step 5. 現在，我們在代碼里按住 Command 點擊 Text 的聲明，從彈出框里選擇 Inspect，這樣也可以打開監視器。在 Color 菜單里，把顏色設置成 Inherited，這樣文本的顏色就復原了。

Step 6. 注意，完成剛才那一步之后， Xcode 自動幫我們把代碼做了相應的修改，即去掉了修飾器 foregroundColor(.green)：

---

完成這一節后，我們的主要代碼看上去是這樣的：

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)

    }
}

§ 3 用 Stacks 組合視圖

原文鏈接: https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#Combine-Views-Using-Stacks

在上一節我們完成了一個標題。現在，我們將再添加一些文本視圖來描述地標的詳細信息，比如所處的公園名稱和所在的州。

在使用 SwiftUI 創建 View 時，我們在視圖的 body 屬性里描述其內容、布局、行為。但是，body 屬性只會返回一個視圖。所以，我們要把多個視圖放到 stack 里來讓它們在水平、豎直、前后方向上組合在一起。

在這一節里，我們我們將用一個豎直方向的 stack 來把標題放在一個包含了地標細節的水平 stack 的上方。

（emmm，我一直不太會翻譯這種比較長的英文句子，可能是我語文學的不好吧，我不知道怎么解耦這種有嵌套結構的句子）

我們 Xcode 的結構編輯(structured editing)提供把一個 view 嵌入一個容器視圖、打開檢視器和其他許多有用的操作。

Step 1. 按住 Command 點擊文本視圖的初始化器(構造函數啦)，會顯示出結構編輯彈出框，在里面選擇 Embed in VStack（嵌入VStack）。

接下來，我們將通過從庫里拖一個 Text 放到 Stack 里增加一個文本視圖。

Step 2. 點擊位于 Xcode 窗口右上方的加號（+）打開庫。從里面拖一個 Text 出來放到我們的“Turtle Rock”文本視圖代碼的后面。

Step 3. 把新的文本視圖的內容替換為“Joshua Tree National Park”。

接下來我們還會定制剛剛添加的那個表示位置的文本視圖，以匹配所需的布局。

Step 4. 設置位置文本的字體為 subheadline（副標題）。

Text("Joshua Tree National Park")
	.font(.subheadline)

Step 5. 編輯 VStack 的初始化器來指定視圖前緣對齊（align the views by their leading edges，就是把左邊對齊了，Android 里的 gravity="start" 這種意思吧）。

默認情況下，stack 會沿其軸線把內容中心對齊，并且只提供適合內容的空間。

接下來，我們要在表示位置的文本右邊增加一個文本，表示其所在的州。

Step 6. 在畫布中，按住 Command 點擊 Joshua Tree National Park，選擇 Embed in HStack（嵌入HStack）。

Step 7. 在位置后面新建一個文本視圖，把內容改成州名，把字體設置為 subheadline。

Step 8. 為了讓我們的布局占滿整個設備的屏幕寬度，我們在包含公園和州名的 HStack 里添加一個 Spacer 來把兩個文本視圖分開。

Spacer 用來“撐大”容器布局，使其占滿整個水平或豎直方向的父視圖（its parent view）空間，而不再只是恰好包含內容。

Step 9. 最后，使用 padding() 修飾方法給地標的名稱和細節增加一點空間。

---

完成這一節后，我們的主要代碼看上去是這樣的：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack{
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

§ 4 創建自定義圖片視圖(Custom Image View)

現在，咱們的地標名稱、位置都已經安排好了。下一步，我們打算加一張地標的圖片。

我們將創建一個新的自定義視圖，而不是直接在現在的文件里繼續寫更多的代碼了。這個自定義視圖將包含有遮罩、邊框和投影。

首先，我們要先添加圖片到項目的資產目錄( asset catalog)。

Step 1. 把 turtlerock.png （在Apple給的項目文件里的 Resources 文件夾里有）把它拖到 資產目錄 編輯器里，Xcode 會為這個新圖片創建一個圖片集。

【譯注】那個圖片就是下面這張

接下來，我們要創建一個新的 SwiftUI View 來寫我們的自定義圖片視圖。

Step 2. 選擇 File > New > File，打開模版選擇器，在 User Interface 中，選擇 SwiftUI View，然后點 Next，把文件名取成 CircleImage.swift，然后點 Create。

現在，我們就準備好插入圖片，然后修改顯示效果來達到我們的預期目標了。

Step 3. 用我們剛才準備好的圖片來替換新建的文件里的文本視圖，用 Image(_:) 來顯示一張圖片。

【譯注】在 Playground 里寫 Image("turtlerock") 要不成，要用 Image(uiImage: UIImage(named: "turtlerock.jpg")!)

Step 4. 添加一個 clipShape(Circle()) 調用來把圖片裁剪為圓形。

Circle 類型是一個形狀，你可以把它當遮罩(mask)用，也可以把它作為一個圓形的視圖（有圓形的筆觸或者圓形填充的）。

Step 5. 再創建一個新的灰色筆觸的圓，然后把它作為 overlay 加到我們之前的 Image 上，這樣可以作出一個邊框效果。

Step 6. 接下來，添加一個半徑為 10 點的陰影。

Step 7. 把邊框顏色改成白色。

現在，我們的自定義圖片視圖就完成了。

---

完成這一節后，我們的主要代碼看上去是這樣的：

struct CircleImage: View {
    public var body: some View {
        // Playground 里換成：Image(uiImage: UIImage(named: "turtlerock.jpg")!)
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 10)
}

---

Clown0te("防盜文爬:)蟲的追蹤標簽，讀者不必在意").by(CDFMLR)

§ 5 同時使用 SwiftUI 和 UIKit

現在，咱打算做一個地圖視圖了。我們可以用一個來自 MapKit 的 MKMapView 類來提供一個地圖視圖。

要在 SwiftUI 中使用 UIView 的子類，我們要把它用一個實現了 UIViewRepresentable 協議的 SwiftUI 視圖包裹起來。SwiftUI 也對 WatchKit 和 AppKit 的視圖提供了相似的協議。

首先，我們要自定義一個視圖來包裝 MKMapView。

Step 1. 選擇 File > New > File，打開模版選擇器，在 User Interface 中，選擇 SwiftUI View，然后點 Next，把文件名取成 MapView.swift，然后點 Create。

Step 2. 添加一個 import 語句來導入 MapKit，然后讓 MapView 遵循 UIViewRepresentable 協議：

// MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    var body: some View {
        Text("Hello World")
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

別介意 Xcode 提示的錯誤，我們將在接下來幾步里解決這些問題。

接下來我們要完成 UIViewRepresentable 要求兩個實現：

• makeUIView(context:)：這個方法用來創建 MKMapView；
• updateUIView(_:context:)：這個方法用來設定視圖，并對任意改變作出響應。

Step 3. 把新建的視圖里的 body 屬性的代碼替換成定義一個 makeUIView(context:) 方法，這個方法用來創建并返回一個新的 KMapView。

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
}

Step 4. 在 MapView 里添加一個 updateUIView(_:context:) 方法來設置我們的地圖把要顯示的位置放到中心位置。

func updateUIView(_ uiView: MKMapView, context: Context) {
    let coordinate = CLLocationCoordinate2D(
        latitude: 34.011286, longitude: -116.166868)
    let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
    let region = MKCoordinateRegion(center: coordinate, span: span)
    uiView.setRegion(region, animated: true)
}

由于在靜態模式（static mode）下預覽只會渲染 SwiftUI 視圖，而我們的地圖是個 UIView 的子類，所以我們需要把預覽調到 live 模式（live preview）才能看見地圖。

Step 5. 點擊 Live Preview 按鈕來把預覽調至 live 模式。然后，你可能還需要點擊 Try Again 或者 Resume 按鈕才能顯示出預期的效果。

現在，我們將看見一張顯示著 Joshua Tree National Park 的地圖——這就是我們的地標 Turtle Rock 的家。

---

這一節里，我們完成的主要代碼看上去是這樣的：

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

§ 6 組成 Detail 視圖

現在，我們已經構建完了我們需要的一切——地標的名字和位置、一張圓形的圖片以及其所在位置的地圖。

現在，我們要把這些我們寫好的自定義視圖組合在一起，來完成一個地標的 Detail 視圖的最終設計了！我們要用到的還是已經開始熟悉的那些工具。

Step 1. 在項目導航（Project navigator）中，選擇打開 ContentView.swift 文件。

Step 2. 把之前那個包含三個 Text 的 VStack 用另一個新的 VStack 包裹起來。

Step 3. 把我們自定義的 MapView 放到 stack 的頂部，并用 frame(width:height:) 來調整其大小。

當你只指定了 height（高度）屬性時，視圖會自動把寬度設置成符合內容的。在這里，MapView 會拓展開充滿整個可用空間。

Step 4. 點擊 Live Preview 按鈕來查看在組合視圖中渲染出來的地圖。

在顯示 Live Preview 的同時，你也還可以繼續編輯視圖。

Step 5. 在 stack 里添加一個 CircleImage。

Step 6. 我們要把圖片視圖移到地圖視圖的上層：給它豎直偏移(offset) -130 點，底部內補(padding) -130 點。

這個調整通過把圖片向上移，來提供給文本更多空間。

Step 7. 在最外層的 VStack 的底部增加一個 spacer，把我們的那些內容推到屏幕頂部。

Step 8. 最后一步，為了能讓我們的地圖拓展到屏幕頂部邊緣（說直白點就是伸到劉海里），給地圖視圖加一個 edgesIgnoringSafeArea(.top) 修飾。

---

這一節里，我們完成的主要代碼看上去是這樣的：

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

---

1. combine and layer，我的理解是 combine 在同一水平面組合，layer 做垂直方向上堆放 ?

2. 本人使用 MacOS Mojave 10.14，所以無法使用預覽的功能，我采取的代替方案是在 Playground 中寫 SwiftUI： ?

3. 分享一個讓我很感動的細節，Apple 的文檔里，居然對這樣的一張截圖寫了如此詳細的 alt 說明： 捫心自問，我從來不認真寫 alt，總認為這東西又看不見寫它干嘛！看到了 Apple 的做法，不禁思索，萬一正在閱讀你的文章的人因為網絡、計算機、甚至是視覺問題無法看到這張圖片，我們難道沒有義務為這樣的特殊人群寫一段圖片說明嘛？尤其是對有視覺障礙的人士！以后我會盡可能認真寫 alt！第一步就是——這篇文章翻譯里包括這些 alt！ ?