0

Using Autolayout and Interface Builder with the target device being iOS 7 iPhones, how do I create three of these kind of UIButtons that have an image, a divider line and text? The 3 images for each of the buttons all have the same size. The lines and text in one button must line up with the other buttons' line and text (left align the text). Things can't go crazy if the phone is turned to landscape. All buttons are the same constant size.

Example Button

The buttons are part of a home screen layout which has a logo at the top and so on. When one taps one of the buttons, the app does something.

One thought was to create a button with no text, put a label on top, a thin view for the line on top, and the uiimageview on top. Maybe explicit layout constraints are not even needed? Maybe a containing view is needed for the "button" contents to keep the "button" pieces together?

finneycanhelp
  • 9,018
  • 12
  • 53
  • 77
  • Image was obtained from the following site. It is free to use per site instructions: https://openclipart.org/detail/190333/simple-car-icon-by-klaasdc-190333 – finneycanhelp Jul 06 '14 at 21:24

1 Answers1

3

Image+text can be achieved using UIButton only without adding any autolayout constraints. You set both image and text using -setImage:forState and -setTitle:forState:, and then adjust button insets using *Insets properties. To set the insets properly, play with this great test project: https://github.com/jrturton/ButtonInsets (it's not quite clear from the docs how to use them simultaneously, and this test app should give you the idea).

As for the separator, I'd recommend adding it directly to your images.

But if you don't want to stick to the UIButton and its insets, you can subclass UIView, add 2 UIImageViews (the actual image and the separator), a UILabel, and throw in a couple of constraints. To make the view clickable, you attach a UITapGestureRecognizer to it.

kambala
  • 2,341
  • 19
  • 20
  • Thanks! I shall give that a go. I tried the "view containing 2 images, label and a button solution." There are happy and sad consequences with that approach. – finneycanhelp Jul 06 '14 at 19:55
  • It works well doing as you proposed using a UIButton. That cleared up all the issues around it not behaving well when tapping it. The following also helped make it so that the button text would change when tapped (see "UIImageRenderingModeAlwaysOriginal"): http://stackoverflow.com/questions/18133465/setting-uibutton-image-results-in-blue-button-in-ios-7 – finneycanhelp Jul 06 '14 at 21:14
  • After even more thought on this, the easiest thing to do is just have an image created for the whole button. The UIImageRenderingModeAlwaysOriginal mentioned in the earlier comment is still a good thing to do. – finneycanhelp Jul 15 '14 at 02:40