20191013

前言

今天的內容是SwiftUI的練習，題目是電子書。主要參考彼得潘大大的文章(ref4)，與兩位同學的作業範本。

現在，我們馬上開始！

練習過程

前置作業

1. 建立『OrangeCat』專案
   原則上都與前面的步驟相同，只要特別注意，User Interface的部分要選擇『SwiftUI』

2. 在Assets匯入相關圖片

第一頁

接者我們回到『ContentView.swift』開始今天的練習內容

1. 建立第一個View

struct ContentView: View {
    var body: some View {
        NavigationView{
            VStack {
                NavigationLink(destination: ListView()){
                    Image("Home")
                        .renderingMode(.original)
                        .resizable()
                        .frame(width: 400, height: 400)
                }
            }
            .navigationBarTitle("螞蟻工坊-橘皮貓")
        }
    }
}

• NavigationView 只需要一個

• NavigationLink 可以多個，在需要的地方使用。

• 按下圖片會轉換到ListView頁面

• 加入『Home』作為背景圖

第二頁 ListView

接者建立有貼圖清單的內容頁面

struct ListView: View {
    var index = 1
    var body: some View {
        VStack {
            ScrollView(Axis.Set.vertical, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(1...3, id: \.self) { name in
                        NavigationLink(destination: DetailsCatView(name: "\(name)")) {
                            Image("\(name)")
                                .renderingMode(.original)
                                .resizable()
                                .frame(width: 120, height: 120)
                        }
                    }
                }
                
// 中間內容類似，省略顯示
                
                HStack(alignment: .top, spacing: 0) {
                    ForEach(28...30, id: \.self) { name in
                        NavigationLink(destination: DetailsCatView(name: "\(name)")) {
                            Image("\(name)")
                                .renderingMode(.original)
                                .resizable()
                                .frame(width: 120, height: 120)
                        }
                    }
                }.navigationBarTitle("橘皮貓貼圖大集合")
            }
        }
    }
}

• 使用ScrollView包在外層，讓畫面可以上下滑動

• navigationBarTitle用來設定title

• 加入點小圖最後會轉換到大圖頁面的連結

• 本來想用一個ForEach來顯示所有內容，但是遇到問題。最後用重複每三張圖的HStack，來完成電子書

成品圖

首頁

第二頁

第三頁

MAC 顯示

參考『將 iPad App 變成 Mac App』文章(ref6)，讓我們的App也可以在MAC顯示

1. 勾選支援MAC

接者選擇『Enable』

2. 設定『Sign to Run Locally』

3. 執行成果

• 檔案路徑可以從Dock中滑鼠右鍵來查看 (顯示於Finder)

• 之後只要點擊程式就可以執行了

總結

今天我們練習了SwiftUI電子書的專案，並且在MAC上執行，SwiftUI還有許多有趣的功能與元件，有興趣的讀者可以參考彼得潘大大的文章，以及Apple的文件(ref7)，來繼續深入研究。

而練習的過程中，Apple Tutorials也幫了很多忙，看到右邊的成品圖，左邊就有程式碼範例可以參考，真的十分方便。

特別感謝橘皮貓的作者(ref8)，借我使用貼圖，讓我完成這個作品練習，所有版權皆屬原作者所有，本文僅作App開發練習使用。

今天的內容就到這邊，感謝讀者們的閱讀。

Github:

https://github.com/chiron-wang/IT30_11

參考資料與延伸閱讀

1. 深入淺出 iPhone 開發 (使用 Swift4) - WeiWei
   https://www.udemy.com/course/iphone-swift4/

2. iOS 12 App 開發快速入門與實戰(繁體中文)
   https://www.udemy.com/course/ios-12-app/

3. 心智圖軟體Xmind
   https://www.xmind.net/

4. Apple SwiftUI
   https://developer.apple.com/documentation/swiftui/

5. 利用 SwiftUI 製作電子書 App
   https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/%E5%88%A9%E7%94%A8-swiftui-%E8%A3%BD%E4%BD%9C%E9%9B%BB%E5%AD%90%E6%9B%B8-app-9d48badfeea3

6. 將 iPad App 變成 Mac App
   https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%B0%87-ipad-app-%E8%AE%8A%E6%88%90-mac-app-678b2ed1cccb

7. SwiftUI Tutorials
   https://developer.apple.com/tutorials/swiftui/

8. 螞蟻工坊-橘皮貓 粉絲團
   https://www.facebook.com/orangecat0116/

9. 橘皮貓
   https://store.line.me/stickershop/product/1391155/zh-Hant?from=sticker

10. 橘皮貓-2上班好有趣 貼圖
    https://store.line.me/stickershop/product/1892967/

[練習參考]

11. IOS作業二：八三夭電子書
    https://medium.com/%E6%B5%B7%E5%A4%A7-ios-app-%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88/ios%E4%BD%9C%E6%A5%AD%E4%BA%8C-%E5%85%AB%E4%B8%89%E5%A4%AD%E9%9B%BB%E5%AD%90%E6%9B%B8-eece09e4aca8

12. SwiftUI_Navigation Controller的頁面傳遞&表格 ft. Disney Princesses
    https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/swiftui-navigation-controller%E7%9A%84%E9%A0%81%E9%9D%A2%E5%82%B3%E9%81%9E-%E8%A1%A8%E6%A0%BC-ft-disney-princesses-e40a8530cb05