เรียนเขียนโปรแกรมบนไอโฟนด้วยภาษา Swift กับ ThaiSwiftClass.com ตอน Keyboard

สำหรับตอนนี้จะอธิบายเรื่องของคีย์บอร์ดสำหรับใช้งานใน iPhone,iPad และวิธีเปลี่ยนโดยใช้โค๊ดมาช่วย มาดูตัวอย่างกันเลยครับ

โหลดไฟล์โปรเจคได้ที่นี่

ให้เริ่มโปรเจคใหม่ด้วย SingleView Application

 

ตั้งชื่อโปรเจคเป็น KeyboardList

เลือก Main.storyboard ตั้ง size เป็น iPhone 4.7-inch

 

ใส่ Picker View ลงไป เราจะใช้สำหรับเลือกรายการคีย์บอร์ดที่ต้องการเปลี่ยนแปลง

จากนั้นใส่ Text Field ลงไปที่ด้านใต้

 

เลือก View Controller จากนั้นกดที่ Attribute Inspector (หมายเลข 2) จากนั้นก็กำหนดขนาดเป็น 4.7

 

 

ปกติเราสามารถเลือกเปลี่ยนคีย์บอร์ดได้จากหน้า StoryBoard อยู่แล้ว

 

แต่งานนี้เราต้องการทดสอบการใช้งาน Picker View และการเปลี่ยนแปลงประเภทของคีย์บอร์ดได้เองจากการเลือกใน Picker View

เริ่มโค๊ดที่ ViewController.swift

1. ใส่ protocol ของ Picker View เพื่อนำ function หลักๆมาใช้งาน และ Text Field  เพื่อควบคุมการปิด-เปิดคีย์บอร์ด
   
   class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate,UITextFieldDelegate {

   1	class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate,UITextFieldDelegate  {

   
    
2. ทำความรู้จักกันระหว่าง Picker View กับโค๊ด (Outlet) โดยกด Ctrl ค้างใว้แล้วลากมาวางที่ใต้ class จะปรากฏตัว Connection ให้เราตั้งชื่อของ Picker View เป็น PickerKeyboard               
3. ทำความรู้จักกันระหว่าง Text Field โดยใช้วิธีเดียวกับข้อ 2. แล้วตั้งชื่อว่า txtKeyCheck
4. สร้าง Array เก็บรายการประเภทคีย์บอร์ดต่างๆใว้
   
   var arkeyboardType = ["Default","Ascii","Num and Punct","URL","NumberPad","PhonePad","NamePhonePad","Email","Alphabet","Twitter"]

   1	var arkeyboardType = ["Default","Ascii","Num and Punct","URL","NumberPad","PhonePad","NamePhonePad","Email","Alphabet","Twitter"]

   
    
5. ที่ viewDidLoad() เราต้องใส่ dataSource กับ delegate ของ pickerView และ delegate ของ Text Field
   
   override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. pickerKeyboard.dataSource = self pickerKeyboard.delegate = self self.txtKeyCheck.delegate = self }

   1 2 3 4 5 6 7

   override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.         pickerKeyboard.dataSource = self         pickerKeyboard.delegate = self         self.txtKeyCheck.delegate = self     }

   
    
6. ใส่ฟังก์ชั่นของ Picker View ที่เก็บจำนวนของรายการที่ต้องการแสดง
   
   func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { return arkeyboardType.count }

   1 2 3

   func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {         return arkeyboardType.count     }

   
    
7. ใส่ฟังก์ชั่นของ Picker View สำหรับแสดงข้อมูลโดยดึงค่าจาก Array ตาม row ที่แสดง
   
   func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { return arkeyboardType[row] }

   1 2 3

   func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {         return arkeyboardType[row]     }

   
    
8. ใส่ฟังก์ชั่นของ Picker View เพื่อบอกจำนวนชุดของรายการ ซึ่งในทีนี้เราจะมี 1 ชุด
   
   Swift Picker View Protocol

   Swift

   func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int { return 1 }

   1 2 3

   func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {         return 1     }

   
    
9. ใส่ฟังก์ชั่นของ Picker View เพื่อบอกว่าเราเลือกรายการไหน และจะไปใช้ทำอะไรต่อ ซึ่งตรงนี้เมื่อเรารับค่ามาได้แล้วจะทำการส่งให้ txtKeyCheck ไปเลือก KeyBoardType โดยจุดนี้จะเลือกใช้ closure เข้ามาช่วย ซึ่งสามารถทำให้สร้างฟังก์ชั่นสหรับตรวจสอบได้ทันที
   
   func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) { txtKeyCheck.keyboardType = { () -> UIKeyboardType in switch self.arkeyboardType[row] { case "Default" : return UIKeyboardType.Default case "Ascii" : return UIKeyboardType.ASCIICapable case "Num and Punct" : return UIKeyboardType.NumbersAndPunctuation case "URL" : return UIKeyboardType.URL case "NumberPad" : return UIKeyboardType.NumberPad case "PhonePad" : return UIKeyboardType.PhonePad case "NamePhonePad" : return UIKeyboardType.NamePhonePad case "Email" : return UIKeyboardType.EmailAddress case "Alphabed" : return UIKeyboardType.Alphabet case "Twitter" : return UIKeyboardType.Twitter default : return UIKeyboardType.Default } } () //test print value from picker view print(arkeyboardType[row]) }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int)     {        txtKeyCheck.keyboardType = { () -> UIKeyboardType in         switch self.arkeyboardType[row]         {          case "Default"       : return UIKeyboardType.Default          case "Ascii"         : return UIKeyboardType.ASCIICapable          case "Num and Punct" : return UIKeyboardType.NumbersAndPunctuation          case "URL"           : return UIKeyboardType.URL          case "NumberPad"     : return UIKeyboardType.NumberPad          case "PhonePad"      : return UIKeyboardType.PhonePad          case "NamePhonePad"  : return UIKeyboardType.NamePhonePad          case "Email"         : return UIKeyboardType.EmailAddress          case "Alphabed"      : return UIKeyboardType.Alphabet          case "Twitter"       : return UIKeyboardType.Twitter          default : return UIKeyboardType.Default         }     } ()         //test print value from picker view         print(arkeyboardType[row])     }

   
    
10. ใส่ฟังก์ชั่น textFieldShouldReturn ลงไปเมื่อผู้ใช้กดปุ่ม return ก็จะทำการซ่อนคีย์บอร์ด
    
    Swift Return Keyboard

    Swift

    func textFieldShouldReturn(textField: UITextField) -> Bool { self.view.endEditing(true) return false }

    1 2 3 4

    func textFieldShouldReturn(textField: UITextField) -> Bool {         self.view.endEditing(true)         return false     }

    
     
11. ใส่ฟังก์ชั่น touchesBegan สำหรับดักการแตะรอบๆ Text Field เพื่อปิดคีย์บอร์ด
    
    Swift touchesBegan to hide keyboard

    Swift

    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { self.view.endEditing(true); }

    1 2 3

    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {         self.view.endEditing(true);     }

    
     
12. ผลการทำงาน                                                                                                                

 

สรุปคีย์บอร์ดรูปแบบต่างๆ

Default, Name Phone Pad,Alphabet
Ascii
Number and Punctuation
URL
Number Pad
Phone Pad
Email Address
Twitter

 

สามารถโหลดไฟล์โปรเจคได้ที่นี่ครับ

ยังไงก็ลองเอาไปฝึกใช้งานกันดูนะครับ

แนะนำติชมได้ตลอดนะครับ ที่ thaiswiftclass@gmail.com และทาง https://www.facebook.com/thaiswiftclass