UINavigationBar title like Music app

Go To StackoverFlow.com


I'm trying to create a title in a UINavigationBar that acts like the title in the Music app. That is, it has three lines and a line will scroll if it is too long. The following code has a couple of problems. 1) If a line is too long, it will break to the next line. So if line 2 is too long, it overflows into line 3 and the third line isn't shown at all. Also, there's no way to change the line height and this doesn't fit within a UINavigationBar.

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 480, 44)];
label.backgroundColor = [UIColor clearColor];
label.numberOfLines = 3;
label.font = [UIFont boldSystemFontOfSize: 12.0f];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
label.textAlignment = UITextAlignmentLeft;
label.textColor = [UIColor whiteColor];
NSString *songData;
songData = [[songList objectAtIndex:currentIndex] artistName];
songData = [songData stringByAppendingString:@"\n"];
songData = [songData stringByAppendingString: [[songList objectAtIndex:currentIndex] songName]];
songData = [songData stringByAppendingString:@"\n"];
songData = [songData stringByAppendingString: [[songList objectAtIndex:currentIndex] albumName]];
label.text = songData;
self.navigationItem.titleView = label;
2012-04-04 17:47
by Josh Betz


Have you tried MarqueeLabel ? It's very nice :)

MarqueeLabel is a UILabel subclass adds a scrolling marquee effect when the text of the label outgrows the available width. The label scrolling direction and speed/rate can be specified as well. All standard UILabel properties (where it makes sense) are available in MarqueeLabel and it behaves just like a UILabel.

2012-09-03 07:07
by Hlung


You can create your own ticker view for the same with the help of time. Please refer below source code for the same. it move text from one direction to another.



2012-04-04 17:50
by Mangesh


I am trying to do something similar and while Mangesh's answer addresses half of the problem (scrolling), I will try to help with the other half. In order to fit more than one label, you can create a new view and fill it with multiple labels to prevent the issue of lines running on to each other. There are a lot of posts and tutorials that make the customization of a the navigation bar far more complicated than it needs to be if you are simply adding something to the titleView. This is what I did:

  1. Create new view controller with a xib.
  2. Delete the default view given in IB and replace it with another view. Set its size with the size inspector. 128 x 33 is what a titleView will work. You will more than likely want to set the view's background to clear color.
  3. Drag some labels into it (3 if you want it to look like the iOS Music app) and size/color them accordingly.
  4. Set your new view as the File Owner's view.
  5. Create any IBOutlets you need for your new label and also attach them to the File Owner in IB.
  6. In viewDidLoad of the view controller that you want the navigation controller to work with, initialize your custom view controller and set its view as the navigationItem's titleView:

    TitleViewController *customTitleVC = [[TitleViewController alloc] initWithNibName:nil bundle:nil]; self.navigationItem.titleView = customTitleVC.view;

If you use Mangesh's links, you will want to incorporate the scroll view and include that in your custom view controller with the libraries he has linked. The method I have given is confirmed to work on iOS 4.3 - 5.1. Hope that helps somebody.

2012-05-23 18:34
by Squatch