今天午餐吃什麼？Array、Int random 練習
辦公室總是有午餐選擇困難症？點點按鈕找靈感吧！
作品目的
為了解決每日的午餐選擇困難症，透過這個小專案，可以隨機挑選午餐，並熟悉 Swift 的基礎知識。
學習目標
- 熟悉 Xcode 介面
- 掌握 Array 陣列的使用
- 學會使用 Int random 隨機函數
APP 的主要功能
按下按鈕時，APP 會隨機推薦以下五種料理，並附上示意圖。這些圖片我都是使用 Canva 製作，並且利用 App Icon Generator 產出 3 種大小，提供 Xcode 使用。
- 中式：炒飯
- 韓式：石鍋拌飯
- 美式：漢堡
- 日式：壽司
- 越式：河粉
製作步驟
1 設計介面
- 使用 Interface Builder 來設計 APP 介面。
- 更改背景顏色：選擇 View -> Attributes Inspector -> Background。
- 在 imageView 中，我們要放入 Label、image 和 button。確保每個元件都有正確的 Auto Layout constraints。
2 連結介面
- 使用 IBOutlet 和 IBAction 來連接 UI 元件和程式碼。
- 將圖檔和按鈕都連結到 ViewController：按著鍵盤的 Control 並拖曳圖檔和按鈕 (Control-drag) 到 ViewController 的 code，在 Interface Builder 和 code 之間建立連接。
3 定義常數
- 使用 let 關鍵字來定義不可變的常數。
- 使用
#imageLiteral(resourceName: "料理圖片名稱")來直接在 code 中插入圖片，這蠻酷的，第一次知道 swift code 可以出現縮圖！不過圖片如果都是文字很容易看不清楚。
let foodImages: [UIImage] = [
#imageLiteral(resourceName: "us"),
#imageLiteral(resourceName: "vn"),
#imageLiteral(resourceName: "jp"),
#imageLiteral(resourceName: "cn"),
#imageLiteral(resourceName: "kr")
]
4 連結按鈕和圖片
- 使用 @IBAction 來響應按鈕的點擊事件。
- 利用 Int.random(in:) 來隨機選擇一個食物的圖片。
@IBAction func chooseFood(_ sender: UIButton) {
let randomIndex = Int.random(in: 0..<foodImages.count)
foodImageView.image = foodImages[randomIndex]
}
5 設定自動佈局
自動佈局(Auto layout) 可以確保 APP 在各種裝置和螢幕尺寸上都保持原樣、不會跑版。我覺得它很像 PPT 的「群組」功能，不僅可以對齊物件(alignment)，還能調整大小 (distribution)！
不過要排得整齊，我還在學習，目前了解到要注意這 3 點：
- 從小區塊開始建立 view，再到 stacked view，最後建立整體的 stacked view。
- 抓出每個區塊的 fill equally。
- 為了避免壓到手機邊界，要設定 safe area
0:00
/0:22
自動佈局要排得好，還有很多值得深入研究的地方，請教 ChatGPT 後，它提供以下建議：
- 理解 Constraint 的優先級：
- 每個 Constraint 都有一個優先級，範圍從 1 到 1000。預設為 1000，代表這是一個必要的約束。
- 較低的優先級意味著約束可以在需要時被打破。
- 使用 Stack View：
- Stack View 是一個非常強大的工具，可以自動管理其子視圖的佈局。
- 它可以是水平或垂直的，並且可以設定間距、對齊和分佈。
- 避免使用絕對座標：
- 當設計介面時，盡量避免使用固定的座標值。這樣可以確保你的介面在不同尺寸的螢幕上都能正確地呈現。
- 使用 Safe Area：
- Safe Area 是 iOS 11 引入的一個新概念，它考慮到了如瀏海、Home 指示器等特殊的 UI 元素。確保你的內容都在 Safe Area 內，可以避免被這些元素遮擋。
- 預覽多種裝置和方向：
- 使用 Xcode 的 Interface Builder 中的 Preview 功能，可以同時預覽多種裝置和方向的介面。這樣可以確保你的佈局在所有情況下都正確。
- 使用 Size Classes 進行適應性佈局：
- Size Classes 允許你根據裝置的尺寸和方向定制你的介面。例如，你可以為 iPad 和 iPhone 設計不同的佈局。
- Debugging Auto Layout：
- 如果你的佈局出現問題，Xcode 會在 Interface Builder 中用紅色和橙色線條來指示。
- 學會解讀這些提示，並使用 Xcode 的 Debug View Hierarchy 功能，可以幫助你更快地找到和解決問題。
