Can UITableView scroll with UICollectionView inside it?

Question

I have the structures below...

I wrap two of collection views into tableview

One is in tableview header(Collection1), another is in tableview 1st row(Collection2).

All the functions are good (Both collection view).

just...

When I scroll up in Collection2, Collection1 will Not scroll up together, because I'm only scrolling the collectionViews not the tableview.

It only scroll together when I scroll in Collection1.

Is it possible to make the header view scroll with user just like app store's index carousel header?

Or I just went to the wrong place, I should use other ways to approach.

Do you want collectionView2 to scroll vertically ?. If not disable that, then scroll vertical is only for tableView — Dinesh Balasubramanian, May 22 '18 at 03:45
"Can UITableView scroll with UICollectionView inside it?" Yes, of course. What's the reason of letting the first collection view to be in a header instead of a cell? are you aiming to let it be sticky (doesn't move when scrolling the table view)? — Ahmad F, May 22 '18 at 08:23
Related: https://stackoverflow.com/questions/31582378/ios-8-swift-tableview-with-embedded-collectionview https://github.com/ashfurrow/Collection-View-in-a-Table-View-Cell — Ahmad F, May 22 '18 at 08:25
Give Height constant > 0 to collectionview inside the tableview cell, now when you set data to collection view (after reload) set height constant same as content size.height fo collection view — Prashant Tukadiya, May 24 '18 at 12:42

score 13 · Answer 1 · edited Jun 20 '20 at 09:12

13

Solution

When you keep CollectionView1 as a TableViewHeader, CollectionView1 will always on the top of TableView after it reaches top. If you want Collection1 and Collection2 scroll up together, you need to keep CollectionView1 in a cell, not a header.
Make sure CollectionView2 content height smaller or equal to TableViewCell's height. As I checked on App Store, they always make SubCollectionView content height equal to TableViewCell's height (If they use TableView).

Result

For more detail, you can take a look at my sample project

https://github.com/trungducc/stackoverflow/tree/app-store-header

edited Jun 20 '20 at 09:12

Community

1
1

answered May 22 '18 at 02:08

trungduc

11,926
4
31
55

his problem that `UICollectionView`, which located inside `UITableViewCell`, has `vertical` scrolling, so obviously it will not work. Because while he is scrolling `UICollectionView` - `UITableView` will not be scrolled – Taras Chernyshenko May 23 '18 at 11:30
**Make sure CollectionView2 content height smaller or equal to TableViewCell's height.** Did I forget to give a solution for it? @TarasChernyshenko – trungduc May 23 '18 at 11:33

Prashant Tukadiya · Answer 2 · 2018-05-24T13:05:37.100

Problem

1) Your tableview cell Collectionview (let's say collection2) , Collection 2 is scrollable. So when you scroll up tableview won't scroll up

Solution

1) Just simple and working solution would be height constant , You have to give height constant to the collection2 with >= relationship and 0 Constant value and 750 priority !!

Now the question is how to use this

You need to take IBOutlet of Height constant to your custom tableview cell and need to manage the collectionview height from there.

Here is example

class FooTableViewCell: UITableViewCell {


    static let singleCellHeight = 88;

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var iconsCollectionView: IconsCollectionView!
    @IBOutlet weak var const_Height_CollectionView: NSLayoutConstraint!

    var delegateCollection : TableViewDelegate?

var bars:[Bar] = [] {
        didSet {
            self.iconsCollectionView.reloadData()
            iconsCollectionView.setNeedsLayout()
            self.layoutIfNeeded()

            let items:CGFloat = CGFloat(bars.count + 1)
            let value = (items / 3.0).rounded(.awayFromZero)

            const_Height_CollectionView.constant =  CGFloat((iconsCollectionView.collectionViewLayout as! UICollectionViewFlowLayout).itemSize.height * value)

            self.layoutIfNeeded()
        }
    }

    override func awakeFromNib() {
        iconsCollectionView.translatesAutoresizingMaskIntoConstraints = false
        iconsCollectionView.initFlowLayout(superviewWidth: self.frame.width)
        iconsCollectionView.setNeedsLayout()
        iconsCollectionView.dataSource = self
        iconsCollectionView.delegate = self
        const_Height_CollectionView.constant =  iconsCollectionView.contentSize.height
        self.layoutIfNeeded()
        self.setNeedsLayout()
    }
}

You can check my answer Making UITableView with embedded UICollectionView using UITableViewAutomaticDimension Very similar and 100% working

Another solution You can also take UICollectionView with sections which contain another horizontal collectionview , with this solution you don't need to manage contentsize for every cell

Hope it is helpful

Can UITableView scroll with UICollectionView inside it?

2 Answers2

Solution

Result

Problem

Solution

Linked