CODEWITHSUNDEEP
iosswiftuiviewuicollectionviewuicollectionviewcell
Cody Lucas
Cody Lucas

Reputation: 692

How can I center a UIActivityIndicatorView in a UICollectionViewCell?

I am trying to put a UIActivityIndicatorView inside each collection view cell as it downloads its image. I have it appearing in each cell, but it refuses to center itself. It stays in the top left corner. How can I get it to center itself properly?

Here's how I'm doing it:

extension UIView {

    func showActivityIndicator(onView: UIView, withIndicator: UIActivityIndicatorView) {
        withIndicator.frame = CGRect(x: onView.frame.midX - 20, y: onView.frame.midY - 20, width: 40, height: 40)
        withIndicator.activityIndicatorViewStyle = .whiteLarge
        withIndicator.center = onView.center
        onView.addSubview(withIndicator)
        withIndicator.startAnimating()
    }
}

I call that function inside cellForItemAtIndexPath like:

showActivityIndicator(onView: cell.contentView, withIndicator: activityInd)

But nothing I do will move it from the top left corner. Any advice?

Upvotes: 1

Views: 620

Answers (3)

ronatory
ronatory

Reputation: 7324

You need to add contraints to center it. For example use NSLayoutAnchor.

You need to set translatesAutoresizingMaskIntoConstraints to false, to set your constraints. And after adding it to the view set the constraints (hints in the code comments):

extension UIView {

    func showActivityIndicator(onView: UIView, withIndicator: UIActivityIndicatorView) {
        withIndicator.frame = CGRect(x: onView.frame.midX - 20, y: onView.frame.midY - 20, width: 40, height: 40)
        withIndicator.activityIndicatorViewStyle = .whiteLarge

        // set translatesAutoresizingMaskIntoConstraints to false to set your constraints
        withIndicator.translatesAutoresizingMaskIntoConstraints = false
        onView.addSubview(withIndicator)
        withIndicator.startAnimating()

        // add the constraints to center the indicator
        withIndicator.centerXAnchor.constraint(equalTo: onView.centerXAnchor).isActive = true
        withIndicator.centerYAnchor.constraint(equalTo: onView.centerYAnchor).isActive = true
    }

}

Upvotes: 2

sarosh mirza
sarosh mirza

Reputation: 702

Try this

withIndicator.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

Upvotes: 5

Avi Levin
Avi Levin

Reputation: 1868

I suggest using constraints (aka auto layout):

indicator.translatesAutoresizingMaskIntoConstraints = false
"your cell".addSubview(indicator)

let widthConstraint = NSLayoutConstraint(item: indicator, attribute: .Width, relatedBy: .Equal,
                                                 toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 250)

let heightConstraint = NSLayoutConstraint(item: indicator, attribute: .Height, relatedBy: .Equal,
                                                  toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 100)

let xConstraint = NSLayoutConstraint(item: indicator, attribute: .CenterX, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterX, multiplier: 1, constant: 0)

let yConstraint = NSLayoutConstraint(item: indicator, attribute: .CenterY, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterY, multiplier: 1, constant: 0)

NSLayoutConstraint.activateConstraints([widthConstraint, heightConstraint, xConstraint, yConstraint])

Upvotes: 0

Related Questions