CODEWITHSUNDEEP
iosswift
Stefan
Stefan

Reputation: 936

Set corner radius on view after view loads

I have a view coming from a class and I want to set the corner radius equal to half it's width.

The width is a computed property made using autolayout. So normally I'd set the corner radius property in viewWillLayoutSubviews() like so

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    c.largeProfileImage.layer.cornerRadius = c.largeProfileImage.frame.width / 2
}

But the largeProfileImage isn't an initial view it gets called after viewdidLoad and I animate it on a tap gesture. Below is where the view is animated onto screen. It is created in this same function.

     //I tried setting the cornerRadius here as well but it isn't setting.

    //c.largeProfileImage.layer.cornerRadius = c.largeProfileImage.frame.width / 2


    self.view.layoutIfNeeded()

    UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseOut, animations: {

        self.profileImageContainerCenterY?.constant = -(c.profileImageContainer.frame.height) * 2
        self.profileSettingsContainerCenterY?.constant = 0

        c.profileSettingsContainer.alpha = 1
        c.largeProfileImage.alpha = 1

        self.view.layoutIfNeeded()
    }, completion: { (completed) in
        self.view.layoutIfNeeded()
})

EDIT:

Here's the profileImage

let largeProfileImage: UIImageView = {
    let pv = UIImageView()
    pv.contentMode = .scaleAspectFill
    pv.layer.masksToBounds = true
    pv.clipsToBounds = true
    pv.image = UIImage(named: "user")

    pv.translatesAutoresizingMaskIntoConstraints = false
    return pv
}()

Upvotes: 0

Views: 726

Answers (3)

Stefan
Stefan

Reputation: 936

I was able successfully to debug the issue.

Since the width was a computed property it was 0 before the layout was laid out meaning

c.largeProfileImage.layer.cornerRadius = c.largeProfileImage.frame.width / 2

self.view.layoutIfNeeded()

resulted in a corner radius of zero.

So the solution...

was to call it afterwards the width was to set the corner radius after the width was computed.

self.view.layoutIfNeeded()

c.largeProfileImage.layer.cornerRadius = c.largeProfileImage.frame.width / 2

Upvotes: 3

Anjan Biswas
Anjan Biswas

Reputation: 7912

The three lines below is necessary to get a round image-

image.layer.cornerRadius = image.frame.width / 2
image.layer.masksToBounds = false
image.clipsToBounds = true

You might see a rounded UIImage but you may also notice the image squared inside of the circle and to solve that you may have play around with the contentMode. Most of the time .scaleAspectFill does the job.

Upvotes: 0

Mohammad Sadiq
Mohammad Sadiq

Reputation: 5241

For proper animation change the sequence like this. 

    self.profileImageContainerCenterY?.constant = -(c.profileImageContainer.frame.height) * 2
    self.profileSettingsContainerCenterY?.constant = 0
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseOut, animations: {
    c.profileSettingsContainer.alpha = 1
    c.largeProfileImage.alpha = 1
    self.view.layoutIfNeeded()
}, completion: nil)

Upvotes: 0

Related Questions