• Home
  • |
  • Custom text input trong Eureka

Tháng Ba 16, 2020

Custom text input trong Eureka

Eureka là một framework xử lý form rất mạnh mẽ trong ios. Tuy nhiên để custom UI trong framework này không phải là việc dễ dàng. Trong bài viết này mình sẽ hướng dẫn cách để custom UI cho text input trong Eureka. Bạn có thể download source sample tại đây.

Connect IBOutlet

Khi sử dụng Eureka để làm form trong ios, chúng ta thường phải custom UI bằng cách load file xib vào như sau:

<<< PostalAddressRow() {
     $0.cellProvider = CellProvider<PostalAddressCell>(nibName: "CustomNib", bundle: Bundle.main)
}

Tuy nhiên khi tạo file xib thì lạ lùng thay là các IBOutlet của UITableViewCell trong Eureka lại ko hiện ra. Vd giả sử chúng ta tạo một class CustomTextCell như sau:

import UIKit
import Eureka

class CustomTextCell: TextCell {
    
}

TextCell được thừa kế từ class _FieldCell với 2 IBOutlet như sau:

open class _FieldCell<T> : Cell<T>, UITextFieldDelegate, TextFieldCell where T : Eureka.InputTypeInitiable, T : Equatable {

    @IBOutlet public weak var textField: UITextField!

    @IBOutlet public weak var titleLabel: UILabel?
}

Sau đó tạo file xib với view bên trong là CustomTextCell, quan sát phần IBOutlet của xcode:

Và điều kỳ lạ đã xảy ra, đáng lẽ Xcode phải show 2 IBOutlet là textFieldtitleLabel. Nguyên nhân dường như là khi để IBOutlet bên trong một framework thì Interface Builder của xcode lại ko hiểu được.

Để giải quyết vấn đề, các bạn hãy chỉnh sửa một chút. Bằng cách trong file xib hãy cho UITableViewCell của bạn thừa kế class _FieldCell. Sau đó check lại phần IBOutlet trong xcode sẽ thấy hiện trở lại bình thường:

Tiến hành kết nối IBOutlet, sau đó chỉnh UITableViewCell trong file xib trở lại thừa kế _FieldCell. Trong xcode sẽ hiện ra như sau:

Có thể thấy phần IBOutlet hiện icon tam giác màu vàng với chấm than, cho biết việc connect IBOutlet đang không đúng. Tuy nhiên điều này không vấn đề gì cả. Bạn hãy bỏ qua và run project sẽ thấy chạy bình thường.

Override thiết lập mặc định của Eureka

Bạn hãy thử thay đổi một số config cho UITextField như màu sắc, font chữ, … Sau đó run xcode bạn sẽ thấy mặc dù đã thay đổi nhưng khi chạy lên UITextField vẫn hiện màu sắc, font chữ default. Nguyên nhân là do Eureka ko quan tâm đến việc chúng ta dùng default hay xib, framework luôn setting lại các thuộc tính về default. Để xử lý vấn đề này, chúng ta cần override hàm update() để ghi đè các thuộc tính:

class CustomTextCell: TextCell {
    override func update() {
        super.update()
        
        textField.textColor = UIColor.white
        textField.font = UIFont.systemFont(ofSize: 14)
    }
}

Chạy thử và bạn sẽ thấy các thuộc tính của UITextField đã được set đúng.

Ngoài ra trong một số trường hợp bạn có thể thấy một label lạ xuất hiện trên màn hình, đó chính là thuộc tính titleLabel của _FieldCell. Để xử lý bạn có thể trong hàm update cho thuộc tính này ẩn, hoặc remove hoàn toàn ra khỏi view.

Tổng kết

Như vậy qua bài viết này các bạn đã có thể custom UI cho TextRow trong Eureka. Nhìn chung lần đầu tiên do chưa biết các vấn đề nhỏ này các bạn sẽ mất thời gian một chút. Nhưng dần dần khi đã quen rồi thì sẽ xử lý dễ dàng và nhanh chóng. Hy vọng bài viết này đã giúp các bạn ít nhiều trong quá trình sử dụng Eureka để làm form. Cám ơn các bạn và hẹn gặp lại các bạn trong bài viết tiếp theo nhé ^^!

Related Posts

Custom picker row trong Eureka

Hướng dẫn cài đặt React Native đơn giản bao chạy được tháng 01/2020

Hướng dẫn mô hình MVVM trong ios kỳ 4: Dependency Injection và Unit Test ViewController

Hướng dẫn mô hình MVVM trong ios kỳ 3: Unit Test ViewModel

Hiển Phạm


Mình là một lập trình viên ios. Khi rảnh rỗi mình thích chơi game, đọc sách và tìm hiểu nhiều hơn về kỹ thuật lập trình.

Your Signature

Leave a Reply


Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}