iosbuttonscalable

Design iOS button scalable


I'm learning iOS development. In my current example application I created a button in main storyboard. It is centered with text "My Button One" with blue background. The height and width is set by default. Width of a button matches the text width. How do I add some spacing around the text (between text and the edges)? Also, when I run it on bigger device simulator such as iphone 6, 6 plus, 8, 8 plus or ipad pro, it doesn't get bigger? How do I achieve that? I would appreciate any documentation or blog link which explains such a scenario or how to.


Solution

  • This is all about Constraints. In terms of making it bigger/smaller on devices you need to tie the edges of the button to the edges of the view: click on the icon that looks like a Tie-Fighter underneath the Storyboard work area.

    To get spacing between text and the button edge, use Content Inset - that's on the Size Inspector panel (the one on the right that has an icon that looks like a vertical ruler. Really, you should read up on Auto Layout and Size Constraints as building UIs will require good knowledge of this material.