How to resize the image and text of button based on screen size(autolayout)

Question

Suppose I have multiple button aligned vertically as well as horizontally, as shown in the screenshot. There would be three row at equal distance. In first and third row, there would be two buttons with equal height and width and in second row there would be button aligned horizontally. I have set the buttons image and text in storyboard. Control Alignment are set to Horizontal | vertical.Constraints for Button(View Transactions) are: top space, bottom space equals to:8(New Launches Button) leading and trailing space equals to:8(superview) and 8(Place Request Button) respectively, and equal width and height for all buttons . What I can think from the result is that, the space between the button's image and text isn't adjusting according to the screen. Only the button's height and width getting adjusted. I want the button's font should be shrink with screen size, so that button's image ll render properly. iOS 8, 9 is the target version for my project. I have checked by minimizing font size, but still the image size aren't changing.

Answer 1

I do this type of thing using plain UIViews to create groups. It is easier to break down the sizing problem into chunks. For you example, I would use 4 UIViews spanning the width of the screen and having a proportional height to the screen (controller's view containing them).

Within each of these views you can place yet more UIViews to contain your pairs of image/text boxes. Align them to the top and bottom of their parent views, make them 1:1 aspect ratio and left and right aligned respectively. (you could also use proportional widths if you don't want the while rectangles to be squares, but you'll need square UIViews to manage your images at some point.

Within each box (square UIViews), place your label at the bottom with left, right and bottom alignment to the containing UIView (leave height unspecified to allow automatic size to work). The images should be 1:1 aspect ratio, centred horizontally in container and top/bottom to the containing view and text.

There are probably more relative size concerns in your requirements but I think you get the general idea: UIViews within UIViews within UIViews make relative sizing (proportional/aspect ratio/center) much easier than working with fixed edge alignment distances.

Answer 2

Finally, I made it working somehow though its not the real solution but it can be a workaround. As I said in the question that the problem is the space between the button's image and title. So what I did is selected the button,and in Attribute Inspector set the left=0 and right=0 for the edge-title and control alignment vertical|horizontal and my view looks fine after that without any Scroll View.