Rxswift的UITableView中的UISearchBar

时间:2018-12-11 04:47:57

标签: swift uitableview uisearchbar rx-swift rxdatasources

我使用RxSwift在我的表视图中显示“人”列表,并且我的表视图有两个部分,第一个是旧搜索,第二个是所有“人”。现在,我不知道当用户在UISearchBar的文本字段中键入名称时如何过滤“人”。

这是我的Person模型:

struct PersonModel {
    let name: String
    let family:String
    let isHistory:Bool
}

这是我的ContactsViewModel

struct SectionOfPersons {
    var header: String
    var items: [Item]
}

extension SectionOfPersons: SectionModelType {
    typealias Item = PersonModel

    init(original: SectionOfPersons, items: [SectionOfPersons.Item]) {
        self = original
        self.items = items
    }
}

class ContactsViewModel {

    let items = PublishSubject<[SectionOfPersons]>()

    func fetchData(){

        var subItems : [SectionOfPersons] = []

        subItems.append( SectionOfPersons(header: "History", items: [
            SectionOfPersons.Item(name:"Michelle", family:"Obama", isHistory:true ),
            SectionOfPersons.Item(name:"Joanna", family:"Gaines", isHistory:true )
        ]))
        subItems.append( SectionOfPersons(header: "All", items: [
            SectionOfPersons.Item(name:"Michelle", family:"Obama", isHistory:false ),
            SectionOfPersons.Item(name:"James", family:"Patterson", isHistory:false ),
            SectionOfPersons.Item(name:"Stephen", family:"King", isHistory:false ),
            SectionOfPersons.Item(name:"Joanna", family:"Gaines", isHistory:false )
        ]))

        self.items.onNext( subItems )
    }

}

这是我的ContactsViewController:

class ContactsViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var searchBar: UISearchBar!

    private lazy var dataSource = RxTableViewSectionedReloadDataSource<SectionOfPersons>(configureCell: configureCell, titleForHeaderInSection: titleForHeaderInSection)

    private lazy var configureCell: RxTableViewSectionedReloadDataSource<SectionOfPersons>.ConfigureCell = { [weak self] (dataSource, tableView, indexPath, contact) in
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "ContactTableViewCell", for: indexPath) as? ContactTableViewCell else { return UITableViewCell() }
        cell.contact = contact
        return cell
    }

    private lazy var titleForHeaderInSection: RxTableViewSectionedReloadDataSource<SectionOfPersons>.TitleForHeaderInSection = { [weak self] (dataSource, indexPath) in
        return dataSource.sectionModels[indexPath].header
    }

    private let viewModel = ContactsViewModel()
    private let disposeBag = DisposeBag()

    var showContacts = PublishSubject<[SectionOfPersons]>()
    var allContacts = PublishSubject<[SectionOfPersons]>()

    override func viewDidLoad() {
        super.viewDidLoad()

        bindViewModel()
        viewModel.fetchData()
    }

    func bindViewModel(){

        tableView.backgroundColor = .clear
        tableView.register(UINib(nibName: "ContactTableViewCell", bundle: nil), forCellReuseIdentifier: "ContactTableViewCell")
        tableView.rx.setDelegate(self).disposed(by: disposeBag)

        viewModel.items.bind(to: allContacts).disposed(by: disposeBag)
        viewModel.items.bind(to: showContacts).disposed(by: disposeBag)
        showContacts.bind(to: tableView.rx.items(dataSource: dataSource)).disposed(by: disposeBag)

        searchBar
            .rx.text
            .orEmpty
            .debounce(0.5, scheduler: MainScheduler.instance)
            .distinctUntilChanged()
            .filter { !$0.isEmpty }
            .subscribe(onNext: { [unowned self] query in

                ////// if my datasource was simple string I cand do this
                self.showContacts = self.allContacts.filter { $0.first?.hasPrefix(query) } // if datasource was simple array string, but what about complex custome object?!

            })
            .addDisposableTo(disposeBag)

    }
}

感谢您的回复。

1 个答案:

答案 0 :(得分:3)

您的PublishSubjects中不需要两个ContactsViewController。您可以将从UISearchBar和viewModel获得的Observable直接绑定到UITableView。要使用查询过滤联系人,您必须分别过滤每个部分。我为此使用了一些辅助功能。

这就是我所做的

  1. 摆脱showContactsallContacts属性
  2. 创建一个query可观察对象,该对象发出用户输入到搜索栏中的文本(不要过滤掉空文本,当用户在搜索中删除文本时,我们需要带回所有联系人栏)
  3. queryviewModel.items的可观察值合并为一个可观察的值
  4. 使用此可观察对象过滤查询中的所有联系人。
  5. 将该可观察项直接绑定到表视图rx.items

我使用了combineLatest,因此只要查询或viewModel.items发生变化(我不知道所有联系人的列表是静态的还是添加/删除联系人),表视图就会更新。

所以现在您的bindViewModel()代码如下所示(我将tableView.register(...)移到了viewDidLoad):

func bindViewModel(){
    let query = searchBar.rx.text
        .orEmpty
        .distinctUntilChanged()

    Observable.combineLatest(viewModel.items, query) { [unowned self] (allContacts, query) -> [SectionOfPersons] in
            return self.filteredContacts(with: allContacts, query: query)
        }
        .bind(to: tableView.rx.items(dataSource: dataSource))
        .disposed(by: disposeBag)
}  

以下是使用查询过滤所有联系人的功能:

func filteredContacts(with allContacts: [SectionOfPersons], query: String) -> [SectionOfPersons] {
    guard !query.isEmpty else { return allContacts }

    var filteredContacts: [SectionOfPersons] = []
    for section in allContacts {
        let filteredItems = section.items.filter { $0.name.hasPrefix(query) || $0.family.hasPrefix(query) }
        if !filteredItems.isEmpty {
            filteredContacts.append(SectionOfPersons(header: section.header, items: filteredItems))
        }
    }
    return filteredContacts
}

我假设您想根据查询检查人员的姓名和家庭。

另一件事:我删除了debounce,因为您过滤了一个已经在内存中的列表,这确实非常快。在搜索栏中输入触发网络请求时,通常会使用debounce