Tạo custom keyboard trong iOS 8 với Swift

85

Đây là bài hướng dẫn từng bước từ tác giả Tope Abayomi giải thích cách để tạo ra những custom keyboard sử dụng custom keyboard extension mới trong iOS 8 từ XCode 6 trở lên.

Bài hướng dẫn sẽ giải thích cách thiết lập một project, sử dụng extension keyboard, tạo layout custom keyboard và giải thích một vài kỹ thuật bên trong.

Dưới đây là hình ảnh hiển thị custom keyboard mà chúng ta sẽ khởi tạo:

Create Your Xcode Project

Mở Xcode và khởi tạo một project mới.

Chúng ta sẽ đặt tên cho project là CustomKeyboardSample và lưu lại ở một nơi nào đó trong máy tính. Đây sẽ là project chính, chúng ta cần nó để thêm một extension.

Bây giờ chúng ta sẽ thêm vào một UITextField vào trong project. Vào file Main.storyboard và kéo thả UITextField vào trong Viewcontroller.

Đây sẽ là nơi để chúng ta kiểm tra input (bàn phím). Giờ là lúc để thêm vào extension.

Chọn File -> New -> Target, chọn Custom Keyboard trong danh sách của mục IOS/Application Extension. Đặt tên là CustomKeyboard và chọn ngôn ngữ Swift.

Bây giờ bạn sẽ có một folder mới có tên là CustomKeyboard là một target mới với một file gọi là KeyboardViewController.swift. Xcode đã thêm một vài dòng code cho chúng ta và keyboard lúc này đã sẵn sàng để sử dụng (mặc dù chưa có chức năng nào).

Bạn có thể thử chạy project CustomKeyboardSample này với keyboard mới của bạn.

Khi chạm vào bên trong UITextfield, keyboard hệ thống sẽ hiển thị lên. Chúng ta có thể chuyển đổi keyboard bằng cách sử dụng icon Clobe ở hàng dưới cùng nhưng chúng ta cần cài đặt keyboard mới trước khi nó hiển thị lên.

Đứng từ máy ảo Simulator, quay trở về Home screen (ở Menubar chọn Hardware -> Home). Mở Settings app và vào phần General -> Keyboard -> Keyboards. Chọn “Add New Keyboard” và chọn CustomKeyboard. Bật vào nút switch để kích hoạt và chấp nhận từ tin nhắn cảnh báo.

Nhấn done và bạn đã có thể sử dụng.

Nếu chạy app lại lần nữa trên máy ảo, bạn sẽ có thể chuyển đổi keyboard. Chạm vào icon Clobe cho tới khi bạn thấy một keyboard với button “Next Keyboard”.

Giờ chúng ta sẽ bắt đầu thêm các keyboard riêng.

Mở file KeyboardViewController.swift. Ở file này, bạn sẽ thấy một class KeyboardViewController, class này được kế thừa từ UIInputViewController. Đây là class quản lý các cấu hình riêng cho keyboard. Chúng ta có thể thêm các button để chứa các view và nó sẽ hiển thị trong keyboard.

Thêm một hàm gọi là createButton

Trong đoạn code trên, chúng ta sẽ thêm một button bằng những dòng lệnh và thiết lập những thuộc tính cho nó. Chúng ta có thể sử dụng nibs nhưng với những số lượng button chính xác, chúng ta sẽ phải quản lý nó nên đây là lựa chọn tốt hơn.

Đoạn code sau sẽ gọi một hàm tên là didTapButton khi một button được nhấn vào:

 

Trong hàm trên, chúng ta sử dụng Swift để viết một hàm xử lý sự kiện cho button. AnyObject giống với id object trong Objective-C. Chúng ta đưa biến sender về UIButton và sau đó biến title của button trong trường hợp này sẽ là chữ mà chúng ta muốn nhập vào text field.

Để nhập chữ vào bằng cách dùng keyboard, chúng ta sử dụng đối tượng textDocumentProxy và gọi hàm insertText.

Bước tiếp theo để thêm một button vào keyboard view của chúng ta. Thêm 2 dòng code bên dưới vào viewDidLoad. Bạn có thể bỏ đi những dòng code tự động phát sinh bên trong hàm viewDidLoad và textDidChange

 

 

Đoạn này thêm một button với title là “A” vào bên trong keyboard input view. Đây sẽ là phím A của chúng ta.

Bây giờ nếu bạn run app và chạm vào text field, bạn sẽ thấy phím A trên keyboard (có thể bạn cần phải chuyển đổi keyboard, như chúng ta vừa làm). Chạm vào phím A và bạn sẽ thấy như thế này:

OK, hãy thêm nhiều phím khác và làm cho nó trở nên giống keyboard thật sự.

Hãy thay đổi đoạn code mà chúng ta đã thêm vào trong viewDidLoad:

Bây giờ với những đoạn code này, chúng ta đã tạo ra một mảng chứa các button titles và chúng ta tạo ra một danh sách của button từ đó. Mỗi button bây giờ được thêm vào một mảng giống như một UIView và chúng sẽ là dòng đầu tiên của keyboard. Những button này sau đó sẽ được thêm vào keyboard view chính.

Nếu bạn run, có lẽ bạn sẽ chỉ thấy mỗi phím P bởi vì tất cả các phím đều xuất hiện cùng một vị trí. Chúng ta cần phải thêm những constraints bằng code để chúng có thể sắp xếp trải dài trên một hàng.

Vậy chúng ta sẽ khởi tạo một hàm mới để tạo các constraints:

 


Thật là nhiều code. Với AutoLayout, bạn không thể build được nó và bạn phải thêm tất cả các constraints một lần hoặc nó sẽ không làm việc. Công việc chính của đoạn code trên là thêm một constraint 1px cách cạnh trên và cạnh đáy của mỗi phím so với các view của dòng. Nó cũng thêm một constraint 1px cách cạnh trái và cạnh phải của mỗi phím so với những phím liền kề nó (hoặc là các cạnh của dòng nếu nó là phím đầu tiên hoặc phím cuối của dòng đó).

Nếu bạn thêm những hàm trên vào viewDidLoad, chúng ta sẽ thấy được các phím mới trên dòng:

Bây giờ, nhìn nó giống như một keyboard thật. Bước tiếp theo là thêm những dòng khác vào. Để làm điều đó, chúng ta hãy cấu trúc lại. Tạo một hàm mới mà nó sẽ thực hiện cho mỗi dòng phím.

Cơ bản là chúng ta đã có viewDidLoad để gọi các hàm riêng của chúng ta. Hàm mới này sẽ nhận vào một mảng titles cho từng dòng và trả về các view chứa tất cả các button cho từng dòng. Bây giờ chúng ta có thể gọi một vài dòng code cho mỗi dòng mà chúng ta muốn thêm phím vào.

Vậy trong hàm viewDidLoad sẽ như thế này:

Trong đoạn code trên, chúng ta thêm 4 dòng phím và sau đó thêm những phím cho mỗi dòng này.

Chúng ta có thể run code ngay nhưng bạn sẽ chỉ thấy dòng cuối cùng bởi vì tất cả chúng ở cùng vị trí. Chúng ta cần thêm vài AutoLayout constraints:

Hàm mới này thêm vào một constraint 1px tới cạnh trái và cạnh phải của dòng so với view chính và thêm một constraint 0px giữa mỗi dòng và một cái kế tiếp phía trên và phía dưới nó.

Bây giờ chúng ta cần gọi một vài dòng code từ hàm viewDidLoad:

Đây là hàm viewDidLoad của chúng ta. Bạn sẽ thấy rằng chúng ta thiết lập TranslatesAutoresizingMaskIntoConstraints cho mỗi dòng là false. Điều này đảm bảo những view của chúng ta sử dụng hàm để auto layout và nó không bị biến đổi khi hiển thị.

Bây giờ nếu bạn chạy ứng dụng, bạn sẽ thấy tất cả keyboard độc đáo được đưa ra. Bạn có thể chạm vào tất cả các phím để thấy rằng nó được nhập vào trong text field.

Có một vấn đề nhỏ ở đây, có một vài phím không thực hiện đúng chức năng (ví dụ: phím backspace và phím space)

Để khắc phục điều đó, chúng ta sẽ cần thay đổi hàm didTapButton một chút để thêm vào một số chức năng hợp lý cho các phím này.

 

Chúng ta đã đưa một câu lệnh switch để phân biệt các trường hợp title của phím. Phím backspace sẽ gọi hàm deleteBackward trong proxy, phím space sẽ thêm khoảng trắng và phím CHG sẽ thay đổi keyboard hoặc là keyboard trong hệ thống hoặc là keyboard tiếp theo được cài đặt thêm.

Bạn có thể phát triển thêm một số tính năng khác tuỳ biến cho keyboard hoặc là những giao diện khác đẹp hơn.

Bạn có thể download source code hay tìm bài viết ở App Design Vault.

Nguồn: IDE Academy via Maniacdev