Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

iOS

Yuchen Yang
Yuchen Yang
2,464 Points

button (image and title) in iOS

How do people create a button that includes an image and a title below that image? I can foresee two solutions: 1) create title and image separately in button and manually position them. 2) create a "mother" image which is the combination of the image and the title externally and use that "mother" image as the button image.

If there is a better way, what is it? If not, which one of the above is preferred?

2 Answers

Michael Liendo
Michael Liendo
15,326 Points

You're right, it is easier in the storyboard. I hate to give a copout answer, but it really does just depend on what you want to do. If it's easier to hop into Sketch or Photoshop and create an image that contains what you want your button to look like and the text you want to display, then that's fine, simply do that and when you add the button from the storyboard, make sure you drag your photo into your project and select the name of your photo in the attributes inspector in the storyboard. Otherwise, simply dragging a button onto the screen, and positioning a label underneath that would work as well. There's no wrong or right way to layout your app, it's up to you. There's pro's and con's to both. If this helped out, as always, uproots are appreciated, but feel free to ask any other question you may have :)

Michael Liendo
Michael Liendo
15,326 Points

It'd help if you were to include which type of button you were trying to create (tab bar button, general button, bar button item, etc as well as if you're trying to create it programmatically or in the storyboard. So for this answer, I'll just assume the easiest route of creating a general button in the storyboard:

It actually depends on how you would like your app to look and be maintained. Your first approach is the best for a simple app: a button with 2 labels would work just fine. That way if you have control of how the text is displayed and positioned if the app is rotated or put on a different device. The second option also works, the difference is that you're essentially creating 1 image and that image (and text) is going to look the same no matter the device.

do you have a screenshot or example that you were trying to accomplish? Sorry there's no straightforward answer, but it's all up to you :)

Yuchen Yang
Yuchen Yang
2,464 Points

Hey Michael, I want to create a general button, and the button would be similar to a tab bar button in terms of lay-out (image on top, title at the bottom). What's the best way to do it in the storyboard? I assume it is easier to construct the button in storyboard than create it programmatically?