Issues while showing content in collection view inside table view in swift - ios

Question

i have used collection view inside the table view and populate data inside the collection view coming from backend. Now when i reload the data it does not shows me UI in a way i'm trying to show, i want my UI to look like this,
But when i run my app and open the VC my table view looks like that,
Data is not coming in horizontal way and its duplicating the cell of collection view. This is my code for Collection view to populate data inside it.
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return categoryArray[section].blogArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "familyCell", for: indexPath) as! FamilyCVC
cell.categoryLbl.text = categoryArray[indexPath.section].blogArray[indexPath.row].articleTitle
let imageUrl = categoryArray[indexPath.section].blogArray[indexPath.row].imageUrl!
print(imageUrl)
cell.categoryImage.sd_setImage(with: URL(string: imageUrl), placeholderImage: UIImage(named: "person.jpeg"))
cell.bgView.layer.masksToBounds = true
cell.bgView.layer.shadowColor = UIColor.black.cgColor
cell.bgView.layer.shadowOpacity = 3
cell.bgView.layer.shadowOffset = CGSize(width: -1, height: 1)
cell.bgView.layer.shadowRadius = 2
cell.bgView.layer.shouldRasterize = true
return cell
}
This is the code for table view holding collection view ,
func numberOfSections(in tableView: UITableView) -> Int {
return categoryArray.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return categoryArray.count
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 35
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = Bundle.main.loadNibNamed("KnowledgeHeaderTVC", owner: self, options: nil)?.first as! KnowledgeHeaderTVC
headerView.categoryNameLbl.text = categoryArray[section].catName
headerView.articlesLbl.text = "\(categoryArray[section].blogArray.count)" + "articles"
return headerView
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = knowledgeTableView.dequeueReusableCell(withIdentifier: "KnowledgeCell", for: indexPath) as! KnowledgeDetailTVC
//cell.categoryArray = categoryArray
cell.categoryCollectionView.delegate = self
cell.categoryCollectionView.dataSource = self
cell.categoryCollectionView.reloadData()
return cell
}
I want to show my data in UI like the first image in my question.

Answer 1

You may need
1-
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1 // change this to 1
}
2-
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = knowledgeTableView.dequeueReusableCell(withIdentifier: "KnowledgeCell", for: indexPath) as! KnowledgeDetailTVC
cell.categoryCollectionView.tag = indexPath.section // add this
cell.categoryCollectionView.delegate = self
cell.categoryCollectionView.dataSource = self
cell.categoryCollectionView.reloadData()
return cell
}
3-
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return categoryArray[collectionView.tag].blogArray.count // use tag here
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "familyCell", for: indexPath) as! FamilyCVC
cell.categoryLbl.text = categoryArray[collectionView.tag].blogArray[indexPath.row].articleTitle
let imageUrl = categoryArray[collectionView.tag].blogArray[indexPath.row].imageUrl!
print(imageUrl)
cell.categoryImage.sd_setImage(with: URL(string: imageUrl), placeholderImage: UIImage(named: "person.jpeg"))
cell.bgView.layer.masksToBounds = true
cell.bgView.layer.shadowColor = UIColor.black.cgColor
cell.bgView.layer.shadowOpacity = 3
cell.bgView.layer.shadowOffset = CGSize(width: -1, height: 1)
cell.bgView.layer.shadowRadius = 2
cell.bgView.layer.shouldRasterize = true
return cell
}