EP9 : 時間怪獸來襲!(Swift3 — DatePicker教學)

YouTube : https://www.youtube.com/watch?v=dvdVveXtq7c

gitHub :https://github.com/PowerSwifter/EP9---UIDatePicker

EP9流程: 透過DatePicker選擇日期,會將選中的日期秀在Label上,此時可按下攻擊按鈕,若選中的日期恰為生日,則可擊敗時間怪獸。

  1. 開新專案,專案名稱命名為DatePicker。從右邊的元件庫,將DatePicker,Button,Label拉入StoryBoard內,至想要的位置。

2. 將Label中的文字置中,文字顏色設為藍色,並輸入”輸入生日以擊敗時間怪獸!”,UIButton文字改為”攻擊”。

3. 將DatePicker的Mode屬性修改為Date,即選擇的是年/月/日。

4. 點選右上角的Assistant editor 將Story Board相對應的View Controller打開。按著control不放,將游標以拖拉方式,將DatePicker拉進View Controller內,Connection選擇Action,Type選擇UIDatePicker,Name輸入”chooseBirthday”。

p.s. 將DatePicker的Connection選擇Action,如同UIButton的Action作用,我們的目的是滑動DatePicker選擇到某一時間後,接著進行某些指定的行為。(ex: 將Label上的文字修改為所選日期)

5. 將UIButton拉入View Controller內,設為Action,Type選擇UIButton,Name設為”attack”。Label拉入View Controller內,Name設為showBirthDayLabel。

6. 按下右上角的Standerd editor,即可回到單一畫面。另外,View Controller中即為拉完Action和Outlet後的畫面。接著撰寫程式碼部分!

7. 步驟3中,將DatePicker的Mode屬性修改為Date,為App畫面看到的DatePicker上的形式。在此將建立DateFormatter實體,稱為formatter,用於設定時間顯示格式,"yyyy/MM/dd",也就是Label上欲顯示的時間格式,與DatePicker的Mode屬性並不相同,需要手動指定格式。

p.s. 此處邏輯為,轉動DatePicker選定日期後,將欲顯示的時間格式設定為”yyyy/MM/dd”,也就是年/月/日。( ex:2016/10/26 )

若設定為”MM/dd/yy”,則顯示為10/26/16。若為”yyyy/MM/dd hh:mm”,則顯示為2016/10/26 10:00。有各種格式可自行設定,可參閱以下網址:

8. 將選中的時間秀於Label上,使用formatter,使用string方法,將sender參數的date屬性放入。

9. 試跑模擬器,選中的日期可確實顯示於Label上。

10. 接著撰寫按下攻擊鈕後的程式碼,使用if — else判斷式,可解讀為若目前Label上的文字若為2016/10/10則執行第一個括號內的敘述,若不為2016/10/10則執行else後括號內的敘述。

p.s. 使用if — else判斷式,判斷若為….做什麼事,若非….做什麼事。其中“若為”即”==”,可解讀為“是否等同於”,可得到“true”或“false”的回答。

11. 按下攻擊鈕後,若目前Label上的文字若為2016/10/10則執行第一個括號內的敘述,將Label上的文字修改為”啊~時間怪獸被擊敗了!”,若不為2016/10/10則執行else後括號內的敘述,將Label上的文字修改為”哈哈~再攻擊一次!”。

12. 試跑模擬器,若選中日期為2016/10/10則顯示”啊~時間怪獸被擊敗了!”,若選中日期非為2016/10/10則顯示”哈哈~再攻擊一次!“

結語:以上,透過DatePicker的Action,轉動DatePicker選中日期,可執行Action內設定的動作,結合UIButton和Label可執行更多功能。