How to resize/fix constraints for circle on XR phone

Question

My picture for user profile looks fine (a circle) on older versions, but it looks like an oval on my friend's XR phone. I am not sure why. Below are pics of the storyboard constraints and my code for the constraints.

Oval Shaped Profile Pic Storyboard constraints

@IBOutlet weak var profileButton: UIButton!var profile: Profile?
var imagePicker: UIImagePickerController!
var setImage = false

override func viewDidLoad() {
    super.viewDidLoad()
    profileButton.layer.cornerRadius = 0.5 * profileButton.bounds.size.width
    profileButton.clipsToBounds = true

    ProfileService.show { [weak self] (profile) in
        self?.profile = profile

        //display profile image and remove ninja default image
        if let imageURL = URL(string: (profile?.imageURL ?? "")) {
            if self?.setImage == false {
                DispatchQueue.main.async {
                    self?.profileButton.setImage(nil, for: .normal)
                    self?.profileButton.kf.setBackgroundImage(with: imageURL, for: .normal)
                    self?.profileButton.layer.borderWidth = 0.5
                    self?.profileButton.layer.borderColor = UIColor.lightGray.cgColor
                }
            }
        }else{
            let image = UIImage(named: "ninja")
            self?.profileButton.setImage(image, for: .normal)
        }...
    }
}

By the way, `profileButton.bounds` is not reliable during `viewDidLoad`. Often you’d set the corner radius in `viewDidLayoutSubviews` (or define a `UIButton` subclass that does this for you in its own `layoutSubviews`). — Rob, Apr 02 '19 at 01:24

score 0 · Answer 1 · answered Apr 01 '19 at 23:26

You are giving it conflicting constraints. By setting both the width and the leading and trailing offsets, something has to give when the screen is wider (on the XR). Auto layout is clearly choosing to break the width constraint.

I'd suggest getting rid of the leading and trailing constraints, and center the profile picture in the view.

score 0 · Answer 2 · answered Apr 01 '19 at 23:31

The issue is your leading and trailing constraints. If you want to have the object centered, align it to the center x constraint of the view. Another good habit to get into would be to add a 1:1 aspect ratio constraint to any object you would like to be rendered as a perfect circle.

How to resize/fix constraints for circle on XR phone

2 Answers2