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

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

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

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

1 SingleView Application

 

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

2 New Project

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

4.Folder

 

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

8.PickerView

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

7.Textbox

 

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

21.Update Screen Size

 

 

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

23.Keyboard Type

 

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

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

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

     
  2. ทำความรู้จักกันระหว่าง Picker View กับโค๊ด (Outlet) โดยกด Ctrl ค้างใว้แล้วลากมาวางที่ใต้ class จะปรากฏตัว Connection ให้เราตั้งชื่อของ Picker View เป็น PickerKeyboard20.ctrl_click               22.Connection to code
  3. ทำความรู้จักกันระหว่าง Text Field โดยใช้วิธีเดียวกับข้อ 2. แล้วตั้งชื่อว่า txtKeyCheck
  4. สร้าง Array เก็บรายการประเภทคีย์บอร์ดต่างๆใว้

     
  5. ที่ viewDidLoad() เราต้องใส่ dataSource กับ delegate ของ pickerView และ delegate ของ Text Field

     
  6. ใส่ฟังก์ชั่นของ Picker View ที่เก็บจำนวนของรายการที่ต้องการแสดง

     
  7. ใส่ฟังก์ชั่นของ Picker View สำหรับแสดงข้อมูลโดยดึงค่าจาก Array ตาม row ที่แสดง

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

     
  9. ใส่ฟังก์ชั่นของ Picker View เพื่อบอกว่าเราเลือกรายการไหน และจะไปใช้ทำอะไรต่อ ซึ่งตรงนี้เมื่อเรารับค่ามาได้แล้วจะทำการส่งให้ txtKeyCheck ไปเลือก KeyBoardType โดยจุดนี้จะเลือกใช้ closure เข้ามาช่วย ซึ่งสามารถทำให้สร้างฟังก์ชั่นสหรับตรวจสอบได้ทันที

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

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

     
  12. ผลการทำงาน                                                                                                                24.App Ready

 

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

 Default, Name Phone Pad,Alphabet Default , Alphabet
Ascii 11.Ascii
Number and Punctuation 12.Number and Punctuation
URL 13.URL
Number Pad 14.Number Pad
Phone Pad 15.Phone Pad
Email Address 17.Email
Twitter 19.Twitter

 

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

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

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

 

 

 

 

 

 

 

 

 

Leave a Reply