Sign in Subscribe
Swift 學習筆記

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

Kyle Lu

• 4 min read
今天午餐吃什麼？Array、Int random 練習

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

作品目的

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

學習目標

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

APP 的主要功能

按下按鈕時，APP 會隨機推薦以下五種料理，並附上示意圖。這些圖片我都是使用 Canva 製作，並且利用 App Icon Generator 產出 3 種大小，提供 Xcode 使用。

  1. 中式：炒飯
  2. 韓式：石鍋拌飯
  3. 美式：漢堡
  4. 日式：壽司
  5. 越式：河粉

製作步驟

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 點：

  1. 從小區塊開始建立 view，再到 stacked view，最後建立整體的 stacked view。
  2. 抓出每個區塊的 fill equally。
  3. 為了避免壓到手機邊界，要設定 safe area
0:00
/0:22

自動佈局要排得好，還有很多值得深入研究的地方，請教 ChatGPT 後，它提供以下建議：

  1. 理解 Constraint 的優先級：
    • 每個 Constraint 都有一個優先級，範圍從 1 到 1000。預設為 1000，代表這是一個必要的約束。
    • 較低的優先級意味著約束可以在需要時被打破。
  2. 使用 Stack View：
    • Stack View 是一個非常強大的工具，可以自動管理其子視圖的佈局。
    • 它可以是水平或垂直的，並且可以設定間距、對齊和分佈。
  3. 避免使用絕對座標：
    • 當設計介面時，盡量避免使用固定的座標值。這樣可以確保你的介面在不同尺寸的螢幕上都能正確地呈現。
  4. 使用 Safe Area：
    • Safe Area 是 iOS 11 引入的一個新概念，它考慮到了如瀏海、Home 指示器等特殊的 UI 元素。確保你的內容都在 Safe Area 內，可以避免被這些元素遮擋。
  5. 預覽多種裝置和方向：
    • 使用 Xcode 的 Interface Builder 中的 Preview 功能，可以同時預覽多種裝置和方向的介面。這樣可以確保你的佈局在所有情況下都正確。
  6. 使用 Size Classes 進行適應性佈局：
    • Size Classes 允許你根據裝置的尺寸和方向定制你的介面。例如，你可以為 iPad 和 iPhone 設計不同的佈局。
  7. Debugging Auto Layout：
    • 如果你的佈局出現問題，Xcode 會在 Interface Builder 中用紅色和橙色線條來指示。
    • 學會解讀這些提示，並使用 Xcode 的 Debug View Hierarchy 功能，可以幫助你更快地找到和解決問題。

參考資源