Group similar UITableViewCell using protocol to reduce code - ios

Question

Some Background
Let's say I have to display a form which can have various types of components:
Text Field
Text Area
Image
Video
Dropdown
I have created UITableViewCell for each one but since they all are form components and each and every one of them have some properties common in them like some data(formData, userEntered data) and more I made a protocol and conformed all these cells to this protocol
protocol FormComponent where Self: UITableViewCell {
var property1: String? { get set }
var property2: String? { get set }
}
And conformed my cells like this
class TextFieldCell: UITableViewCell, FormComponent {
var property1: String?
var property2: String?
}
Problem
Now when I have to decide which UITableViewCell I have to create, I have to make a switch statement and decide which form component is to be created
// Some field that I get from some computation and this same will go inside every cell no matter the type
let field = computeFieldValue()
switch fieldType {
case textField:
let cell = tableView.dequeueReusableCell(withIdentifier: TEXT_FIELD_CELL, for: indexPath) as! TextFieldCell
cell.property1 = field.property1
cell.property2 = field.property2
return cell
case textArea:
let cell = tableView.dequeueReusableCell(withIdentifier: TEXT_AREA_CELL, for: indexPath) as! TextAreaCell
cell.property1 = field.property1
cell.property2 = field.property2
return cell
}
Now rather than initialising the cell and assigning the property inside the case of switch, I wanted to use protocol advantage to initialise the cell outside the switch as a sort-of protocol type so that I can assign the values of properties outside the switch and don't need to assign the same values to properties inside each case
// Some field that I get from some computation and this same will go inside every cell no matter the type
let field = computeFieldValue()
var cell = // cell initialisation which will be of type FormComponent so that I can access the property values directly from here
cell.property1 = field.property1
cell.property2 = field.property2
switch fieldType {
case textField:
// Converting that cell to TextFieldCell with the properties defined above intact
case textArea:
// Converting that cell to TextAreaCell with the properties defined above intact
}
return cell
I think it's sort of like Upcasting, I am not so sure how to achieve this. And if there is some properties specific to a single fieldType, I can maybe downcast to like cell as! TextFieldCell inside the case part and assign that
And I have a lot of properties and a lot of cases(fieldType) to handle so this approach will reduce the code a lot

Answer 1

Few Model and Classes creations. You already had implemented these but for the check I added them
FieldType enum
enum FieldType {
case textArea, textLabel, textField
}
Field struct Model. You may be using class and might be you have more properties
struct Field {
var type : FieldType
var property1 : String
var property2 : String
}
Now your protocol as you already mentioned in your question
protocol FormComponent where Self: UITableViewCell {
var property1: String? { get set }
var property2: String? { get set }
}
And some different kind cells, one of them is mentioned in the question.
class TextFieldCell: UITableViewCell, FormComponent {
var property1: String?
var property2: String?
}
class TextAreaCell: UITableViewCell, FormComponent {
var property1: String?
var property2: String?
}
class TextLabelCell: UITableViewCell, FormComponent {
var property1: String?
var property2: String?
}
Now to make all these things in work you need to use protocol extension as I mentioned in comments.
extension FormComponent {
func setProperties(p1 : String, p2 : String) {
self.property1 = p1
self.property2 = p2
}
}
Now in cellForRow, to make reusable code, you need to code like below
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let field = arrFields[indexPath.row]
var cell : FormComponent?
switch field.type {
case .textArea:
cell = tableView.dequeueReusableCell(withIdentifier: "TextAreaCell") as! TextAreaCell
case .textLabel:
cell = tableView.dequeueReusableCell(withIdentifier: "TextLabelCell") as! TextLabelCell
case .textField:
cell = tableView.dequeueReusableCell(withIdentifier: "TextViewCell") as! TextFieldCell
}
cell!.setProperties(p1: field.property1, p2: field.property2)
return cell!
}
Edit: Probably it should work as you are type casting FormComponent into TextFieldCell. If in case it is not working then try below code inside switch case
case .textField:
cell = tableView.dequeueReusableCell(withIdentifier: "TextFieldCell") as! TextFieldCell
let newObject = cell as! TextFieldCell // type cast your cell
newObject.yourProperty = "New Property" // access your specified property
That's it. 😋
Note : In cellForRow, cell object is optional, so make sure it won't by passed your switch-cases else your app will be crashed.

Answer 2

Whenever I try to take advantage of Swift features to simplify the development and make it more fun, UIKit always makes sure to make it super hard or even impossible so its easy to get discouraged and frustrated.
What you are trying to achieve is something which every app may have its own solution for, since there are so many ways to approach this problem and many will go with the solution appropriate for their needs (which may differ significantly from project to project).
In my case, in the project I am currently working at I have applied this strategy, for implementing table views:
Define an enumeration of items that will be created to build the list, in your case it could be:
enum FormListItem {
case textField(String, String) // eg. text value, placeholder
case textArea(String) // text value
case image(UIImage)
case video(URL)
case dropdown([String])
}
Build model structure for the table view, and easily supply data for table view data source protocol methods (number of sections and rows)
private var items = [[FormListItem]]() { didSet { tableView.reloadData() } }
private func buildItems() {
items = [[.textField(“text”, “sample")]]
}
items.count // number of sections
items[section].count // number of rows in section
In cellForRow method access item for indexPath, switch over the cases and take advantage of Swifts associated values for enumeration cases to pass appropriate data in a elegant manner.
let item = items[indexPath.section][indexPath.row]
switch item {
case .textField(let property1, let property2):
let cell = tableView.dequeueReusableCell(
withIdentifier: TEXT_FIELD_CELL, for: indexPath
) as! TextFieldCell
cell.property1 = property1
cell.property2 = property2
return cell
// … handle other cases
}
This architecture serves me well, and integrates nicely with MVC and MVVM. I have been using this approach in quite a while and it is implemented across the whole project I am currently working at that is in production. It provides a very readable interface for what the table view is supposed to be displaying and the cells it is built with. But most importantly it enables me to pass exactly the data I want to cells and not having them exposed to different types of input not related to them. I realize that you still need to manually dequeue every cell separately but sometimes it is not worth fighting UIKit, cause you can waste a lot of time and achieve little, which makes things even worst. Not going too deep with abstractions will also make it easy to adjust the codebase to any changes in the future.