# 今天午餐吃什麼？Array、Int random 練習

Source: https://kylelu.com/articles/2023-08-22-whatsforlunch-arrayint-random
Markdown alternate: https://kylelu.com/articles/2023-08-22-whatsforlunch-arrayint-random.md
Author: Kyle Lu
Published: 2025-03-22
Tags: Swift 學習筆記

辦公室總是有午餐選擇困難症？點點按鈕找靈感吧！

## 作品目的

為了解決每日的午餐選擇困難症，透過這個小專案，可以隨機挑選午餐，並熟悉 Swift 的基礎知識。

## 學習目標

- 熟悉 Xcode 介面
- 掌握 Array 陣列的使用
- 學會使用 Int random 隨機函數

## APP 的主要功能

按下按鈕時，APP 會隨機推薦以下五種料理，並附上示意圖。這些圖片我都是使用 [Canva](https://canva.com/?ref=ghost.kylelu.com) 製作，並且利用 [App Icon Generator](https://www.appicon.co/?ref=ghost.kylelu.com#image-sets) 產出 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..
- 從小區塊開始建立 view，再到 stacked view，最後建立整體的 stacked view。
- 抓出每個區塊的 fill equally。
- 為了避免壓到手機邊界，要設定 safe area

0:00 /0:22 1× 自動佈局要排得好，還有很多值得深入研究的地方，請教 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 功能，可以幫助你更快地找到和解決問題。

## 參考資源

- [iOS & Swift – The Complete iOS App Development Bootcamp](https://www.udemy.com/course/ios-13-app-development-bootcamp/?ref=ghost.kylelu.com)： Cht5-Ch6
- [How To Make An App For Beginners (iOS/Swift – 2019) ：Ch13](https://www.udemy.com/course/how-to-make-an-app-for-beginners-iosswift-2019/?ref=ghost.kylelu.com)
- [App Icon Generator](https://www.appicon.co/?ref=ghost.kylelu.com#image-sets)
- [Canva](https://canva.com/?ref=ghost.kylelu.com)