Bài 5 – Xử lý thao tác nhập dữ liệu của người dùng

Tiếp nối bài kết nối giao diện với mã nguồn, mình sẽ hướng dẫn bạn phương pháp để xử lý thao tác khi người dùng nhập dữ liệu vào ô Text Field. Trong bài hướng dẫn này mình sẽ sử dụng tiếp project của bài trước. Trọng tâm của bài sẽ hướng dẫn bạn làm quen với UITextFieldDelegate , bài viết này ngắn nhưng lại nhiều chữ và sẽ hơi khó hiểu vì vậy bạn hãy thật tập trung nhé.

Thiết lập “uỷ quyền” với delegate

Khi nhấn vào Text Field, thì Keyboard được hiển thị để bạn nhập dữ liệu cho Text Field. Trong bài thiết kế giao diện, mình đã hướng dẫn bạn thiết lập phím Done cho Keyboard. Bây giờ, điều mà chúng ta muốn là sau khi nhập dữ liệu trên Text Field, nếu người dùng nhấn phím Done trên Keyboard thì sẽ thực hiện chức năng gì đó (ví dụ hiển thị tên món ăn lên label chẳng hạn).

➤ Vấn đề: Keyboard không phải là thành phần của Text Field mà do View Controller quản lý.

➤ Giải pháp: Thiết lập delegate để “uỷ quyền” cho View Controller thực hiện điều này giúp Text Field.

Kết thúc bài trước, ứng dụng của bạn đã có thể cho phép người dùng thiết lập label của tên món ăn thành giá trị mặc định. Nhưng chúng ta vẫn chưa thực hiện xử lý nào khi người dùng nhập dữ liệu vào Text Field. Và việc chúng ta cần làm bây giờ là xây dựng chức năng sao cho khi người dùng nhập nội dung nào đó vào Text Field thì giá trị của Text Field sẽ được cập nhật lên label mealNameLabel.

➤ Lưu ý: Chúng ta sẽ chỉ cập nhật nội dung của Text Field lên Label khi người dùng nhấn phím Done trên bàn phím. Để làm điều này chúng ta sẽ sử dụng Text Field delegate.

Delegate là gì?

Delegate là một đối tượng được uỷ quyền thực hiện công việc nào đó thay cho một đối tượng khác. Đối tượng uỷ quyền trong trường hợp này là Text Field. Text field sẽ tham chiếu đến một đối tượng nhận uỷ quyền thông qua thuộc tính delegate.

Khi có hành động phát sinh Text Field sẽ gửi một thông điệp tới delegate. Thông báo cho delegate về hành động mà Text Field sẽ thực hiện hoặc vừa thực hiện xong. Delegate sẽ phản hồi lại bằng cách thực hiện công việc nào đó tương ứng với hành động mà Text Field uỷ quyền.

Bất cứ đối tượng nào cũng có thể đóng vai trò là một delegate cho một đối tượng khác, miễn là nó phù hợp với các protocol của đối tượng đó. Protocol để xác định delegate của Text Field được gọi là UITextFieldDelegate. Thông thường đối tượng View Controller hay được sử dụng là delegate cho các đối tượng khác. Vì vậy trong trường hợp này, mình cũng sẽ sử dụng View Controller là delegate cho Text Field.

Thiết lập delegate

Đầu tiên mình sẽ áp dụng protocol UITextFieldDelegate cho class ViewController để làm delegate cho TextField. Các bước thực hiện như sau:

1. Mở tập tin ViewController.swift
2. Bổ sung protocol UITextFieldDelegate vào như sau:
   ➤ Áp dụng protocol UITextFieldDelegate, có nghĩa là chúng ta thông báo cho trình biên dịch biết rằng class ViewController có thể hành động như một TextField delegate hợp lệ. Vì vậy mà bạn có thể thực thi các phương thức của protocol UITextFieldDelegate để xử lý nội dung mà người dùng nhập vào TextField.
3. Thiết lập delegate trong viewDidLoad, như sau:
   Protocol UITextFieldDelegate khai báo 8 phương thức mà chúng ta có thể tùy chọn sử dụng. Nhưng trong khuôn khổ bài này, bạn chỉ cần cài đặt 2 phương thức:
   

Cài đặt delegate cho Text Field

Khi người dùng nhấn vào Text Field, thì Text Field sẽ ở trạng thái first responder. Có nghĩa là Text Field trở thành đối tượng đầu tiên tiếp nhận các sự kiện chính của ứng dụng. Chính vì vậy mà hệ điều hành iOS sẽ hiển thị bàn phím để phục vụ việc nhập dữ liệu.

Bạn hãy nhớ là sau khi kết thúc việc nhập liệu thì bạn cần giải phóng Text Field khỏi trạng thái first responder. Lúc này hệ điều hành iOS sẽ chuyển những sự kiện chính sang các đối tượng khác. Và việc này cũng sẽ giúp bạn ẩn đi bàn phím sau khi hoàn tất việc nhập dữ liệu. Để làm việc này, chúng ta sẽ xử lý trong phương thức textFieldShouldReturn(_:).

Phương thức textFieldShouldReturn(_:) sẽ được gọi khi người dùng nhấn phím Return. Tuỳ vào loại bàn phím mà phím Return sẽ có label khác nhau nhưng vai trò thì đều như nhau. OK, bây giờ bạn hãy cài đặt như sau:
Phương thức textFieldDidEndEditing(_:) được gọi sau khi TextField giải phóng trạng thái first-responder. Phương thức này giúp chúng ta đọc thông tin của TextField và lấy nội dụng của nó gán cho Label.
Đến đây là đã hoàn thành việc xử lý nhập liêu cho người dùng. Bạn hãy chạy thử để thấy kết quả nhé, còn dưới đây là kết quả của mình.

Tổng kết

Mình đã trình bày xong cho bạn phần xử lý nhập liệu cho ứng dụng FoodTracker. Bài này code rất ít nhưng lại cần diễn giải vì thế chữ hơi nhiều. Nhưng hãy cố gắng bạn nhé, nội dung bài này toàn những ý quan trọng để làm nền tảng cho việc lập trình sau này. Không biết rằng cách mình diễn giải ở trên có giúp bạn hiểu hết hay không, nhưng nếu có thắc mắc gì thì đừng ngại comment bên dưới nhé.