How to override -drawrect in UIButton subclass?

Question

HI. I need to write some text over a custom button. So I subclassed UIButton. In -drawrect, I write the text I need. The problem is that the text ends up under the button. After I write my text, UIButton's drawrect goes ahead and draws on top of me.

I am not even calling [super drawrect: rect] even though I was anticipating calling it before I did my drawing. It seems that UIButton's drawrect will get called regardless.

Any ideas? Thanks.

Answer 1

You don't need to subclass UIButton just to add some text to it. Here's an example of setting the button title for a custom button within the -viewDidLoad method of a UIViewController subclass:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 44, 44);
[button setTitle:@"x" forState:UIControlStateNormal];
[self.view addSubview:button];

You can also set the font property of your button or change the color using -setTitleColor:forState:.

Answer 2

How about adding a subview over the button's view? Then you'd have full control over it and not care what the button did. You could probably even make it a Label and save yourself the drawRect.

Answer 3

As other people have said, you don't need to subclass UIButton - infact it's best not to as UIButton is pretty complex (as you found). You have three options:

• Leave the button's title blank and add a new text field to the button at the position you want.
• if you are using 3.0 access the button's label property. Although the label itself is read only its properties (including frame) are not.
• Sub-class UIControl. UIControl is a UIView so you can add other views - text and images and it is UIView that implements the action message behaviour (addTarget:action:forControlEvents:). UIButton implements statefulness on top of this.

If you don't need things like UIButton's setTitle:forState: and associated functionality but you are using a lot of these controls I would use the third option. Otherwise use the first (or second if you are on 3.0).

Answer 4

Based on your comment on one of the other answers, this is a case of asking "How do I do X with Y to achieve Z?" when you really should be asking "How do I achieve Z?"

If you want a button to draw text on top of an image instead of next to it, simply make the image the button's background image. Use setBackgroundImage:forState:, rather than setImage:forState:, then set the title normally.

In any case, you're either going to have to draw the image in drawRect:, or move the text into a subview so it'll draw above the image. The solution I mentioned is a version of the second option.