0

I have collectionView inside tableView.backgroundView. TableView covers collectionView when it scrolls to top.

let customView = CustomView(frame: CGRect(x: 0, y: 0,width: view.frame.size.width, height: 164)) // my collectionView inside of this cuctomView

self.tableView.backgroundView = UIView() self.tableView.backgroundView?.addSubview(customView)

the tableView has contentInset with following parameters.

self.tableView.contentInset = UIEdgeInsets(top: 200, left: 0, bottom: 0, right: 0)

The problem that scroll of my collectionView doesn't work properly. When I try to scroll my collectionView horizontally, there is the vertical scroll of tableView is triggering. The same happens with taps. In 70 % works vertical scroll of tableView, when I try to scroll my collectionview horizontally .

You can see the schema of view in this picture. Sorry for my poor english enter image description here

5
  • Sounds like a problematic approach. A better option would be to make the collection view and table view siblings, with the top of the table view constrained to the bottom of the collection view.
    – DonMag
    Mar 4, 2022 at 19:25
  • If your goal is to allow the table to scroll-up and cover the collection view, this is a valid approach... and quick test shows no problems with it. You need to describe better what you mean by "doesn't work properly" and "cells are not tappable". Also, provide some detail on how you are instantiating the class for your .backgroundView. And... does your collection view code work properly when it's added to a view by itself, not part of the .backgroundView?
    – DonMag
    Mar 5, 2022 at 14:47
  • @DonMag Thank you for your comments. I have added more details. I hope that you will get it.)) Mar 5, 2022 at 18:31
  • I think this is just an inherent issue with your UI design. The table view and the collection view (in the table view's .backgroundView will be "competing" for gestures. UIKit waits until the touch has moved enough to determine the direction (horizontal or vertical) and then either the collection view or the table view will "capture" the gesture. Quick example here - pastebin.com/hFfn9Bsy - seems to work reasonably well.
    – DonMag
    Mar 6, 2022 at 14:03
  • @DonMag Thank you a lot(Sending you gig hugs), I found my mistake. Your example helped me. self.tableView.backgroundView = UIView() self.tableView.backgroundView?.addSubview(customView), I changed this lines to this code self.tableView.backgroundView = customView. And it helped me. Mar 7, 2022 at 3:53

1 Answer 1

0

just make sure you

  1. Set the delegate & datasource for your collection view to self, either in storyboard (ctrl+drag the collection view to the yellow dot on top of the view and select “delegate” and “dataSource”) or via code using collectionView.delegate = self and collectionView.dataSource = self
  2. set the scroll direction in the storyboard (in the collection view properties panel) or programmatically by defining the collectionView’s layout to UICollectionViewFlowLayout() and then setting layout.scrollDirection = .horizontal

it’s not clear in your question so I’ll go ahead and ask, is the collection view inside a UITableViewCell’s background view? I recommend this approach. You can then set the cell’s height and the view collection’s scroll direction to horizontal either in storyboard or in code. If you need more cells in the table view with a different format, just use different sections.

Basically what I mean is something like this

override func numberOfSections(in tableView: UITableView) -> Int {
  return 2
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  if section == 0 { 
     return 1
  } else { 
     return 1
  }
 }

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   if indexPath.section == 0 {
     let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as!  tableViewCellWithCollectionView
     if let layout = cell.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.scrollDirection = .horizontal
   } 
   return cell
 } else { 
   // …
  }
}

Then create a class with your cell

class tableViewCellWithCollectionView: UITableViewCell {

var collectionView = UICollectionView()

} 

Then of course you’ll need to add UICollectionViewDelegate & UICollectionViewDataSource protocols to the table view cell’s class and format your collection view.

Hope it helped :)

1
  • Hello @Margels. Thank you for your answer. The collectionView inside of tablewView's backgroundView. self.tableView.backgroundView = UIView() self.tableView.backgroundView?.addSubview(CustomViewWithCollectionView). I added edges to my tableView to make it visible before cells(as in the picture) and when I scroll tableView to top my collectionView is covered by tableView's cells Mar 5, 2022 at 18:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.