導言

今天我們將從 Swift UIKit 的基礎開始，介紹如何使用 UILabel、UIImageView 和 UIButton 來製作一個簡單的互動應用。這是每個 iOS 開發者的必經之路，學習如何在應用中顯示文字、圖片和按鈕。透過這個範例，我們將進一步探索 iOS 視覺介面的設計。

SwiftUI?

當學習 UIKit 時，常有人會產生疑問：既然有了 SwiftUI 這個新框架，還有必要學習 UIKit 嗎？
答案是肯定的！雖然 SwiftUI 是蘋果推出的新框架，提供了更多優點，並以更簡單的宣告式語法設計 iOS 界面，但 UIKit 仍然是蘋果生態系中穩定且功能強大的開發框架。以下幾個理由，說明了 UIKit 為什麼仍然重要：

• Storyboard 的優勢：UIKit 中的 Storyboard 是一個強大的視覺化工具，讓開發者可以拖拽 UI 元素並通過連接元件來設計應用的流程。這對於初學者來說非常直觀，可以快速實現介面設計與畫面切換，而不必從一開始就編寫複雜的代碼。這樣的方式讓開發更具象化，有助於掌握應用的整體結構和流程。
• 成熟度與兼容性：UIKit 已經累積了豐富的功能與廣泛的支援。許多現有專案仍然使用 UIKit，對於維護舊有應用或與舊版系統兼容，UIKit 依然是首選。
• 社群與資源：UIKit 擁有更成熟的學習資源與範例程式碼，對於初學者來說，學習 UIKit 可以更好地理解 iOS 開發的歷史與原理。
• 功能覆蓋：某些高階功能，UIKit 目前仍比 SwiftUI 提供更完整的支援。
• 商業專案的需求：許多商業應用的專案還未完全轉向 SwiftUI，因此掌握 UIKit 依然是求職、專案開發中的一項關鍵技能。

因此，這個系列將帶初學者打下穩固的 UIKit 基礎，並為未來學習 SwiftUI 做好準備。由於 SwiftUI 和 UIKit 之間有許多共通的概念，從 UIKit 開始學習，能幫助你更全面地理解 iOS 的開發架構。

今天學習目標

• 了解如何設計簡單的 UI 並透過 Storyboard 建立基本的畫面互動。
• 理解 Label Image 和 Button 在 Swift UIKit 中的應用。
• 如何添加圖片資源
• 執行App及截圖
• 錄製操作過程的 GIF 及 影片

預覽效果

教學步驟

Step 1: 環境設置

• 安裝 Xcode：你可以在 App Store 上安裝 Xcode，也可以前往開發者網站下載最新版的 Xcode 進行安裝。。
  
• 創建新專案：打開 Xcode，選擇 "Create new project"。在專案範本選擇畫面，選擇 "App" 並點擊 "Next"。在新的視窗中，將 Interface 選為 "Storyboard"，Language 選為 "Swift"，再輸入專案名稱，點擊 "Next" 並選擇專案的儲存路徑。
• 添加圖片資源：打開專案中的 Assets.xcassets，在左側列表空白處點擊右鍵選擇 "Import"，將你需要的圖片資源加入專案，或直接從 Finder 拖放圖片進來。點擊圖片後，可以修改名稱以便後續使用。
  

Step 2: 設計 UI

• 加入 UIKit 元件：打開 Main.storyboard，點擊右上角的 "+" 圖示（Show Library），這會打開元件庫選擇視窗。從中搜尋 Label、ImageView 和 Button，然後將這些元件拖拽至畫布上。調整它們的大小並置中排列，這樣整體畫面會看起來整潔、集中。
  
• 設定故事文字描述：點擊 Label，在右邊的 Attributes Inspector 中，修改文字屬性來顯示故事中的描述文字。調整字體大小與顏色，讓文字與背景視覺效果一致。
• 設定行動按鍵文字：點擊 Button，同樣在 Attributes Inspector 中，修改 Title 欄位為適合的按鍵標題。這將作為使用者互動的一部分。
• 設定故事場景圖片：點擊 ImageView，在 Attributes Inspector 中，從 Image 下拉選單選擇你之前在 Assets.xcassets 中添加的圖片。這張圖片將作為故事卡片的場景圖。
  
• 變更 View 的背景色：選中畫布中最上層的 View，然後在 Attributes Inspector 中的 Background 欄位，選擇你喜歡的背景顏色。更改背景色能幫助文字和圖片更加突出，增強視覺層次。
  

Step 3: 執行App、錄製截圖及影片

• 執行應用：在視窗上方選擇模擬器（如 iPhone 11），點擊左邊的 Run 按鈕來執行應用。你可以在模擬器上看到剛才設計的 UI 並進行互動。
  

• 錄製操作截圖和影片：在模擬器上方的功能列，可以按住 Option 鍵，來切換截圖或錄影模式。錄製影片和截圖對於記錄 App 操作流程，或分享開發成果都很有幫助。
  

回顧重點：

重點 1: 如何加入圖片資源？
重點 2: 如何將 UI 元件拖放到 storyboard 畫面上？
重點 3: 如何執行App?
重點 4: 如何錄製截圖及影片？

總結

今天我們學習了 storyboard 的基本操作，成功運用 Label ，Image 與 Button 建立了一張圖像故事卡片。我們還學會了如何在模擬器中執行應用，以及錄製操作截圖與影片。接下來的課程將更深入探討畫面切換與互動設計，讓你更深入掌握 iOS 開發技能。

附錄：已接觸的 UIKit 元件

• UILabel (Day 01) – 用來顯示文字，例如顯示故事的標題或內容。
• UIButton (Day 01) – 用來處理按鈕點擊事件，例如進行故事選擇或確認操作。
• UIImageView (Day 01) – 用來顯示圖片，例如顯示故事相關的圖片。