swift - Rxswift 在 UITableView 中的 UISearchBar
问题描述
我使用 RxSwift 在我的 tableview 中显示 Persons 列表,我的 tableview 有两个部分,第一个是旧搜索,第二个是所有 Persons。现在我不知道当用户在 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)
}
}
感谢您的答复。
解决方案
你不需要这两个PublishSubjects
在你的ContactsViewController
. 您可以将您从 UISearchBar 和 viewModel 获得的 Observable 直接绑定到您的 UITableView。要使用您的查询过滤联系人,您必须分别过滤每个部分。我为此使用了一个小助手功能。
所以这就是我所做的
- 摆脱
showContacts
andallContacts
属性 - 创建一个
query
Observable 发出用户在搜索栏中输入的文本(不要过滤掉空文本,当用户删除搜索栏中的文本时,我们需要它来带回所有联系人) - 将
query
Observable 和viewModel.items
Observable 合并为一个 Observable - 使用这个 observable 过滤所有带有查询的联系人。
- 将该 Observable 直接绑定到表视图
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
在输入搜索栏触发网络请求时使用。
推荐阅读
- c# - 如何增加生成对象的 y(实例化)?
- javascript - 在没有服务器端语言的情况下保存一个在按钮单击时增加的数字
- python - 如果第一个元素相同,则添加两个子列表
- elasticsearch - Graylog + Elasticsearch - 如何使用以下模式通过正则表达式查询
- android - 警报对话框未出现在屏幕上
- entity-framework - 如何从 asp.net core web api 获取 JSON 数组作为响应
- reactjs - 我有一个让我发疯的反应问题
- wordpress - 仅在使用 nginx 代理时 Wordpress“建立数据库连接时出错”
- r - 根据列值对构面进行排序
- swift - Swift 命令行工具 -> 使用箭头键和空格键选择