#26 擇偶條件｜速食店點餐App

其實這是去年十一月剛開始上課時做的App，因為實在太懶得寫成文章了就一直被擺著哈，整理電腦時看到被遺忘已久的App決定還是來寫一下。
目的: 學習 IBOutlet，IBAction 和 if else。

App功能介紹

速食店點餐APP，輸入名字後進行選餐，可以選擇的餐點內容如下：

1. 飲料種類
2. 薯條大小
3. 漢堡是否加大

最後會顯示所選擇餐點的圖片，飲料會依造選擇的項目換圖片，薯條和漢堡會依照選擇尺寸自動變更圖片大小，右上方號碼牌會隨機顯示號碼，最下方文字會顯示所輸入的名字。

Demo動畫

Storyboard

上半部為點餐區，下半部為按下Order後會出現所選擇的餐點內容。
飲料種類：判斷Segmented Controller的值決定ImageView顯示哪一張圖
薯條尺寸：設定width constraint IBOutlet，判斷Slider值來變更圖片大小
漢堡尺寸：設定width constraint IBOutlet，判斷Switch狀態來變更圖片大小

Outlet定義

• 餐點ImageView

// MARK: - Meal Image Outlet
@IBOutlet var beverageImage: UIImageView!
@IBOutlet var hamburgerImage: UIImageView!
@IBOutlet var friesImage: UIImageView!

這邊另外拉了friesImage和hamburgerImage的Width Constraint，因為之後會利用更改寬度來變更圖片尺寸。

@IBOutlet var friesWidth: NSLayoutConstraint!
@IBOutlet var hamburgerWidth: NSLayoutConstraint!

• 訂單訊息Label

// MARK: - Order Message Outlet
@IBOutlet var beforeOrderMessageLabel: UILabel!
@IBOutlet var afterOrderMessageLabel: UILabel!
@IBOutlet var orderNumberLabel: UILabel!

• 餐點表單

// MARK: - Form Outlet
@IBOutlet var nameTextField: UITextField!
@IBOutlet var beverageSegmentedControl: UISegmentedControl!
@IBOutlet var friesSlider: UISlider!
@IBOutlet var friesSizeLabel: UILabel!
@IBOutlet var hamburgerSizeSwitch: UISwitch!

UISlider

用friesSlider.value取得目前slider的值後，在右方標籤顯示相對應的尺寸英文名稱

@IBAction func friesSliderChange(_ sender: UISlider) {
    let sliderValue = Int(sender.value)
    switch sliderValue {
    case 1:
        friesSizeLabel.text = "Small"
    case 2:
        friesSizeLabel.text = "Medium"
    case 3:
        friesSizeLabel.text = "Large"
    default:
        friesSizeLabel.text = "Medium"
    }
}

UISlider已在Storyboard中設定最小值為1最大值為3，因此這邊使用數字來判斷尺寸→1:Small、2:Medium、3:Large

UISlider最大值及最小值設定

呈現一格一格滑動的UISlider

@IBAction func friesSliderChange(_ sender: UISlider) {
    sender.setValue(sender.value.rounded(), animated: false)
}

利用sender.value取得目前sender的值後，將所取得的值rounded()後設定為新的sender值。
這次slider設定為1–3之間的值。使用者滑到值會自動rounded()，因此當值為1.2時會修正為1、當值為1.5時變成2、2.3時變成2...以此類推，因此slider的值會永遠維持整數。
*animated必須設定為false否則會像下面的動畫一樣亂飄

viewDidLoad設定

設定初始隱藏的元件

點餐前不會顯示餐點圖片、號碼牌及取餐訊息，因此用isHidden來隱藏元件。

(左)點餐前畫面 (右)點餐後畫面

beverageImage.isHidden = true
hamburgerImage.isHidden = true
friesImage.isHidden = true
afterOrderMessageLabel.isHidden = true
orderNumberLabel.isHidden = true

設定SegmentedControl, Slider, Switch的初始值

beverageSegmentedControl.selectedSegmentIndex = 0
friesSlider.value = 2
friesSizeLabel.text = "Medium"
hamburgerSizeSwitch.isOn = false

按下Order後所產生的動作

首先先從Storyboard拉orderButton的IBAction，接下來的程式碼都會寫在裡面。

@IBAction func orderPressed(_ sender: Any) {}

顯示點餐後畫面

這邊是相對應viewDidLoad()時所設定隱藏顯示的物件，在按下Order後會顯示餐點圖片、取餐訊息(afterOrderMessageLabel)及點餐號碼牌(orderNumberLabel)，並隱藏歡迎訊息(beforeOrderMessageLabel)

// Show meal images, order number and order message
beverageImage.isHidden = false
hamburgerImage.isHidden = false
friesImage.isHidden = false
afterOrderMessageLabel.isHidden = false
orderNumberLabel.isHidden = false
// Hide Welcome Message
beforeOrderMessageLabel.isHidden = true

判斷飲料選項(SegmentedControl)

1. 用.selectedSegmentIndex取得現在所選的index
2. 用.titleForSegment取得現在所選選項的標題
3. 用UIImage(named: 圖片名稱)依照所選選項變更顯示的飲料圖片

let beverageIndex = beverageSegmentedControl.selectedSegmentIndex
let beverage = beverageSegmentedControl.titleForSegment(at: beverageIndex)!
beverageImage.image = UIImage(named: beverage.lowercased())

判斷薯條尺寸(Slider)

利用friesSlider.value判斷選擇的薯條尺寸後，變更constraint constant來更改圖片大小。

switch friesSlider.value {
case 1:
    friesWidth.constant = 100
case 2:
    friesWidth.constant = 150
case 3:
    friesWidth.constant = 200
default:
    friesWidth.constant = 150
}

判斷漢堡尺寸(Switch)

用.isOn判斷是否開啟漢堡加大選項，並和薯條尺寸一樣用先前設定好的width constraint變更圖片大小。

if hamburgerSizeSwitch.isOn {
    hamburgerWidth.constant = 200
} else {
    hamburgerWidth.constant = 150
}

隨機產生號碼牌號碼(Random)

用Int.random(in: 1…20)隨機選擇1~20的數字，並轉換成String顯示於orderNumberLabel中。

orderNumberLabel.text = String(Int.random(in: 1...20))

變更餐點完成訊息(TextField)

用UITextField.text取得使用者所輸入的名稱後，將使用者姓名寫入餐點完成的訊息中。

let name = nameTextField.text!
afterOrderMessageLabel.text = "\(name), your meal is ready."

Segmented Control的字型設定

這個專案的字型幾乎全部都是在Storyboard直接定義，但由於Segmented Control無法直接在Storyboard設定字型，因此這邊使用程式碼定義。

if let customFont = UIFont(name: "Gaegu-Regular", size: 20.0) {
    let attr = [NSAttributedString.Key.font: customFont]
    beverageSegmentedControl.setTitleTextAttributes(attr, for: UIControl.State.normal)
}

GitHub完整專案連結

GitHub - chia9322/orderMeal

作業連結

#2 擇偶條件App

封面照用Peter寫的App做的，加上iPhone邊框後的截圖整個變得很專業（自己講）

幫 iOS App 螢幕截圖加上漂亮的 iPhone / iPad 邊框(bezel)

餐點圖片來源：http://pic-aboo.com/（免費的素材網站）