Search code examples
iosswiftuicollectionviewuiscrollview

Can I add a collection view to a collection view section header?


So I'm trying to figure out how to add two collection views on the name view controller. Right now the current collection view I have is a vertical scrolling collection view that displays users posts on the feed. I would like to add a "people to follow" section that scrolls horizontally on the top. Please note I would like the horizontal collection view to scroll down with the whole view.

Something that will look like this

enter image description here

I thought about adding a section header, then trying to add a collection view in that but I'm not sure if that is an illegal configuration.

I'm also not sure if I need to add 2 sections in the number of sections line.

Here is the collection view code currently.


@IBOutlet weak var collectionView: UICollectionView!

    // MARK: - UICollectionViewDataSource

     func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
        if posts.count > 4 {
            if indexPath.item == posts.count - 1 {
                fetchPosts()
            }
        }
    }

     func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if viewSinglePost {
            return 1
        } else {
            if posts.count == 0 {
            self.collectionView.setEmptyMessage("You haven't followed anyone yet.")
            } else {
                self.collectionView.restore()
            }
            return posts.count
        }
    }

     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PostsCell", for: indexPath) as! FollowingCell

        cell.delegate = self

        if viewSinglePost {
            if let post = self.post {
                cell.post = post

            }
        } else {
            cell.post = posts[indexPath.item]
        }

            handleUsernameLabelTapped(forCell: cell)
            handleMentionTapped(forCell: cell)
            handleHashtagTapped(forCell: cell)

        return cell
    }

Right now its just a basic feed that will fetch posts users upload. I thought it would be great user experience to include a people to follow section for new uses. What is the best way I should go about this?


Solution

  • Seems like you want to add two collection views, one is for upper that is horizontal and the lower is vertical

    • Add two collection views in the storyboard, give the first one a static height, take outlet from the storyboard and give outlet name something like UpperCollectionView and LowerCollectionView

    • set delegate and data source to the collectionViews

    upperCollectionView.delegate = self 
    upperCollectionView.dataSource = self 
    lowerCollectionView.delegate = self 
    lowerCollectionView.dataSource = self 
    

    in case of all delegate methods , implement the collectionViews using if - else method

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if collectionView == upperCollectionView {
            //do code for upperCollectionView 
        } else {
            //do code for  lowerCollectionView 
        }
    }
    
    
    

    if look like complex, then I will suggest you to split, the upper part in the parent viewController and lower part in a container view.

    If you want to scroll up the whole thing like a tableView scrolling, add all of this on a UIScrollView , this will handle the scrolling.