實作擇偶條件APP

關於這個app我把它分成三個部份去實作

  1. 介面
  2. 介面與程式連結
  3. 程式實作部份

ㄧ.介面

介面是使用者唯一可以看到的部份 關於後面那兩個部分使用者是看不到的

也是我們程式設計師想要給使用者去操作的地方

關於這個APP首先我們就要先設計成投影片要求的那樣

有用到的零件有Label,TextField,segment control,switch,slider,button

你只要把這些元件拉到介面 位置稍做調整就大功告成了

相信到這裡對大家應該沒有什麼難度

二.介面與程式連結

這個部分就是承接上一個部分 因為雖然你已經在介面拉好了各式各樣的元件

但是在程式部分根本不了解你用了哪些元件 又要做什麼樣的操作

這時我們需要把元件連結到程式 生成變數好讓程式了解到使用者所選擇或輸入的內容是什麼 或者是當使用者進行一個操作時 我的APP又要做出怎麼樣的反應去回應

對於上面講的動作 對於swift而言就是“拉線” 我分成三部分

  1. 切成介面和程式介面同時顯示狀態

使用右上角兩個環的那個選項 就可以切成兩個不同的畫面同時顯示 你在選擇你要的兩個畫面即可

2.從元件上(按右鍵,或是使用兩手指按住)拉線拉到程式要的位置

3.拉線選項部分

基本上裡面的選項他都會先幫你設定好了 你需自己調整的部分是connection 和名稱

在這裡稍講一下connection 他有三個選項

Outlet和Action是我們目前主要會用到的

Outlet:設成變數物件(你可透過這個變數物件得到使用者輸入在框內的值)ex:textField(輸入格)-> 變數物件名稱.text 透過text的方法可以得到輸入格裡面的值

Action:這個選項則算是一個互動選項 當使用者使用某種元件我的APP要如和回應的一個選項

所以我們會用到outlet的元件是Label,TextField,segment control,switch 這5個

因為我們要讀取到使用者選擇或輸入得值去做if條件判斷 是否為我們想要的條件

至於slider和button 則是用Action

在這裡你可能會有疑問 疑 slider不也是outlet嗎 因為我們需要用到使用者所拉得直判斷年齡

沒錯 其實這樣講也沒錯 但是其實我們可以從其他地方得到使用者所拉得值

因問在slider下面有一個那裡會顯示使用者所拉的值

我們只要寫一個slider的Action互動 每次調整slider時 就會把目前slider得值指派給label去顯示 我們也可以利用這個label值了解到使用者選擇的年齡 當然關於這互動 我們需要用程式方面去實行

slider Action

這裡稍為要注意一下 type部分要選UISlider 因為我們等一下會需要讀取slider的值 而不只是在slider做互動而已

在所創出的空間裡面的程式就是當你拉動slider時會跑裡面的程式 我們就可以把下面的label程式寫在裡面 當你拉動slider時 把slider改變後的值指派給label去顯示

最後button部分也一樣需要拉一個action 因為當我們按下button時 就要把使用者輸入或選擇得值 在按下button時顯示最後結果 他是個互動

好啦 當你都拉好之後 萬事只欠東風 讓我們來看程式碼部分該怎麼寫吧

三.程式實作部份

在這裡我稍微說明一下 我們程式需要執行的部分

  1. 讀取星座,性別,真心,年齡得值好讓我們去做if的判斷
  2. 當我們拉動slider時 下面的label會和slider做互動顯示目前的值
  3. 按下button時會利用到第一個部分得值去做if else判斷 然後顯示出是否為你的對象 這部份是寫在 button Action的裡面 當按下button時所產生的互動

對了 接下來稍微講解一下swift在viewController程式下面執行不像其他程式 都是由上而下 而會先執行發生的事件裡的程式碼 然後發生事件裡面才是由上而下比如下面程式

@IBAction func age(_ sender: UISlider) {
currentValue = Int(sender.value)
showAge.text = ("\(currentValue)")
}
var currentValue:Int = 18

我們可以看到 fun age這個方法所用到的變數 currentValue 是定義在他的下面的 但是fun age卻可以順利的讀取到currentValue 這個不會發生錯誤 也就是說你變數可以寫在任何地方 在發生事件時他都還是可以順利的讀取到 只是通常的習慣還是會把要用到的變數一起寫在上面方便管理 但是func age裡面就是由上而下執行沒有錯 像是裡面的程式碼是先讀取目前slider的值 在指派給label showAge去顯示 最後當你要做值的任何變化一定要寫在事件方法的裡面 不然會發生錯誤

接下來直接講解程式

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var star: UITextField! //輸入的星座
@IBOutlet weak var hart: UISwitch!//是否真心
@IBOutlet weak var showAge: UILabel!//顯示年紀的label
@IBOutlet weak var isYou: UISegmentedControl! //最後顯示是否是你的結果
@IBOutlet weak var sex: UISegmentedControl! //性別
//以上都是為了讀取使用者所輸入的值而拉的outlet 這樣我們後面判斷if else時就可以用上面的outlet直去判斷
var currentValue:Int = 18 //最一開始的年紀
@IBAction func age(_ sender: UISlider) { //年齡的slider Action互動
//當你拉動slider時會產生的反應

currentValue = Int(sender.value) //先讀取slider拉動之後的值 但是因為
//value是float 要轉型成為Int
showAge.text = ("\(currentValue)") //將拉動後的年齡指派給label去顯示
//因為text是str 也要轉型 後面也是
//將Int轉成str
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
@IBAction func isYoubutton(_ sender: AnyObject) { //當按下button時所產生的互動
if (star.text == "摩羯座" || star.text == "處女座" || star.text == "巨蟹座" || star.text == "金牛座") && hart.isOn == true &&
currentValue<=25 && sex.selectedSegmentIndex == 1 {
//上面為判斷的條件 1.星座是否是你要的 2.是否真心 hart.isOn switch 的方法之一 true 為綠色狀態 false則為灰白 3.年紀 可直接讀取label顯示的數字判斷 4.性別欄
selectedSegmentIndex 左邊為0 右邊為1 下面為都符合所發生的情況
isYou.selectedSegmentIndex = 0 //顯示就是你 在0的位置
sender.setTitleColor(UIColor.red, for: UIControlState.normal)
//這裡做點小變化 當是你的時候 一開始的button會變成紅色 這段則為顏色變化的程式碼
} 
else{ //不是你
isYou.selectedSegmentIndex = 1 //顯示可惜不是你 在1的位置
sender.setTitleColor(UIColor.green, for: UIControlState.normal)
//當不是你時 一開始的button會變成慘淡的綠色
}
isYou.isHidden = false //因為我們一開始設定最後的答案先不顯示 
當按button送出判斷後 就要把他顯示出來 所以讓隱藏失效
self.view.endEditing(true) //這段是我自己多加的 因為當你叫出鍵盤輸入後
鍵盤不會自己消失 會擋到下面的答案 所以我讓按下button後 會自動關閉鍵盤 這樣使用者就不用自己關閉鍵盤
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

喔 對了 因為我覺得星座打英文太麻煩 所以我改判斷中文了 但是你會發現只有英文鍵盤 下面是使用出中文鍵盤的方法

因為gif轉黨有時間限制 所以後面一小段被剪掉了 不過後面就是你用好了之後你後面就可以像你一般要用中文時 左下角多了一個圓球可以選擇中文

最後附上我的成品 和github

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.