iosswiftuicollectionviewcellcgrectsuperview

Swift iOS -How to get frame of button inside cell's superView


I have collectionView inside a view controller. Inside the collectionView cell I have a button. Since there will be several cells each button will have a different location inside the vc. When a button is tapped, how can I get the frame of the button inside the ViewController (not the collectionView)? I want to get it from within the cell itself and not in cellForItem.

No matter which button I tap inside any cell, I tried this below but it always prints out (0.0, 64.0, 0.0, 0.0):

@objc func myButtonTapped() {
    let locationInSuperView = self.convert(myButton.frame, to: nil)
    print(locationInSuperView)
}

Code below:

CollectionViewCell:

class MyCell: UICollectionViewCell{

    lazy var myButton: UIButton = {
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setImage(UIImage(named: "myButton"), for: .normal)
        button.addTarget(self, action: #selector(myButtonTapped), for: .touchUpInside)
        return button
    }()

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

        backgroundColor = .white

        contentView.addSubview(myButton)
        myButton.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -8).isActive = true
        myButton.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
        myButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
        myButton.widthAnchor.constraint(equalToConstant: 50).isActive = true
    }

    @objc func myButtonTapped() {

        let locationInSuperView = self.superview!.convert(myButton.frame, to: nil)
        print(locationInSuperView)
    }
}

ViewController:

ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    var collectionView: UICollectionView!
    let myCell = "myCell"

    override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
        layout.scrollDirection = .vertical

        collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(MyCell.self, forCellWithReuseIdentifier: myCell)
        view.addSubview(collectionView)
    }

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

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

        return cell
    }

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

Solution

  • Using nil in the conversion was causing the problem. I used the app's window and switched it from nil to window and the problem was resolved.

    @objc func myButtonTapped() {
    
        if let window = UIApplication.shared.keyWindow {
            
            let locationInWindow = self.convert(myButton.frame, to: window)
            print(locationInWindow)
        }
    }
    

    Update:

    I found another way. It's a little more complicated but it works

    // 1. use delegation inside the cell
    protocol YourCellDelegate: class {
        func getReferenceTo(cell: YourCell)
    }
    
    class YourCell: UICollectionViewCell {
    
        lazy var someButton: UIButton = {
            // ...
        }()
    
        // 2. wherever you add someButton to the cell make sure it is a child of the cell's contentView
        func setAnchors() {
    
            self.contentView.addSubview(someButton)
            // set the x,y,w,h for the button
        }
    
        // 3. call the delegate in layoutSubviews
        override func layoutSubviews() {
            super.layoutSubviews()
    
            // 4. *** SUPER IMPORTANT *** call contentView.layoutIfNeeded() first
            contentView.layoutIfNeeded()
    
            // 5. second call your delegate method here after calling contentView.layoutIfNeeded()
            delegate?.getReferenceTo(cell: self)
        }
    }
    

    Inside the class that has your collectionView that conforms the to delegate

    extension YourClass: YourCellDelegate {
    
        func getReferenceTo(cell: UICollectionViewCell) {
    
            // 6. get a reference to the main UIWindow
            guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else { return }
    
            // 7. get a reference to the button from the cell
            let someButton = cell.someButton
    
            // 8. call convert(_:) using the window, the button's frame, and the cell's contentView (make sure that the button is a subview of the cell's contentView and not the cell itself -step 2.)
            let buttonFrameInWindow = window.convert(someButton, from: cell.contentView)
    
            print(buttonFrameInWindow) // will print the button's CGRect in the UIWindow x,y,w,h { 100, 400, 40, 40 }
        }
    }