作業#41 — 常用 UI 元件指南

練習 Storyboard Reference。

作業來源：

#24 Storyboard 電子書 App

目錄

Preview
Steps
  主要架構
  Storyboard Reference
appetize.io 模擬器
Github 交作業

Preview

一開始我有三秒鐘的雄心壯志想要製作整個 HIG 繁體中文版的電子書，但一打開龐大的筆記就立刻打消了這個念頭，並退而求其次次次的只做常見 UI 元件的介紹 🤣。

每一個 UI 元件共有三個頁面說明： Attributed inspector 搭配可互動的示範元件、對應的程式碼整理、以及 Apple Developer 上的 Human Interface Guidelines 節選：

Steps

1. 主要架構：

Navigation Controller + Table View Controller + Tab Bar Controller。

2. Storyboard Reference

為了避免繁多的 view controllers 導致 mac 彩虹小圈圈轉不停，我將個別元件的說明頁面們都使用 Editor > Refactor to Storyboard 分出去成為獨立的 Storyboard，真的可以減少很多製作及返工修改 loading 的時間～

Storyboard Reference 的作法是參考彼得潘的此篇文章：

利用多個 storyboard 和 storyboard reference 製作 App 畫面

p.s. 製作中途 Xcode 曾一度當機被強制關閉，重新打開後發現半數的 storyboard 都不見了….. 兵荒馬亂一陣後，好在最後在 mac library 的 autosave information 資料夾找回來了😂 重新將 storyboards 加入 project 中再新增 Storyboard Reference 手動連結，幸好都成功連回來啦。

appetize.io 模擬器

App

＊appetize.io 免費帳戶一個月只有 50 分鐘，如果出現 “Streaming for this account has been temporarily disabled” 就是這個月的額度被用完啦😆 要等下個月才會再重新開始計算。

Github 交作業

GitHub - Pei-7/-UI-