Tạo Text Field với hiệu ứng đếm kí tự (Phần 1)

45

Trong dự án gần nhất của tác giả, tác giả cần phải giới hạn độ dài văn bản UITextField

Có một cách để làm điều này chỉ với vài dòng lệnh UITextFieldDelegate với hàm ShouldReturnCharacterInRange

Chúng ta tạm thời bỏ qua đoạn code này một chút.

Trong bài hướng dẫn này tác giả sẽ chỉ cho các bạn làm như thế nào để tích hợp đếm kí tự phía bên phải ngay trong khung văn bản. Cuối cùng, bạn sẽ có hiệu ứng đếm rất đẹp như thế này:

1*uAtK0BWtl2IofuVz7LJLTA

Bắt đầu !

Bước 1: Thiết lập cơ bản

Đầu tiên, tạo một project mới. Tạo một class mới là subclass của UITextField

1*ye7AMfe9OPUQ5gIh0Meyew

Nếu bạn muốn class của bạn có thể truy cập từ Interface Builder, bạn nên thêm @IBDesignable trước định nghĩa class như sau:

Chúng ta cần hiển thị số lượng kí tự, nên quay về phía trên tạo một UILabel

Tạo 1 vài thuộc tính, nó sẽ định nghĩa hiệu ứng đếm. Thêm @IBInspectable, nếu bạn muốn truy cập thuộc tính này từ Interface Builder:

Chúng ta sẽ dùng lengthLimit để thiết lập giới hạn từ Interface Builder hoặc truy cập đặc tính này từ dòng lệnh.

countLabelTextColor sẽ thiết lập cho màu của kí tự số lượng đếm thành màu đen.

Chúng ta đã sẵn sàng thêm một Label mới vào project. Vào storyboard và thêm một UILabel. Sử dụng AutoLayout để cố định vị trí ở giữa màn hình và tạo một constraint chiều ngang là 150:

1-d02KHvNQyVJRMVI71mdIIQ

1-m47oeU1TG0vi7XLNCSydEw

Tìm đến tab Identity Inspector và đổi tên class thành DRHTextFieldWithCharacterCount:

1-A_jQZhAdQ9F_3bTt40TCfQ

Quay lại tab Attributes Inspector, chỉnh Length Limit và Count Label Text Color:

1-SaUxNF8WPBlJnPBQRWHXkQĐó là tất cả những gì cần làm ở StoryBoard, quay lại file class đã tạo trước đó của bạn.

Tiếp theo, chúng ta cần chỉnh label và hiển thị nó trong UITextField.

Bước 2: Thiết lập Counter Label

Tạo một phương thức trong class của bạn:

Chúng ta tiếp tục dùng rightView để hiện thị label. RightView là 1 thuộc tính có sẵn trong UITextField nằm mặc định ở phía bên phải.

Đầu tiên, chúng ta làm cho nó hiển thị:

Trong ví dụ này, chúng ta muốn luôn luôn hiển thị Counter Label (nếu bạn không muốn hiển thị nó lúc text field chưa sử dụng đến thì đổi chế độ thành WhileEditing).

Chỉnh font mặc định cho Counter Label. Cho project này, chúng ta chỉnh nó là 10:

Chỉnh màu cho Counter Label với thuộc tính người dùng tự định nghĩa:

Căn văn bản bên trái của Label:

Mặc định, rightView là nil, nên chúng ta cần khởi tạo cho nó Label của chúng ta:

Bây giờ chúng ta thiết lập khởi tạo văn bản cho biến đếm. Thêm dòng lệnh dưới đây vào:

Sau dòng lệnh này bạn sẽ bị cảnh báo là initialCounterValue() không tồn tại. Lên phía trên và tạo thêm hàm ở trong hàm hiện tại:

Nguồn: IDE Academy tổng hợp