Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nest a UICollectionView inside a UIVIew programmatically

I am attempting to get a UICollectionView to be inside a UIView as the framework I'm using requires a UIView to be returned. I have looked at this question: How do I add a UICollectionView to a UIView as a subview? and Adding UICollectionView inside UIView without Storyboards but not sure how to get it to work.

I have a attempted it like this:

class TopView : UIView, UICollectionViewDataSource, UICollectionViewDelegate {

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .red

        addSubview(collectionView)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    lazy var collectionView : UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        cv.translatesAutoresizingMaskIntoConstraints = false
        cv.delegate = self
        cv.dataSource = self
        cv.register(HeaderCell.self, forCellWithReuseIdentifier: "HeaderCell")
        cv.backgroundColor = .yellow

        return cv
    }()

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HeaderCell", for: indexPath) as! HeaderCell

        return cell

    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: self.collectionView.frame.width, height: 200)
    }

    func collectionView(_ collectionView: UICollectionView, numberOfSections section: Int) -> Int {
        return 1
    }

}

But I'm getting a blank screen.

Update:

This is how I add the TopView to a UIViewController:

class MainViewController: UIViewController {

    var mainView = TopView()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(mainView)
    }
}

I get just a black screen.

like image 616
Chace Avatar asked Nov 13 '17 09:11

Chace


People also ask

How do I add a section in CollectionView?

So for your first task, you'll add a new section header using the search text as the section title. To display this section header, you'll use UICollectionReusableView . This class is like UICollectionViewCell , except it's usually used to display headers and footers.

How do I select an item in CollectionView?

Single selectionWhen the SelectionMode property is set to Single , a single item in the CollectionView can be selected. When an item is selected, the SelectedItem property will be set to the value of the selected item.

How does swift implement UICollectionView?

Select the Main storyboard from the file browser. Add a CollectionView by pressing command shift L to open the storyboard widget window. Drag the collectionView onto the main view controller. Add constraints to the UICollectionView widget to ensure that the widget fills the screen on all devices.

What is CollectionView?

A collection view manages an ordered set of content, such as the grid of photos in the Photos app, and presents it visually. Collection views are a collaboration between many different objects, including: Cells. A cell provides the visual representation for each piece of your content. Layouts.


1 Answers

TopView.swift

class TopView : UIView, UICollectionViewDataSource, UICollectionViewDelegate {

    lazy var collectionView : UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let cv = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        //If you set it false, you have to add constraints.
        cv.translatesAutoresizingMaskIntoConstraints = false 
        cv.delegate = self
        cv.dataSource = self
        cv.register(HeaderCell.self, forCellWithReuseIdentifier: "HeaderCell")
        cv.backgroundColor = .yellow
        return cv
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = .red

        addSubview(collectionView)

        //Add constraint
        collectionView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        collectionView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    func collectionView(_ collectionView: UICollectionView, numberOfSections section: Int) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 30
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HeaderCell", for: indexPath) as! HeaderCell
        cell.backgroundColor = .cyan
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: self.collectionView.frame.size.width, height: 200)
    }    
}

ViewController.swift

lazy var topView: TopView = {
    let tv = TopView()
    tv.translatesAutoresizingMaskIntoConstraints = false
    return tv
}()

func addTopView() {
    view.addSubview(topView)

    topView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    topView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    topView.topAnchor.constraint(equalTo: view.topAnchor, constant: 300).isActive = true
    topView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    topView.heightAnchor.constraint(equalToConstant: 200).isActive = true
}

Call addTopView() from viewDidLoad()

like image 139
Jay Patel Avatar answered Sep 21 '22 10:09

Jay Patel