• Home
  • |
  • Custom picker row trong Eureka

Tháng Ba 13, 2020

Custom picker row trong Eureka

Eureka là một framework dùng để implement các form input trong ios. Nó hỗ trợ nhiều tính năng mạnh mẽ giúp cho việc tạo form trở nên dễ dàng và nhanh chóng hơn. Tuy nhiên framework này không hỗ trợ tốt trong việc custom một số trường hợp nhất định, cụ thể như custom picker row. Trong bài viết này mình sẽ đưa ra cách làm tổng quát và có thể tái sử dụng được cho tình huống này. Tuy nhiên mình sẽ không giải thích tường tận chi tiết mà chỉ đưa ra một vài điểm chính yếu và quan trọng nhất. Để xem chi tiết bạn có thể tham khảo sample tại đây.

Vấn đề

Thực ra thông thường thì Eureka có hỗ trợ chúng ta cách để custom UI cho một row nhất định bằng cách dùng cellProvider như sau:

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

Thế nhưng đáng tiếc thay cách làm này chỉ có tác dụng trong trường hợp Row đang sử dụng data dạng non generic, vd như Int, String, … Còn nếu như là dạng generic như PickerRow:

public final class PickerInputRow<T>

Thì khi chúng ta tạo một file xib để custom UI cho row, rồi load bằng cellProvider sẽ bị lỗi crash. Nguyên nhân là do bản thân ios ko hỗ trợ việc load UITableViewCell với generic type bằng file xib.

Giải pháp

Để giải quyết vấn đề này, chúng ta sẽ đưa phần xib vào một UIView riêng, trong UITableViewCell chúng ta hoàn toàn không sử dụng custom xib nào hết. Thay vào đó khi set up cell chúng mới bắt đầu load file xib vào và add vào content của UITableViewCell:

open class PickerInputCellCustom<T>: PickerInputCell<T> where T: Equatable {
    var bsContentView: PickerInputCellContentView?

    open override func setup() {
        super.setup()
        bsContentView = (row as? PickerInputHasCustomContentView)?.contentViewProvider?.makeView()
        if let unwrapped = bsContentView {
            addSubview(unwrapped)
            unwrapped.snp.makeConstraints { (make) in
                make.edges.equalToSuperview()
            }
        }
    }
    // ...
}

Bằng cách này, chúng ta có thể giải quyết vấn đề custom UI cho picker row cũng như các row sử dụng kiểu dữ liệu generic trong Eureka mà không phá vỡ mô hình form data của framework.

Tổng kết

Trên đây mình đã trình bày cơ bản về khó khăn khi custom UI cho picker row trong Eureka và cách để giải quyết. Hy vọng bài viết này sẽ có ích cho bạn trong quá trình sử dụng framework Eureka. Nếu có thắc mắc hoặc góp ý rất mong được nhận comment từ các bạn. Xin cám ơn và hẹn gặp lại các bạn trong bài viết tiếp theo.

Related Posts

Custom text input 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"}