How can I addSubview to UIButton in Interface Builder

Question

Like I said, I add a UIButton in Interface Builder, I want add a UILabel、UIImageView as the button's subviews, but I can't add any object on it in IB. IS anybody know how to do this? Thank you very much.

I can use code to achieve that, but I want achieve it in IB, so I can use it in any class I want.

Solution 1

I have done this before by adding a UIView (instead of the UIButton) then add the UIButton and UILabel to the UIView. The tap from the UIButton still works and you have a label too. You can also add anything else like this.

Solution 2

I normally achieve this by

1. Create a new UIView in Interface Builder and set it to be the same size and location that you want your button to have
2. Add your subviews to that UIView
3. Set the UIView's class to UIButton in the Indentity Inspector

Your UIView now works exactly like a UIButton

Solution 3

instead of UIButton, add the UILabel and UIImageView to UIView and then add a tap action to it.

EDIT 1:

it's easy to change make a highlighted color effect, use the following code:

- (void) onViewTap:(id)sender
{
    [UIView animateWithDuration:0.1
                          delay:0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         _view.backgroundColor = [UIColor blueColor];
                     }

                     completion:^(BOOL finished){
                         _view.backgroundColor = [UIColor whiteColor];
                     }];

    //write tap actions below
}
- (void)viewDidLoad
{
    _view.userInteractionEnabled = YES;
    UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onViewTap:)];
    [_view addGestureRecognizer:tap];
}

Comments

[Admin]

Thanks Mhdali,that's a good idea,I've tried that before,and found I can't let the UIView looks like the status of the UIButton does,like when I touchdown the UIButton,the UIButton show highlighted color...And I really want to use the property of the UIButton.

[Admin]

sorry man,can't do that,thanks all the same. I created a new .xib file, in this IB,I only created a UIButton,like I said,I want put a UILabel and a UIImageView as the UIButton's subview. Mhdali and Fogmeister help me deal with this problem.

[Chris Conover]

This approach didn't work for me - IB would still not let me nest labels. (FWIW)

[Chris Conover]

This seems the simplest, it requires no code and does not affect layout, save the extra framing view. The custom button approach did not work for me.

[Colas]

Didn't work here. The action linked to the UIButton never get called.

[RedRoses]

But then the button does not show the highlighted state. When user clicks on it, it doesn't look like it's a button because it doesn't get highlighted. Is there a way to maintain that highlight? Or create it somehow?

[Gordon Dove]

Excellent, this is the winner. Can be enabled/disabled as usual like a regular button, and is IB only. I'm guessing that Colas didn't enable UserInteraction.

[Nick T]

There is a side effect of doing this. The element in the storyboard file stays as a <view> ... </view> but with a CustomClass="UIButton". This means that ctrl click - drag doesn't allow creation of segues in Interface Builder. I verified this by changing the <view> tag to <button> and Segues can be made, but then the subviews aren't visible.

[Nick T]

So I just added a button that is the same size as the UIView. All works fine. See the top answer

[Nick T]

Another advantage of this approach is you can still connect segues to it, and it's all in interface builder.

[Kal]

This didn't work for me either (I was a bit premature with my upvote). I was sure to check 'User Interaction Enabled' for the UIView, and uncheck it for the subviews, but it still wouldn't call the linked action. I had more luck with Fogmeister's solution.