สำหรับตอนนี้จะอธิบายเรื่องของคีย์บอร์ดสำหรับใช้งานใน 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
- ใส่ protocol ของ Picker View เพื่อนำ function หลักๆมาใช้งาน และ Text Field เพื่อควบคุมการปิด-เปิดคีย์บอร์ด
1class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate,UITextFieldDelegate {
- ทำความรู้จักกันระหว่าง Picker View กับโค๊ด (Outlet) โดยกด Ctrl ค้างใว้แล้วลากมาวางที่ใต้ class จะปรากฏตัว Connection ให้เราตั้งชื่อของ Picker View เป็น PickerKeyboard
- ทำความรู้จักกันระหว่าง Text Field โดยใช้วิธีเดียวกับข้อ 2. แล้วตั้งชื่อว่า txtKeyCheck
- สร้าง Array เก็บรายการประเภทคีย์บอร์ดต่างๆใว้
1var arkeyboardType = ["Default","Ascii","Num and Punct","URL","NumberPad","PhonePad","NamePhonePad","Email","Alphabet","Twitter"]
- ที่ viewDidLoad() เราต้องใส่ dataSource กับ delegate ของ pickerView และ delegate ของ Text Field
1234567override func viewDidLoad() {super.viewDidLoad()// Do any additional setup after loading the view, typically from a nib.pickerKeyboard.dataSource = selfpickerKeyboard.delegate = selfself.txtKeyCheck.delegate = self}
- ใส่ฟังก์ชั่นของ Picker View ที่เก็บจำนวนของรายการที่ต้องการแสดง
123func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {return arkeyboardType.count}
- ใส่ฟังก์ชั่นของ Picker View สำหรับแสดงข้อมูลโดยดึงค่าจาก Array ตาม row ที่แสดง
123func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {return arkeyboardType[row]}
- ใส่ฟังก์ชั่นของ Picker View เพื่อบอกจำนวนชุดของรายการ ซึ่งในทีนี้เราจะมี 1 ชุด
123func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {return 1}
- ใส่ฟังก์ชั่นของ Picker View เพื่อบอกว่าเราเลือกรายการไหน และจะไปใช้ทำอะไรต่อ ซึ่งตรงนี้เมื่อเรารับค่ามาได้แล้วจะทำการส่งให้ txtKeyCheck ไปเลือก KeyBoardType โดยจุดนี้จะเลือกใช้ closure เข้ามาช่วย ซึ่งสามารถทำให้สร้างฟังก์ชั่นสหรับตรวจสอบได้ทันที
123456789101112131415161718192021func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int){txtKeyCheck.keyboardType = { () -> UIKeyboardType inswitch self.arkeyboardType[row]{case "Default" : return UIKeyboardType.Defaultcase "Ascii" : return UIKeyboardType.ASCIICapablecase "Num and Punct" : return UIKeyboardType.NumbersAndPunctuationcase "URL" : return UIKeyboardType.URLcase "NumberPad" : return UIKeyboardType.NumberPadcase "PhonePad" : return UIKeyboardType.PhonePadcase "NamePhonePad" : return UIKeyboardType.NamePhonePadcase "Email" : return UIKeyboardType.EmailAddresscase "Alphabed" : return UIKeyboardType.Alphabetcase "Twitter" : return UIKeyboardType.Twitterdefault : return UIKeyboardType.Default}} ()//test print value from picker viewprint(arkeyboardType[row])}
- ใส่ฟังก์ชั่น textFieldShouldReturn ลงไปเมื่อผู้ใช้กดปุ่ม return ก็จะทำการซ่อนคีย์บอร์ด
1234func textFieldShouldReturn(textField: UITextField) -> Bool {self.view.endEditing(true)return false}
- ใส่ฟังก์ชั่น touchesBegan สำหรับดักการแตะรอบๆ Text Field เพื่อปิดคีย์บอร์ด
123override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {self.view.endEditing(true);}
- ผลการทำงาน
สรุปคีย์บอร์ดรูปแบบต่างๆ
Default, Name Phone Pad,Alphabet | ![]() |
Ascii | ![]() |
Number and Punctuation | ![]() |
URL | ![]() |
Number Pad | ![]() |
Phone Pad | ![]() |
Email Address | ![]() |
![]() |
สามารถโหลดไฟล์โปรเจคได้ที่นี่ครับ
ยังไงก็ลองเอาไปฝึกใช้งานกันดูนะครับ
แนะนำติชมได้ตลอดนะครับ ที่ thaiswiftclass@gmail.com และทาง https://www.facebook.com/thaiswiftclass