How can we put two line in UIBarButtonItem in Navigation Bar

Question

"Now Playing" is in One line in UIBarButtonItem. I have to put it in two lines, like "Now" is ay top and "Playing" is at bottom.I have written the following line of code:-

UIBarButtonItem *flipButton = [[UIBarButtonItem alloc]

                              initWithTitle:@"Now Playing" 

                              style:UIBarButtonItemStyleBordered 

                              target:self 

                              action:@selector(flipView)];


    self.navigationItem.rightBarButtonItem = flipButton;  

So i want to pu line break in between "Now Playing". So please help me out.

Answer 1

Yes you can. It is fairly simple to do. Create a multiline button and use that. The "trick" is to set the titleLabel numberOfLines property so that it likes multilines.

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
button.titleLabel.numberOfLines = 0;
[button setTitle:NSLocalizedString(@"Now\nPlaying", nil) forState:UIControlStateNormal];
[button sizeToFit];

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

When you specify a button type of custom it expects you to configure everything... selected state, etc. which is not shown here to keep the answer focused to the problem at hand.

Answer 2

- (void)createCustomRightBarButton_
{
    UILabel * addCustomLabel = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 64, 25)] autorelease];
    addCustomLabel.text =@"Now\nPlaying";
    addCustomLabel.textColor = [UIColor whiteColor];
    addCustomLabel.font = [UIFont boldSystemFontOfSize:11];
    addCustomLabel.numberOfLines = 2;
    addCustomLabel.backgroundColor = [UIColor clearColor];
    addCustomLabel.textAlignment = UITextAlignmentCenter;

    CGSize size = addCustomLabel.bounds.size;

    UIGraphicsBeginImageContext(size);      
    CGContextRef context = UIGraphicsGetCurrentContext();       
    [addCustomLabel.layer renderInContext: context];
    CGImageRef imageRef = CGBitmapContextCreateImage(context);
    UIImage * img = [UIImage imageWithCGImage: imageRef];
    CGImageRelease(imageRef);
    CGContextRelease(context);

    self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithImage:img
                                                                           style:UIBarButtonItemStyleBordered 
                                                                          target:self 
                                                                          action:@selector(flipView)]
                                              autorelease];
}

Answer 3

You can host a UIButton as customView inside your bar button (either set the bar button item customView or you can drag one directly on top of your UIBarButtonItem), hook it up as an outlet, then do;

-(void) viewDidLoad
{
  //...
  self.customButton.titleLabel.numberOfLines = 2;
  self.customButton.suggestionsButton.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
  self.customButton.suggestionsButton.titleLabel.textAlignment = UITextAlignmentCenter;
}

which in my case becomes

Answer 4

I create 2 PNG images by myself, and it looks good.

UIImage *img = [UIImage imageNamed:@"nowplaying.png"];
UIBarButtonItem *nowPlayingButtonItem = [[[UIBarButtonItem alloc] initWithImage:img style:UIBarButtonItemStyleBordered target:delegate action:@selector(presentNowPlayingMovie)] autorelease];