RxCocoa Basic – Working with multi UI Control

Chào bạn đến với Fx Studio. Vẫn là câu chuyện dài với thế giới Rx & UIKit. Bài viết này sẽ nói về chủ đề tương tác với nhiều UI Control. Và sự ảnh hưởng qua lại giữa trạng thái dữ liệu & giao diện ứng dụng.

Trong bài viết này, chúng ta sẽ sử dụng lại nhiều toán tử của RxSwift. Nếu bạn chưa nắm chắc về chúng, thì có thể tham khảo lại ở bài viết dưới đây.

• • RxSwift – Tìm hiểu Operators & Hello world!

Còn nếu mọi thứ đã ổn rồi, thì …

Bắt đầu thôi!

Chuẩn bị

• • Xcode 12
  • Swift 5.3
  • RxSwift 5.0

Chúng ta vẫn dùng lại project của bài trước. Và vẫn với một màn hình là WeatherCityViewController, để hiện thị thông tin thời tiết của một thành phố nào đó. Ngoài ra, bạn có thể checkout source code demo ở đây.

• • Link: checkout
  • Thư mục: /Examples/BasicRxSwift

Việc phân tích & demo được dựa trên giao diện của WeatherCityViewController. Nếu bạn sử dụng demo riêng thì hãy tuỳ biến phù hợp theo giao diện ứng dụng của bạn.

1. Loading View

1.1. Bài toán

Hiển nhiên một điều là trong project thực tế, 1 màn hình không đơn giản chỉ hiển thị bằng 1 UI Control. Và cũng không phải im lìm nằm chờ Server gởi dữ liệu về. Và chúng ta phải hiểu một điều cực kì đơn giản nữa. Ngoài UI ra, thì UX cũng là một thành phần quan trọng trong việc hiển thị giao diện.

Ví dụ: như lúc loading, việc connect tới Server thì phải hiện ra UI cho loading. Nhằm cho người dùng biết trạng thái là ứng dụng của bạn đang xử lý việc kết nối … Theo ví dụ trên và theo demo từ hôm bữa tới chừ.

Chúng ta đang thiếu cái này.

1.2. Giải pháp

Với Loading View thì không phải cái gì mới hết. Bạn có thể sài các thư viện có sẵn như HUB … Nhưng trong phạm vi demo thì việc code tay vẫn sướng hơn và có nhiều việc cho bạn làm hơn.

Khi nào sẽ hiển thị Loading View:

• Việc hiển thị Loading View sẽ cùng lúc với việc request API

Khi nào sẽ ẩn Loading View:

• Có lỗi xảy ra trong quá trình request và parse data từ API
• Nhận được response data từ API

Cũng trình bày ở trên, việc ảnh hưởng tới nhiều UI Control 1 lúc thì xem như hiển nhiên. Ví dụ:

• Show loading –> ẩn đi các Label khác
• Hide loading –> hiển thị các Label khác

Đó chỉ là một trong những ví dụ đơn giản nhất trong các ví dụ đơn giản mà thôi. Để chuẩn bị thì bạn hay thêm một UIActivityIndicatorView vào file WeatherCityController cho 2 file swift & xib.

    @IBOutlet private var activityIndicator: UIActivityIndicatorView!

(Nó đã được thêm sẵn ở trong project demo rồi. Bạn chỉ cần disable Hidden trong file xib là được. Ahihi!)

Bạn build test thử nó đã xuất hiện chưa. Khi đã ổn về mặt setup UI, tiếp theo bạn tới phần dữ liệu.

2. Tách Observable

Bài toán thì đã rõ ràng rồi. Nhưng với code hiện tại của chúng ta, thì sẽ không thể nào đảm bảo được yêu cầu. Do đó, công việc lúc này là phân tách đối tượng Observable chúa từ trước tới giờ. Bạn xem lại đoạn của của nó ở file WeatherCityViewController.

        let search = searchCityName.rx.controlEvent(.editingDidEndOnExit)
            .map { self.searchCityName.text ?? "" }
            .filter { !$0.isEmpty }
            .flatMap { text in
                return WeatherAPI.shared
                    .currentWeather(city: text)
                    .catchErrorJustReturn(Weather.empty)
            }
            .asDriver(onErrorJustReturn: Weather.empty)

Đoạn code trên tuy là 1 nhưng lại chứa trong đó 2 phần riêng biệt.

• • Phần input từ UITextField. Sẽ là phần bắt đầu cho chuỗi hành động.
  • Phần request API. Chịu trách nhiệm cho việc tương tác API.

Bạn xem đoạn code tách sau:

        // MARK: - INPUT
        let searchInput = searchCityName.rx.controlEvent(.editingDidEndOnExit)
            .map { self.searchCityName.text ?? "" }
            .filter { !$0.isEmpty }



        
        // MARK: - SEARCH
        let search = searchInput
            .flatMapLatest { text  in
                return WeatherAPI.shared.currentWeather(city: text)
                    .catchErrorJustReturn(Weather.empty)
            }
            .asDriver(onErrorJustReturn: Weather.empty)

Trong đó:

• searchInput sẽ chỉ liên quan tới UITextField. Nó chỉ có 1 nhiệm vụ duy nhất là emit ra một String.
• search bây giờ là Observable với dữ liệu từ API trả về. Vẫn là các bắt error cũ.
• asDriver để sử dụng Trait cho các UI Control ở dưới. Đảm bảo an toàn UI trên MainThread.

Chưa có gì khó ở đây hết. Nhưng đây là bước dọn đường việc bạn sẽ có nhiều nguồn input sau này. Ta có thể gọi request API bằng việc thay đổi toạ độ người dùng. Hay bằng việc tìm kiếm trên bản đồ … Ngoài ra, việc tách Observable này sẽ giúp ta quản lý được nhiều UI Control trong giao diện hoặc cùng tác động tới 1 UI Control.

Trong ví dụ:

• Observable search sẽ tác động tới các Label để hiển thị thông tin
• Observables search & searchInput đều sẽ tác động tới Loading View.

Bây giờ, ta đã có các Observable riêng lẻ cho từng mục đích sử dụng. Chuyển qua việc handling phức hợp với nhiều UI.

3. Xử lý

3.1. Tạo Observable

Việc một Observable tác động tới nhiều UI Control, thì chúng ta đã cùng nhau phân tích ở các bài Display Data & Binding Observables rồi. Còn việc nhiều Observable cùng tác động tới 1 UI Control, thì ta sẽ giải quyết với bài toán Loading View này.

Ta có sơ đồ sau:

searchInput ---> map { true }      ---|
                                      |---> loading
search      ---> filter { false }  ---|

Cách dễ nhất là bạn phải có 1 đối tượng nào đó để nắm chốt hết các trường hợp xảy ra. Ví dụ quan tâm của chúng ta đang là Loading View. Rồi từ đối tượng đó, các UI Control sẽ chịu tác động theo.

Nếu hiển thị Loading View thì sẽ ẩn các Label. Và ngược lại.

Về các trường hợp liên quan tới Loading View thì như nhắc ở trên. Bây giờ ta chọn việc tạo ra 1 Observable mà kết hợp lại nhiều điều kiện hay là nhiều Observable đã tách ở trên.

Bạn xem đoạn code sau:

let loading = Observable.merge(
                searchInput.map { _ in true },
                search.map { _ in false }.asObservable()
            )
            .startWith(true)
            .asDriver(onErrorJustReturn: false)

Trong đó:

• merge truyền thống. Dùng để gôm các Observable lại với nhau
• Observable nào cuối cùng phát đi giá trị. Thì các subscriber sẽ nhận được là mới nhất
• searchInput khi người dùng nhấn gõ và khác rỗng, thì sẽ phát đi true. Tức là yêu cầu Loading View hiển thị
• search khi có kết quả từ API về, thì sẽ phát ra false. Nghĩa là bạn đã  hoàn thành 1 tác vụ gọi API. Lúc đó yêu cầu Loading View ẩn đi
• starWith để cho Loading View bắt đầu bằng gì đó mặc định, có thể là hiển thị trước tiên
• asDriver để biến nó thành Driver, phục vụ cho Binding lên UI dễ hơn

3.2. Cập nhật giao diện

Cuối cùng là sử dụng nó trên UI như thế nào. Bắt đầu với em activityIndicator.

        loading
            .skip(1)
            .drive(activityIndicator.rx.isAnimating)
            .disposed(by: bag)

Cũng khá đơn giản phải không nào. Về skip(1) hay gì đó là do bạn setup ban đầu. Vì mình để ActivityIndicator hiển thị ngay lúc bắt đầu của ViewController. Nên có thể bỏ qua phần tử đầu tiên.

Áp dụng tương tự cho các UI còn lại.

        loading
            .drive(containerView.rx.isHidden)
            .disposed(by: bag)
        
        loading
            .drive(tempLabel.rx.isHidden)
            .disposed(by: bag)
        
        loading
            .drive(iconLabel.rx.isHidden)
            .disposed(by: bag)
        
        loading
            .drive(humidityLabel.rx.isHidden)
            .disposed(by: bag)
        
        loading
            .drive(cityNameLabel.rx.isHidden)
            .disposed(by: bag)

Tạm kết

• Tách ra nhiều Observable cho nhiều mục đích trong ứng dụng
• Xử lý một Observable tác động tới nhiều UI Control
• Xử lý việc nhiều Observable cùng nhau tác động tới một UI Control

Okay! Tới đây thì mình xin kết thúc bài viết này. Nếu có gì thắc mắc hay góp ý cho mình thì bạn có thể để lại bình luận hoặc gởi email theo trang Contact.

Cảm ơn bạn đã đọc bài viết này!

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!