I am trying to match my graphic designer's interface design to be exact in every IOS device. My problem is the images on the buttons are never the right ratio and I am having trouble making sure the buttons autosize correctly. This is a picture of the artist's intent
This is my implementation of the buttons using different views
How do I resolve these autosizing issues to correctly solve this problem? I have watched plenty of tutorials on resizing images, but I haven't seen any that cover images that aren't symmetrical.
If you simply wish to resize those "buttons" (which I assume are actually UIImageViews) depending upon the device, create a relational constraint between the button image and the parent views (in your case, I suppose these should be the black and white UIViews). You can accomplish this by tapping both of the views at the same time and then "Create width/ height constraint".
Then, select the constraint and tap the "Show Utilities Area" (the most top right corner button). You'll have there in the Attributes a Multiplication
property. The default is 1. Keep in mind that if the first element of the relational constraint is the parent view, then the multiplication factor has to be lower than 1 and viceversa.
EG: I suppose your button should always have a 1/6 part of the screen. Then, you should write in the Multiplication
property of your constraint either 1/6
or 0.17
.