มาทำ Countdown Timer กันค่ะ

สวัสดีค่ะ วันนี้จะมาสอนวิธีทำ Countdown Timer หรือ การนับเวลาย้อนหลังกันคะ

ขั้นตอนแรกให้เราสร้างโปรเจ็คขึ้นมา เลือกเป็น single View Application และกด next จากนั้นตั้งชื่อโปรเจ็คของเราให้เรียบร้อย และกด Create ค่ะ

ขั้นตอนถัดมา เราจะมาทำที่ Main Storyboard เพื่อจัดการกับหน้าตาของแอปพลิเตชันกันค่ะ

โดยสามารถแต่งพื้นหลังได้ตามความชอบค่ะ

และอย่าลืมที่จะปรับ Layout นะคะ เพราะการปรับ Layout จะทำให้แอปพลิเคชันของเราสามารถ Run บนอุปกรณ์อย่าง iPhone หรือ iPhone Plus ได้โดยที่ขนาดของรูปภาพ หรือแม้กระทั้งปุ่มต่างๆ ของเราจะไม่ผิดเพี้ยนไปค่ะ

จากนั้นนำ Label,SliderและButton2 อัน มาวางค่ะ

ขั้นตอนต่อไป เราจะประกาศ Outlet ให้กับตัว Label, Slider และ Button ทั้ง 2 กันคะ

เลือกที่ Label -> Ctrl และลากไปยังหน้าสำหรับเขียนโค้ด  กำหนด Connection ให้เป็น Outlet ค่ะเลือกที่ Slider -> Ctrl และลากไปยังหน้าสำหรับเขียนโค้ด กำหนด Connection ให้เป็น Outlet ค่ะ
  เลือกที่ Button  -> Ctrl และลากไปยังหน้าสำหรับเขียนโค้ด ทำแบบเดียวกันทั้ง 2 ปุ่ม และ กำหนด Connection ให้เป็น Outlet ค่ะ

  

จากนั้นเราจะประกาศ Action ให้กับตัว Slider และ Button ทั้ง 2 กันคะ

เลือกที่ Slider -> Ctrl และลากไปยังหน้าสำหรับเขียนโค้ด กำหนด Connection ให้เป็น Action และเปลี่ยน Type ให้เป็น UISlider ค่ะ 

  เลือกที่ Button  -> Ctrl และลากไปยังหน้าสำหรับเขียนโค้ด ทำแบบเดียวกันทั้ง 2 ปุ่ม และ กำหนด Connection ให้เป็น Action ค่ะ

เขียนโค้ดในส่วนของการทำงานใน Action Slider

 

เขียนโค้ดส่วนของการทำงาน Action Start และ Action Stop ค่ะ

โดยประกาศสำหรับเก็บค่าเวลาของเราก่อน

จากนั้นจึงมาเขียนในการทำงาน Action Start และ Action Stop ค่ะ

เมื่อเขียนโค้ดครบแล้วจะติด Error ไม่ต้องตกใจนะคะ เนื่องจากแอปพลิเคชันของเรายังหาตัวฟังก์ชัน counter ไม่เจอ ดังนั้นเราจึงมาเรียนฟังก์ชัน counter กันค่ะ 

หากเราต้องการให้แอปพลิเคชันมีการแจ้งเตือนกรณีหมดเวลา เราจะใส่โค้ด alert ไปในส่วนของฟังก์ชัน counter  ดังรูปด้านบนค่ะ 

แค่นี้การทำ countdown Timer ของเราก็เสร็จเรียบร้อยแล้วค่ะ

หากเพื่อนๆยังไม่เข้าใจสามารถดูวีดีโอการสอนได้ที่นี่