企业网站后台模版,app开发开发公司,上海正规网站建设,电子商务网站建设设计方案文章目录 RxSwift - 实现一个MVVM架构的TableView前沿MVVM架构的Tableview目录结构1、模型#xff08;Model#xff09;2、视图模型#xff08;ViewModel#xff09;3、视图#xff08;View#xff09; 界面效果 RxSwift - 实现一个MVVM架构的TableView
前沿
MVVM架构在… 文章目录 RxSwift - 实现一个MVVM架构的TableView前沿MVVM架构的Tableview目录结构1、模型Model2、视图模型ViewModel3、视图View 界面效果 RxSwift - 实现一个MVVM架构的TableView
前沿
MVVM架构在在实际开发中被广泛应用它让代码结构清晰美观易于阅读维护同时也弥补了MVC结构中Controller臃肿的问题
今天来实现一个基于RxSwift的基础TableView页面 效果使用RxSwift将View与Model进行绑定实现动态修改数据时更新UI MVVM架构的Tableview
目录结构
以下是目录结构 目录由ViewModel、View、Model三个文件夹组成
1、模型Model
在Model文件夹下新建Product文件
import Foundationstruct Product {let imgName: String // 图let name: String// 名称let price: String// 价格
}模型简单表示了一个商品的
2、视图模型ViewModel
在ViewModel文件夹下新建ProductViewModel文件。它相当于是View和Model的桥梁在ViewModel中会有相应的获取数据以及处理数据的方法然后将数据传输到View
import Foundation
import RxSwiftclass ProductViewModel {// PublishSubject 只会发送新的事件给订阅者订阅之前的事件不会发送// BehaviorSubject 会保持最新的值并将其发送给新的订阅者let items PublishSubject[Product]()
// let items BehaviorSubject[Product](value: [])var productArray: [Product]!func fetchProductList() {// 在这里可以做网络请求// 咱们就直接用假数据productArray [Product(imgName: apple, name: apple, price: 10),Product(imgName: banana, name: banana, price: 5),Product(imgName: pear, name: pear, price: 4),Product(imgName: watermelon, name: watermelon, price: 3),Product(imgName: mango, name: mango, price: 8)]items.onNext(productArray)
// items.onCompleted()}func addData() {productArray.append(Product(imgName: peach, name: peach, price: 7))items.onNext(productArray)}
}该类中:
定义了时间发布者items使用PublishSubject类型定义获取数据的方法fetchProductList()获取完数据后使用onNext将事件发布出去。代码中注释掉onCompleted()是因为想要实现后续数据更新的操作onCompleted会终止序列使其不再接收新的元素。定义addData()方法界面中将通过点击按钮模拟增加数据操作
3、视图View
在View层首先有个简单的CellProductTableViewCell它有一个数据有属性item赋值时进行UI内容样式设置
import UIKitclass ProductTableViewCell: UITableViewCell {var item: Product? nil {didSet{textLabel?.text item?.name}}override func awakeFromNib() {super.awakeFromNib()// Initialization code}override func setSelected(_ selected: Bool, animated: Bool) {super.setSelected(selected, animated: animated)// Configure the view for the selected state}}接下来是ViewController
import UIKit
import RxSwift
import RxCocoaclass ViewController: UIViewController, UIScrollViewDelegate {private let bag DisposeBag()private let viewModel ProductViewModel()lazy var tableView: UITableView {let tableView UITableView(frame: view.bounds, style: UITableView.Style.grouped)view.addSubview(tableView)return tableView}()override func viewDidLoad() {super.viewDidLoad()tableView.rx.setDelegate(self).disposed(by: bag)bindTableView()let btn:UIButton UIButton(type: .system)btn.frame CGRectMake(10, view.frame.size.height - 80, view.frame.size.width - 20, 50)btn.backgroundColor .lightGraybtn.setTitle(addData, for: UIControl.State.normal)btn.rx.tap.subscribe(onNext: { [unowned self] inself.viewModel.addData()}).disposed(by: bag)view.addSubview(btn)}private func bindTableView() {tableView.register(ProductTableViewCell.self, forCellReuseIdentifier: cellId)viewModel.items.bind(to: tableView.rx.items(cellIdentifier: cellId, cellType: ProductTableViewCell.self)) { (row,item,cell) incell.item item}.disposed(by: bag)tableView.rx.modelSelected(Product.self).subscribe(onNext: { item inprint(SelectedItem: \(item.name))}).disposed(by: bag)viewModel.fetchProductList()}
}定义private let bag DisposeBag()作用就是在合适的时机自动调用这些 Disposable 对象的 dispose() 方法释放资源避免内存泄漏持有ViewModelprivate let viewModel ProductViewModel()初始化tableViewviewDidLoad()中指定了tableView代理为self然后将viewModel的items事件绑定到tableView即将数据源绑定到表视图行。同时订阅了选中某个模型的事件modelSelected即选中某个Cell的事件。使用RxCocoa提供的方法实现增加一个按钮点击时调用viewModel.addData()方法动态修改数据源。因为已将tableView绑定到数据源视图也将动态刷新
界面效果 oubijiexi
