CODEWITHSUNDEEP
ios7uibuttonautolayout
finneycanhelp
finneycanhelp

Reputation: 9248

Create iOS 7 UIButton With Text And Image Using Autolayout

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?

Upvotes: 0

Views: 2264

Answers (1)

kambala
kambala

Reputation: 2501

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.

Upvotes: 3

Related Questions