結合outlet&action幫助狗狗找主人-Find My Love
這次的作業是要運用outlet&action,就想到可以來做一個幫助流浪狗找主人的app,概念就是資料庫裡有許多狗狗的資料,每一隻會有各自不同的需求,依照需求來決定使用者是不是適合當這隻狗狗的主人
但是螢幕截圖好像把顏色變得有點亮,但是沒辦法因為很多元件都是直接在xcode拉出來的也無法出圖合成,就不管了,然後錄螢幕又一直把白色弄得很灰,但是color已經調到256了,真的是會吐血
接下來開始說明步驟喔
- 基本起始操作 (一些每次都做的就用文字帶過喔)
一開始還是一樣把要的圖在illu畫好,把元件都拉進來
apicon and loading image都放進去
拉一個ui controller把所有的狗放進去,每一隻狗是一個按鈕
然後再拉一個ui controller用狗按鈕連過去
接著新建一個.swift檔,把相關的class設好 - 置放元件
把第二個ui controller上面的元件都放好,下方圖片共三張,狗介紹的放最下面,上方的兩個結果 狗哭哭跟快樂生活也放在同個位置,狗哭哭那張要再多放一個refind按鈕讓他連回狗清單那一頁
狗哭哭跟快樂生活圖片 還有refind按鈕 記得要在右方選項勾選 Hidden
3. 開始拉元件並命名
這個畫面要拉進去的@IBOutlet及對應元件如下:
nationality: UITextField!
age: UISlider!
holiday: UISegmentedControl!
patient 及 love: UISwitch!
answerno 及 answeryes: UIImageView!
agelabel: UILabel!
要拉進去的@IBAction及對應元件如下:
ageslider(_ sender: Any)
match(_ sender: Any)
refind: UIButto
4. 把slider bar值傳到右邊文字label
這邊想要左邊bar拉動右邊數字一起變動的話要加上下面的程式碼
agelabel.text就是指右邊呈現的文字
Int(age.value)指取得age整數的值
@IBAction func ageslider(_ sender: Any) {agelabel.text = “\(Int(age.value))”}
5. 按下match按鈕語法
這邊設定當使用者輸入的答案:國籍為Taiwan,且假日通常選為戶外活動(數值為0),年紀要成年大於18歲,要有耐心及愛心
就會呈現一起快樂生活的圖片(answeryes),反之不符合以上條件者通通呈現狗哭哭圖片及refind按鈕(answerno)
程式碼參考以下
@IBAction func match(_ sender: Any) {if nationality.text! == “Taiwan” && holiday.selectedSegmentIndex == 0 && age.value > 18 && patient.isOn && love.isOn {answeryes.isHidden = falseanswerno.isHidden = truerefind.isHidden = true}else {answeryes.isHidden = trueanswerno.isHidden = falserefind.isHidden = false}
就差不多完成一隻狗的找主人畫面,當然如果其他狗也要找就要重複以上在設置,不過條件不同。
以下為完整程式碼及github參考
另外之後進階可以在快樂生活後在加上按鈕連至聯絡狗及看狗更詳細資訊及照片之畫面設計使其更完善
希望流浪狗狗貓貓都能找到他們愛的主人:)