Search code examples
iosxcodeuibuttonautolayoutuistackview

UIButtons squished on landscape and smaller devices

I have built out the UI for my application by nesting horizontal stack views inside of a vertical stack view. On the iPhone 8 Plus, the UIButtons are appearing as designed in both portrait and landscape orientations. Below is a screenshot of landscape orientation on the iPhone 8 Plus simulator.

iPhone 8 Pls landscape

The stack views are employing Fill Alignment with Fill Equally Distribution. The Content Mode for each of the buttons is set to Aspect Fit and when tested on a smaller device, the UIButtons become squished and they lose their aspect ratio. Below is a screenshot of landscape orientation on the iPhone SE simulator.

iPhone SE landscape

How can I prevent the squishing of the images from occurring?

Solution

  • You can set Image programmatically and set the contentMode of button's imageView as center or aspectFit.

    settingsButton.imageView?.contentMode = .center
settingsButton.setImage(UIImage.init(named: "imagename"), for: .normal)

    Or you can change your constraints of your UIButton and give aspect ratio 1:1 for height and width.