How to create UIBarButtonItem with UIImageView and UILabel

Question

As shown above, I want to create an UIBarButtonItem with UIImageView and UILabel on a toolbar. I tried

UIButton *likecommButton = [UIButton buttonWithType:UIButtonTypeCustom];
    likecommButton.backgroundColor = [UIColor clearColor];
    [likecommButton addTarget:self action:@selector(likecommButtonClicked:) forControlEvents:UIControlEventTouchDown];


    UIImageView *likeImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"like.png"]];
    likeImageView.frame = CGRectMake(0.0, 0.0, LikeCommentImageEdge, LikeCommentImageEdge);
    likeImageView.backgroundColor = [UIColor clearColor];
    [likecommButton addSubview:likeImageView];
    [likeImageView release];

    CGSize numberSize = [@"99" sizeWithFont:[UIFont fontWithName:@"Verdana-Bold" size:12] 
                                     constrainedToSize:CGSizeMake(20.0, 20.0)  
                                         lineBreakMode:UILineBreakModeTailTruncation];

    _likeNumberLabel = [[UILabel alloc] initWithFrame: CGRectMake(likeImageView.frame.size.width, 0.0, numberSize.width, numberSize.width)];
    _likeNumberLabel.backgroundColor = [UIColor clearColor];
    _likeNumberLabel.textColor = [UIColor whiteColor];
    _likeNumberLabel.font = [UIFont fontWithName:@"Verdana-Bold" size:12];
    _likeNumberLabel.textAlignment = UITextAlignmentRight;
    _likeNumberLabel.lineBreakMode = UILineBreakModeClip;
    [likecommButton addSubview:_likeNumberLabel];

    UIImageView *commentImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"comment.png"]];
    commentImageView.frame = CGRectMake(_likeNumberLabel.frame.origin.x + _likeNumberLabel.frame.size.width, 0.0, LikeCommentImageEdge, LikeCommentImageEdge);
    commentImageView.backgroundColor = [UIColor clearColor];
    [likecommButton addSubview:commentImageView];
    [commentImageView release];

    _commentNumberLabel = [[UILabel alloc] initWithFrame: CGRectMake(toolBarButtonWidth - numberSize.width, 0.0, numberSize.width, numberSize.width)];
    _commentNumberLabel.backgroundColor = [UIColor clearColor];
    _commentNumberLabel.textColor = [UIColor whiteColor];
    _commentNumberLabel.font = [UIFont fontWithName:@"Verdana-Bold" size:12];
    _commentNumberLabel.textAlignment = UITextAlignmentRight;
    _commentNumberLabel.lineBreakMode = UILineBreakModeClip;
    [likecommButton addSubview:_commentNumberLabel];

    likecommButton.frame = CGRectMake(0.0, 0.0, toolBarButtonWidth, numberSize.height);

    _likeCommCountButton = [[UIBarButtonItem alloc] initWithCustomView:likecommButton];
    _likeCommCountButton.width = toolBarButtonWidth;
    _likeCommCountButton.enabled = NO;

but can only got this

How to create UIBarButtonItem like the first image shows, include UIImageView and UILabel also have UIBarButtonItemStyleBordered style?

thanks

---

Update 20120506

This is a follow @R.A 's idea -- small toolbar

the problem of this I know how to set frame to toolbar but can't get the other two UIBarButtonItems "Like" and "Comment" height. then I can't set the small toolbar's height.

Then I tried to add all controllers, two imageview and two labels, into an UISegmentControl

As you see, the third uibarbuttonitem (the UISegmentControl one) is not like the other two. I set

segmentControl.tintColor = [UIColor clearColor]; 
    segmentControl.backgroundColor = [UIColor clearColor]; 

Not work.

I prefer @R.A 's one, but need a way to get the other two UIBarButtonItem's height to set for the third small toolbar's height.

---

Update 20120509

It took me too much time on it, I have to move on, I am now using UISegmentControl solution (which style is little different). I won't close this question. I will keep on study on it in the future. Many thanks for friends' help below, especially @R.A @vishiphone you guys gave me different thinking. Hope we can still stick together to dig out more question. I will continue this topic later. Hope you guys are still here! Thank you very much!

Answer 1

Try these ones as normal/highlight images for UIButton - as a customView for UIBarButtonItem

(with stretchable width)

1. BarButtonPressed;
2. BarButtonPressed@2x
3. BarButtonNormal
4. BarButtonNormal@2x

Answer 2

I got exactly, What they are doing.

In that image, they have created a UIToolBar with a small size and added three UIBarButtonItem's in that toolbar with 2 images and 1 label name respectively.

After that, adding that UIToolBar as a subView (or) customView of BarButtonItem with Bordered style.

But the trick is while adding those three buttons in that UIToolbar they are not having any border style for that Barbuttons(UIBarButtonStyleNone -> Like this But Not exactly).

So only it looks like it is having 2 images and a one label. Already i have did something like this. But not this much tricky..

Answer 3

Try this lines of code I think this will be helpful for you.

UIView *BtnView = [[UIView alloc] initWithFrame:CGRectMake(0,0,70,35)];
UIButton *myButton = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
[myButton setFrame:CGRectMake(0,3,70,32)];
[myButton setImage:[UIImage imageNamed:@"firstImage.png"] forState:UIControlStateNormal];
[myButton addTarget:self action:@selector(compete) forControlEvents:UIControlEventTouchUpInside];



UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(52, -4, 21, 21)];
[imageView setImage:[UIImage imageNamed:@"Secongimage.png"]];
UILabel *badge_Label=[[UILabel alloc]initWithFrame:CGRectMake(5,3, 15, 15)];
badge_Label.backgroundColor=[UIColor clearColor];
badge_Label.font=[UIFont systemFontOfSize:12];
[badge_Label setText:@"20"];
[imageView addSubview:badge_Label];


[BtnView addSubview:myButton];
[BtnView addSubview:imageView];
[myButton release];

UIBarButtonItem *CompeteButton = [[UIBarButtonItem alloc]initWithCustomView:BtnView]; 

self.navigationItem.rightBarButtonItem = CompeteButton;


UIView *leftBtnView = [[UIView alloc] initWithFrame:CGRectMake(0,0,40,40)];
UIButton *menu_Button = [[UIButton buttonWithType:UIButtonTypeCustom] retain];
[menu_Button setFrame:CGRectMake(0,3,37,37)];
[menu_Button setImage:[UIImage imageNamed:@"menubut.png"] forState:UIControlStateNormal];
[menu_Button addTarget:self action:@selector(list) forControlEvents:UIControlEventTouchUpInside];

[leftBtnView addSubview:menu_Button];

UIBarButtonItem *menuButton = [[UIBarButtonItem alloc]initWithCustomView:leftBtnView]; 
self.navigationItem.leftBarButtonItem = menuButton;

Answer 4

I think you missed setting frame for each subview.Try to add with Frames then you will get as you want.

Answer 5

You should create a UIView which will be the wrapper for the UILabel and the UiImageView, add them as subviews of this UiView, then use like above :

_likeCommCountButton = [[UIBarButtonItem alloc] initWithCustomView:_wrapper_view_];

And don't forget to correctly set the subviews' frames.