ios – Making a certain view tappable in CollectionView cell


I want to make certain view in cell of collectionView tappable.

Code Of ViewController

class ViewController: UIViewController {
    
    let collectionView:UICollectionView = {
        let view = UICollectionViewFlowLayout()
        view.scrollDirection = .horizontal
        let cv : UICollectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: view)
        cv.translatesAutoresizingMaskIntoConstraints = false
        cv.showsHorizontalScrollIndicator = false
        cv.isPagingEnabled = true
        return cv
    }()
    
    let arrayData:[Data] = [Data(vectorImages: "Group 3", maskImages: "", rectangleImage: "", headingLabel: "Document Reader", detailText: "Lorem ipsum dolor sit amet consectetur. Sit tortor malesuada egestas velit magna. Egestas congue nisi tincidunt urna.",view: View(background: .systemPurple, cornerRadius: 12),labelInView: "Get Started"),
                            Data(vectorImages: "Group 10", maskImages: "Mask group-2", rectangleImage: "Rectangle 144", headingLabel:"Read and View", detailText: "Lorem ipsum dolor sit amet consectetur. Sit tortor malesuada egestas velit magna. Egestas congue nisi tincidunt urna.",view:View(background: .systemPurple, cornerRadius: 12),labelInView: "Get Started"),
                            Data(vectorImages: "Group 11", maskImages: "Mask group-3", rectangleImage: "Rectangle 144", headingLabel: "Read and View", detailText: "Lorem ipsum dolor sit amet consectetur. Sit tortor malesuada egestas velit magna. Egestas congue nisi tincidunt urna.",view: View(background: .systemPurple, cornerRadius: 12),labelInView: "Get Started"),
                            Data(vectorImages: "Group 12", maskImages: "Mask group-4", rectangleImage: "Rectangle 144", headingLabel: "Read and View", detailText: "Lorem ipsum dolor sit amet consectetur. Sit tortor malesuada egestas velit magna. Egestas congue nisi tincidunt urna.",view: View(background: .systemPurple, cornerRadius: 12),labelInView: "Get Started")]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemPurple
        
        setupView()
        setDelegatesAndDatasource()
        registerCell()
        
    }
    
    func setupView() {
        view.addSubview(collectionView)
        
        NSLayoutConstraint.activate([
            
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
            
        ])
    }
    
    func setDelegatesAndDatasource() {
        collectionView.delegate = self
        collectionView.dataSource = self
    }
    
    func registerCell() {
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
    }
    
    
}

extension ViewController:

UICollectionViewDelegateFlowLayout,UICollectionViewDataSource {
 
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrayData.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)as! CollectionViewCell
        cell.customView.vectorImage.image = UIImage(named: "\(arrayData[indexPath.row].vectorImages)")
        cell.customView.maskImage.image = UIImage(named: "\(arrayData[indexPath.row].maskImages)")
        cell.customView.rectangleView.image = UIImage(named:"\(arrayData[indexPath.row].rectangleImage)")
        cell.customView.heading.text = arrayData[indexPath.row].headingLabel
        cell.customView.detailText.text = arrayData[indexPath.row].detailText
        cell.customView.view = arrayData[indexPath.row].view as! View
        cell.customView.labelInView.text = arrayData[indexPath.row].labelInView
        
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 393 , height: 852)
    }
}

In this cell of CollectioView cell.customView.view this View I want it to make it tappable

Code Of ScreenView that in this a view which I want to make tappable

import UIKit

class ScreenView: UIView {
    
    let rectangleView = ImageView(image: "")
    
    let maskImage = ImageView(image: "")
            
    let vectorImage = ImageView(image: "")
    
    let heading = Label(text: "Some Text", font: UIFont.systemFont(ofSize: 30, weight: .black), textColor: .black)
        
    
        let detailText:UILabel = {
            let lbl = UILabel()
            lbl.translatesAutoresizingMaskIntoConstraints = false
            lbl.font = .systemFont(ofSize: 14, weight: .light)
            lbl.numberOfLines = 0
            return lbl
        }()
    
    var view = View(background: .systemPurple, cornerRadius: 12)
    let labelInView = Label(text: "Get Started", font: UIFont.systemFont(ofSize: 14, weight: .black), textColor: .white)
    
    init(vectorImage:String, maskImage:String, rectangleView:String, labelHeading:String, labelText:String, view:UIView, viewLabel:String)
        {
            super.init(frame: .zero)
            self.translatesAutoresizingMaskIntoConstraints = false
            self.vectorImage.image = UIImage(named: vectorImage)
            self.maskImage.image = UIImage(named: maskImage)
            self.rectangleView.image = UIImage(named: rectangleView)
            heading.text = labelHeading
            detailText.text = labelText
            self.view = view as! View
            self.labelInView.text = viewLabel
            
            setupViews()
        }
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
     func setupViews() {
            
            addSubview(rectangleView)
            rectangleView.addSubview(maskImage)
            rectangleView.addSubview(vectorImage)
            addSubview(heading)
            addSubview(detailText)
            addSubview(view)
            view.addSubview(labelInView)
            
            NSLayoutConstraint.activate([
                
                rectangleView.centerYAnchor.constraint(equalTo: centerYAnchor),
                rectangleView.centerXAnchor.constraint(equalTo: centerXAnchor),
                rectangleView.widthAnchor.constraint(equalToConstant: 345),
                rectangleView.heightAnchor.constraint(equalToConstant: 441),
                
                maskImage.topAnchor.constraint(equalTo: rectangleView.topAnchor),
                maskImage.widthAnchor.constraint(equalToConstant: 345),
                
                vectorImage.bottomAnchor.constraint(equalTo: rectangleView.bottomAnchor, constant: -10),
                vectorImage.centerXAnchor.constraint(equalTo: rectangleView.centerXAnchor),
                vectorImage.widthAnchor.constraint(equalToConstant: 313),
                vectorImage.heightAnchor.constraint(equalToConstant: 251),
                
                heading.topAnchor.constraint(equalTo: rectangleView.bottomAnchor, constant: 20),
                heading.centerXAnchor.constraint(equalTo: centerXAnchor),
                
                detailText.topAnchor.constraint(equalTo: heading.bottomAnchor, constant: 20),
                detailText.centerXAnchor.constraint(equalTo: centerXAnchor),
                detailText.widthAnchor.constraint(equalToConstant: 313),
                
                view.topAnchor.constraint(equalTo: detailText.bottomAnchor, constant: 74),
                view.leadingAnchor.constraint(equalTo: rectangleView.leadingAnchor ),
                view.widthAnchor.constraint(equalToConstant: 345),
                view.heightAnchor.constraint(equalToConstant: 52),
                
                labelInView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
                labelInView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
            ])
        }
}

The Code of CustomCell in CollectionView
import UIKit

class CollectionViewCell: UICollectionViewCell {
    
    
    let customView = ScreenView(vectorImage: "", maskImage: "", rectangleView: "", labelHeading: "Some Text", labelText: "Text you", view:View(background: .systemPurple, cornerRadius: 12), viewLabel: "Get Started")
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupView() {
        
            addSubview(customView)
        
        NSLayoutConstraint.activate([
            customView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: -100),
            customView.centerXAnchor.constraint(equalTo: centerXAnchor)
            
        ])
    }
    
}

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img