Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on November 16, 2020

RxCocoa Basic – Working with multi UI Control

RxSwift

Contents

  • Chuẩn bị
  • 1. Loading View
    • 1.1. Bài toán
    • 1.2. Giải pháp
  • 2. Tách Observable
  • 3. Xử lý
    • 3.1. Tạo Observable
    • 3.2. Cập nhật giao diện
  • Tạm kết

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)

Nếu OKAY cho tất cả. Thì bạn hãy build lại project và kiểm tra lại xem chúng đã hoạt động theo ý mình chưa. Và nếu hoạt động OKAY là bạn sẽ thấy Loading View xuất hiện mỗi lần bạn nhấn enter (tức là kết thúc việc edit UITextField). Sau khi API kết thúc thì Loading View cũng ẩn theo.

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!

FacebookTweetPinYummlyLinkedInPrintEmailShares2

Related Posts:

  • SwiftUI - Phần 8 : Working with List
    SwiftUI - Phần 8 : Working with List
  • RxCocoa Basic – Extend UIKit
    RxCocoa Basic – Extend UIKit
  • RxCocoa Basic – Forward Delegate
    RxCocoa Basic – Forward Delegate
  • RxCocoa Basic – Binding Observables
    RxCocoa Basic – Binding Observables
Tags: rxswift
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!

Leave a Reply Cancel reply

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

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

You may also like:

  • SwiftUI - Phần 8 : Working with List
    SwiftUI - Phần 8 : Working with List
  • RxSwift – Phần 3 : RxCocoa Basic
    RxSwift – Phần 3 : RxCocoa Basic
  • RxCocoa Basic – Binding Observables
    RxCocoa Basic – Binding Observables
  • RxCocoa Basic – Merge Observables Input
    RxCocoa Basic – Merge Observables Input
  • Control Flow - Dart Tour
    Control Flow - Dart Tour

Archives

  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!