I'm trying to align two to three buttons horizontally in a view. For simplicity, I'll show my attempt of aligning two buttons.

This works for buttons that have a short title:

@"H:|-10-[questionButton1(questionButton2)]-5-[questionButton2]-10-|"

enter image description here

But as soon as one of the buttons gets a bit longer title, it breaks like this: enter image description here

What I ended up doing is calculating width of each button and then if button1 width is greater than half of the view and greater than button2 width, I've used:

@"H:|-10-[questionButton1(==btn1width)]-5-[questionButton2(>=btn2width)]-10-|"

It kind of works but I don't really like the look of my code with this kind of calculations. Just imagine complexity it adds with the third button. Also, there is a problem if both buttons have pretty long title in which case I would have to figure out if I should reduce the font size to make everything fit.

I'm posting this here because I might be missing some magical thing regarding autolayout since I only started using it in code today. Any kind of help would be greatly appreciated.

--- UPDATE (clarification) ---

I want the buttons to split evenly considering the margins (10 on the outside and 5 between buttons). Ideally they should be the same width if the text size would fit their default size (50%:50% for two buttons and 33%:33%:33% for three buttons). In case the button title exceeds that perfect width, the button should extend its width if it is allowed by other buttons (if others can shrink). If there is no extension or shrinking possible, the big button should reduce font size and repeat the procedure (check if other buttons can shrink). Yeah, I know, I'm asking for a lot :)

how it looks when it works

Related posts

Recent Viewed