Implementing UICollectionView Inside ViewController

=====================================================

In this article, we will explore the process of integrating a UICollectionView into a custom ViewController. This can be achieved by creating a container view in your storyboard and assigning the collection view controller to it. We’ll break down each step in detail, providing code examples and explanations where necessary.

What is a UICollectionView?

A UICollectionView is a powerful UI component that allows you to display data in a grid-based layout. It’s commonly used for showcasing lists of items, such as images or products. The collection view controller acts as the middleman between your data source and the collection view itself.

Step 1: Create a Container View

To embed our custom collection view controller inside another ViewController, we need to create a container view in our storyboard. This will allow us to add the collection view within the existing view hierarchy of our main view controller.

Adding a Container View

To create a container view, follow these steps:

1. Open your storyboard and select the main view controller.
2. Drag a new view from the object library onto the screen, giving it a name such as “Container View”.
3. Resize the container view to fit within the bounds of the main view.

Assigning the Container View

Once you’ve added the container view, assign it to your collection view controller in the following way:

1. Select the collection view controller object in the storyboard.
2. Control-drag from the collection view controller to the container view.
3. Release the drag and select “Embed In” > “Container View”.
4. Assign a custom class to the container view, e.g., MyCollectionViewController.

Step 2: Define the Collection View Layout

In order to display our data in the collection view, we need to define its layout configuration.

Defining the Collection View Layout

To do this, open your collection view controller and select the collection view. Go to the attributes inspector (right-hand side panel) and find the “Collection View Layout” section:

• Scroll Type: Choose a scroll type that suits your needs.
• Minimum Line Fitting Space: Set the minimum line fitting space according to your requirements.

Step 3: Configure the Data Source

Our collection view data source will be responsible for providing our custom view cells. We’ll create a new class, MyCollectionCell, and implement the necessary protocols (UICollectionViewDataSource and UICollectionViewDelegate).

Defining MyCollectionCell

Create a new file called MyCollectionCell.swift (or MyCollectionCell.m on Mac) and add the following code:

import UIKit

class MyCollectionCell: UICollectionViewCell {
    let imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // Configure the view
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        // Add constraints for the image view
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 0),
            imageView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0),
            imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0),
            imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0)
        ])
        
        // Add the image view to the cell
        self.contentView.addSubview(imageView)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Step 4: Implementing the Data Source and Delegate Protocols

In our collection view controller, we need to implement the UICollectionViewDataSource and UICollectionViewDelegate protocols:

MyCollectionViewController.swift

import UIKit

class MyCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    // Define the data source
    var images = ["image1.jpg", "image2.jpg", "image3.jpg"]
    
    // Initialize the collection view
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Create the collection view layout
        let collectionViewLayout = UICollectionViewFlowLayout()
        collectionViewLayout.scrollDirection = .vertical
        self.collectionView?.layout = collectionViewLayout
        
        // Configure the data source and delegate
        selfcollectionView?.dataSource = self
        self.collectionView?.delegate = self
    }
    
    // MARK: - UICollectionViewDataSource
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return images.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MyCollectionCell
        
        // Configure the image view
        cell.imageView.image = UIImage(named: images[indexPath.item])
        
        return cell
    }
    
    // MARK: - UICollectionViewDelegate
    
    funccollectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("Selected Item: \(images[indexPath.item])")
    }
}

Conclusion

In this article, we explored the process of integrating a UICollectionView into a custom ViewController. By creating a container view in our storyboard and assigning the collection view controller to it, we were able to embed the collection view within the existing view hierarchy. We also defined the collection view layout configuration, configured the data source, and implemented the necessary protocols to provide our custom view cells.

With this knowledge, you should be able to create a UICollectionView inside your custom ViewController and start displaying your own data in a grid-based layout.

Last modified on 2023-10-09