Introduce

หลังจากที่ได้ทดลองกันในหลาย ๆ ตัวอย่างแล้ว ตอนนี้มาลองเล่นดูกันกับ component อีกอันที่ทาง apple ได้จัดสรรมาให้เราได้ใช้งานกันอย่างง่าย ๆ นั่นก็คือ DatePicker นั่นเอง หลาย ๆ คนอาจจะรู้จักกันแล้วว่า มันมีหน้าที่เอาไว้ทำอะไรน่ะครับ ก็ขออธิบายอย่างสั้น ๆ ละกัน DatePicker มีหน้าที่ช่วยในการจัดการเรื่องของ วันที่ หรือ เวลา ในรูปแบบต่าง ๆ ที่เราสามารถเลือกปรับได้จาก attribute ของ component ได้เลย จาก Interface Builder นั่นเอง

เริ่มต้น ทำการเปิดโปรแกรม xcode ขึ้นมา พร้อมกับเลือก View-based Application พร้อมกับตั้งชื่อโปรเจคว่า “basicDatePicker” แล้ว save

1. Create a new project basicDatePicker

เมื่อ สำรวจดูไฟล์ที่ class, resourse เรียบร้อยแล้ว

2. Show all resources

ให้เรามองหาไฟล์ที่ชื่อว่า “basicDatePickserViewController.h” เพื่อทำการสร้างตัวแปร และ IBAction สำหรับในการทำการ delegate นั่นเอง ดูตามรูปด้านล่าง จะเห็นได้ว่าเราประกาศตัวแปร 1 ตัวเท่านั้น คือเรียกใช้ UIDatePicker นั่นเอง และสร้าง IBAction ขึ้นมา เพื่อรับค่า Action จากเมื่อเรากด ที่ DatePicker นั่นเอง

3. Decale a new UIDatePicker

หลังจากที่เสร็จจากไฟล์ “basicDatePickerViewController.h”  เรียบร้อยแล้ว ถัดมาเราก็เปิดไฟล์ “basicDatePickerViewController.m” เพื่อทำการเขียน function ที่จะมารับการทำงานของ DatePicker ดูจากโค้ดที่รูปด้านล่าง จะเห็นได้ว่า

เราสร้างจะสร้างตัวแปร formatter มาเพื่อรับค่าการแสดงผลของวันที่ในรูปแบบ  “Monday” หรือ ชื่อวันเต็มนั่นเอง

NSDateFormater *formatter = [[NSDateFormatter alloc] init];
[formatter setDateFormat:@"EEEE"];

4. Create IBAction for chosen

เมื่อเสร็จเรียบร้อยแล้วก็ save และถัดมา ก็คือ เปิดไฟล์ “basicDatePickerViewController.xib” เพื่อทำการสร้าง Interface Builder สำหรับการแสดงผลนั่นเอง ให้เราทำการเปิด Library พร้อมกับ ลาก component มาวางให้ได้ดังภาพด้านล่าง และที่จะลืมไม่ได้เลย คือ ปรับค่า Attribute ของ DatePicker ให้เป็น mode -> Date และวาง round button พร้อมกับ ตั้งชื่อว่า “What’s this day?” นั่นเอง

5. Create view components

คลิกขวา ที่ “File’s owner” จะแสดงหน้าจอดังภาพด้านล่างขึ้นมา เราจะทำการ delegate ตัว DatePicker เข้ากับ ตัวแปรที่เราได้สร้างไว้ในก่อนหน้านี้

6. Hook up datePicker with connection inspector

เริ่มต้นจาก DatePicker ให้เราลาก ตัว “dp” ที่เราได้สร้างไว้ เข้ากับ DatePicker ดังภาพ

7. Connection with datePicker

และลาก “choosenDate” เข้ากับ round rect button ดังภาพ และเลือก “touch up inside” เพื่อรับค่าหลังจากที่มีการคลิกนั่นเอง

8. Connection with button

เมื่อเสร็จแล้วเราจะได้ดังภาพด้านล่าง

9. Show all connection

ทำการตรวจทานให้เรียบร้อยว่าเราได้ทำครบทุกขั้นตอนแล้ว ทดลอง “command + b” ดูก่อนก็ได้เพื่อทดสอบว่ามี bug ที่ไหน บรรทัดใดหรือไม่ ถ้าไม่มี ก็ทำการ ทดสอบกับ simulator ได้เลย หรือถ้า คนใดสมัครเป็นสมาชิกกับ apple dev แล้วก็สามารถทดสอบกับ device ได้เลย ผลลัพธ์ ก็จะแสดงดังภาพ คือ มี ข้อความขึ้นมาบอกว่า เราเลือกวันที่เราเลือก เป็นวันอะไรนั่นเอง

10. Run build and go

Conclusion

ในบทนี้ เราจะได้รู้จักกับ UIAlertView, UIDatePicker, NSDateFormatter กัน แต่ละอันก็มีหน้าที่ในการทำงานที่แตกต่างกัน ในบทนี้ก็ทำให้เราได้รู้จักกับการเรียกใช้ และการแสดงผลของแต่ละอย่างให้ได้เข้าใจกันแล้วน่ะครับ

ในบทหน้า จะเอาส่วนอื่น ๆ ที่จำเป็น และช่วยให้การเขียนโปรแกรมสมบูรณ์มากยิ่งขึ้นมา ทดสอบเป็นตัวอย่างให้ได้เข้าใจกันน่ะครับ

ขอบคุณครับ

Download

สามารถ download source code ได้ที่นี่ [ click here ]