How to send model data to the cell internally? - ios

Question

I have following code to display data in table view.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? ArticleTalbeViewCell else {
fatalError("ArticleTableViewCell not found")
}
let articleVM = self.articleListVM.articleAtIndex(indexPath.row)
// cell.viewModel = articleVM
cell.titlelabel?.text = articleVM.title
cell.descriptionLabel?.text = articleVM.description
return cell
}
}
Now, my code with
cell.titlelabel?.text = articleVM.title
cell.descriptionLabel?.text = articleVM.description
work well.
Is cell.viewModel = articleVM a good practice?
Imagine I must set the date to the cell many times? This approach cell.viewModel = articleVM will save several lines.
The UITableViewCell's code is below:
class ArticleTalbeViewCell: UITableViewCell {
var titlelabel:UILabel?
var descriptionLabel:UILabel?
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.setupUI()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
fatalError("init(coder:) has not been implemented")
}
private func setupUI() -> () {
let label1 = UILabel()
label1.numberOfLines = 0
let label2 = UILabel()
label2.numberOfLines = 0
label2.textColor = UIColor.lightGray
label2.setContentHuggingPriority(UILayoutPriority.defaultHigh, for: NSLayoutConstraint.Axis.vertical)
titlelabel = label1
descriptionLabel = label2
let staview = UIStackView()
staview.axis = .vertical
staview.addArrangedSubview(label1)
staview.addArrangedSubview(label2)
staview.spacing = 8
staview.translatesAutoresizingMaskIntoConstraints = false // !important
self.contentView.addSubview(staview)
staview.topAnchor.constraint(equalTo: self.contentView.topAnchor,constant: 5).isActive = true
staview.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -5).isActive = true
staview.leftAnchor.constraint(equalTo: self.contentView.leftAnchor, constant: 5).isActive = true
staview.rightAnchor.constraint(equalTo: self.contentView.rightAnchor, constant: -5).isActive = true
}
}
The ArticleListViewModel code is below:
struct ArticleListViewModel {
let articles:[Article]
}
extension ArticleListViewModel {
var numbeOfSections: Int {
return 1
}
func numOfRowsInSection(_ section: Int) -> Int {
return self.articles.count
}
func articleAtIndex(_ index: Int) -> ArticleViewModel {
let article = self.articles[index]
return ArticleViewModel(article)
}
}
struct ArticleViewModel {
private let article: Article
}
extension ArticleViewModel {
init(_ article: Article) {
self.article = article
}
}
extension ArticleViewModel {
var title: String {
return self.article.title ?? "null"
}
var description: String {
return self.article.description ?? "null"
}
}
The ArticleList code is below:
import Foundation
struct ArticleList: Decodable {
let articles: [Article]
}
struct Article: Decodable {
let title: String?
let description: String?
let chines: String?
}
How to edit the "cell" code to implement the cell.viewModel = articleVM?

Answer 1

First of all, I do not think giving cell.viewModel = articleVM does not change too much thing. Because of you have created ArticleListViewModel and ArticleViewModel it would be same if you create these vm's for your table view cell. However, I can give you some advices that is used by me while using MVVM approach.
You can add new property inside table view cell then using property observer give a value to it.
cell.article = articleVM
Therefore, either your cellForRowAt method won't be too long and it is almost same like giving your view model to your cell.
private var titlelabel:UILabel?
private var descriptionLabel:UILabel?
var article: ArticleViewModel? {
didSet {
guard let article = article else { return }
titlelabel?.text = article.title
descriptionLabel?.text = article.description
}
}
As far as I understand, your second question is if you have date variable and formatting inside cellForRowAt method takes too many spaces and looks ugly. That is why you need to do your business logic inside view model. Your table view cell is only responsible for showing it not to format it. I hope, it is clear for you. If you have any question you can ask.

Answer 2

Instead of configuring the cell in tableView(_:cellForRowAt:) method, you must configure your cell in the ArticleTalbeViewCell itself using the dataSource model, i.e.
class ArticleTalbeViewCell: UITableViewCell {
private var titlelabel: UILabel?
private var descriptionLabel: UILabel?
//rest of the code...
func configure(with article: Article) {
self.titlelabel?.text = article.title
self.descriptionLabel?.text = article.description
}
}
In the above code,
1. There is no need to expose titlelabel and descriptionLabel outside the class ArticleTalbeViewCell. So, mark both of them private.
2. You just need to call configure(with:) method along with the Article instance.
Why method and not a property of type Article?
There is no need to save the model object inside the ArticleTalbeViewCell until and unless it is required somewhere else after the cell is configured once.
In tableView(_:cellForRowAt:) method, you need to simply call configure(with:) method on your cell along with the article instance at that particular indexPath.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? ArticleTalbeViewCell else {
fatalError("ArticleTableViewCell not found")
}
let article = self.articleListVM.articleAtIndex(indexPath.row)
cell.configure(with: article)
return cell
}
Also, I don't think there is any need to create a separate ArticleViewModel. It is not doing anything special. It's just an extra wrapper on Article.
You can simply return Article type from articleAtIndex(_:) method in extension ArticleListViewModel, i.e
func articleAtIndex(_ index: Int) -> Article {
let article = self.articles[index]
return article
}
Why configuration in custom UITableViewCell?
This is because your tableView might contain multiple custom UITableViewCells. Adding the configuration of all the cell in tableView(_:cellForRowAt:) will make the code hefty and unable to read. Its better that the cell specific configuration is handled by the cell itself instead of the ViewController.