I finally figured out auto layout for buttons after watching a 10 minute tutorial

I kept struggling with buttons that would break when the text was too long. A friend at a meetup in Austin told me to set padding with auto layout using fixed numbers, not hug contents. I tried it on a nav bar last Tuesday and it worked perfect for the first time. Now I use resizing set to "fill container" and it saves me like 30 minutes per project. Has anyone else had trouble with buttons that mess up on mobile screens?

2 comments

2 Comments

grant_torres5d ago

Totally feel you on this one. I wasted like three whole days on a login screen last month because my buttons kept clipping the text on smaller phones. Finally just gave each button a fixed height of 48 points and used auto layout with 16 points of padding on each side, and it's been solid ever since.

kai7795d ago

Stick with the fixed height approach, it's a lifesaver. I do the same thing but I add a bit of extra top padding inside the button itself, not just on the sides. That way when a user has bigger accessibility text turned on the text doesn't jam up against the top edge. Saved me from having to redo a whole sign up flow once. Also if you use stack views for the buttons it's way easier to keep the spacing consistent across different screen sizes.