Xcode Auto Layout Constraints for Button Sizes on Different Devices

The issue being faced in Xcode is related to constraints and button sizes. The problem is that there are two image buttons on the same horizontal axis, which are of the same size on an iPhone. However, when the app is run on an iPad, one button appears bigger than the other in terms of width. The buttons are located in a vertical stack view. Any suggestions to solve the issue would be appreciated and if anyone needs additional information let me know(I'm also on the latest version of Xcode).

Some code and screenshots would be helpful...

One picture is in Xcode and the other is in the simulator and all I'm trying to do is to get both images on each side to be an equal size. (The picture with images having the same size is on a iPhone simulator and the one with one image longer than the other is on an iPad.)

Lastly is , this is all UI and have not done anything when it comes to the coding portion.

Use a CollectionView which will automatically align the cells.

Alternatively:

  • Add width and height constraints to each image so they're a constant size.
  • For each item on the left hand side, add an "Align Center X" constraint and set the constant value to minus the width of your image minus 10.
  • So, if the width is 150, set it to: -150 / 2 = -75 - 10 = -85.
  • This puts the left hand images 10 pixels to the left of the centre of the view.

Do the same for the right hand images, but the constant value should be the positive, i.e. 85.

This will look okay on an iPhone, but for an iPad you might want to use larger images or have something extra to the side of the images.

Xcode Auto Layout Constraints for Button Sizes on Different Devices
 
 
Q