Two custom cells layout in TableView - ios

Question

I have a tableView on mainStoryboard with two custom cells.
I would like to set two more cells at different row. I was trying to find the answer but could not find out.
I have image and code added below.
class HomeViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, MFMailComposeViewControllerDelegate {
#IBOutlet var tblStoryList: UITableView!
var array = PLIST.shared.mainArray
override func viewDidLoad() {
super.viewDidLoad()
//spacing between header and cell
self.tblStoryList.contentInset = UIEdgeInsetsMake(-20, 0, 0, 0)
//delete separator of UITableView
tblStoryList.separatorStyle = .none
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.array.count + 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.row == 0 {
let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath) as! HeaderCell
cell.headerTitle.text = "First Stage"
return cell
}
let cell = tableView.dequeueReusableCell(withIdentifier: "StoryTableviewCell", for: indexPath) as! StoryTableviewCell
//making plist file
let dict = self.array[indexPath.row - 1]
let title = dict["title"] as! String
let imageName = dict["image"] as! String
let temp = dict["phrases"] as! [String:Any]
let arr = temp["array"] as! [[String:Any]]
let detail = "progress \(arr.count)/\(arr.count)"
//property to plist file
cell.imgIcon.image = UIImage.init(named: imageName)
cell.lblTitle.text = title
cell.lblSubtitle.text = detail
cell.selectionStyle = UITableViewCellSelectionStyle.none
return cell
}

Answer 1

Update your conditions for HeaderCell and use ternary operator to set headerTitle
if indexPath.row == 0 || indexPath.row == 3 || indexPath.row == 5 {
let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath) as! HeaderCell
cell.headerTitle.text = indexPath.row == 0 ? "First Stage" : indexPath.row == 3 ? "Second Stage" : "Third Stage"
return cell
}

Answer 2

Instead of using Stages as a row, use them as a section header. You can put custom view in header section.
Main Idea :
section-ize your row along with stages, put the cell's data in an array and add them in a dictionary with the section value as their key. To visualise your case the dictionary will look like following.
#{
#"First Stage" : #[object_for_basic_grammar_1,
object_for_basic_grammar_2
],
#"Second Stage": #[object_for_basic_grammar3],
...
...
}
And Another array is needed to store the order of the dictionary keys, which will visualise to following
#[#"First Stage", #"Second Stage"
]
Now step by step follow the list:
Use numberOfSections(in:) for providing that how many stages here. return the count of the array which stores the sections.
Use tableView(_:numberOfRowsInSection:) for providing the number of rows in that section. get the section string object from the section list array declared later and search for the rows in the dictionary. You'll find a array of grammars here, return the count of that array.
Use tableView(_:cellForRowAt:) for providing the particular cell for that row as you've done for the grammar's cell.
Use tableView(_:heightForHeaderInSection:) for providing the height for the section header.
Now implement tableView(_:viewForHeaderInSection:) and return the view for specifying the section view, which in your case is the stages.
hope it helps you, best of luck.