Multiline Navigationbar Title

Multiline Navigationbar Title

Here is a code example of how you can create a multiline navigationBar title

let label: UILabel = UILabel(frame: CGRectMake(0, 0, 400, 50))
label.backgroundColor = UIColor.clearColor()
label.numberOfLines = 2
label.font = UIFont.boldSystemFontOfSize(16.0)
label.textAlignment = .Center
label.textColor = UIColor.whiteColor()
label.text = "This is a\nmultiline string for the navBar"
self.navigationItem.titleView = label

Swift 5.x:

let label = UILabel()
label.backgroundColor = .clear
label.numberOfLines = 2
label.font = UIFont.boldSystemFont(ofSize: 16.0)
label.textAlignment = .center
label.textColor = .white
label.text = "This is a\nmultiline string for the navBar"
self.navigationItem.titleView = label

SwiftUI multiline text in a NavigationView Title

As Asperi has said, it is not possible to have a multiline navbar title by default. So, following Asperi suggestion, I have hidden the default title and I have set a custom Text():

VStack(alignment: .leading) {
                    Text(Constants.Distribution.text)
                    .font(.system(size: 34, weight: .heavy))
                    .foregroundColor(Color.white)
                }

.
.
.

.navigationBarTitle(Text(""), displayMode: .inline)

UINavigationBar multi-line title

Set the titleView property of the UINavigationItem. For example, in the view controller's viewDidLoad method you could do something like:

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 480, 44)];
label.backgroundColor = [UIColor clearColor];
label.numberOfLines = 2;
label.font = [UIFont boldSystemFontOfSize: 14.0f];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.text = @"This is a\nmultiline string";

self.navigationItem.titleView = label;

#if !__has_feature(objc_arc)
[label release];
#endif

It shows up like this:

Remember the titleView property is ignored if leftBarButtonItem is not nil.

Multi-line title in BottomNavigationBarItem

Option 1 : If the text is static you can use new line. Like first line \n second line.
Option 2. The icon can take any widget so you can use a column in the icon and differentiate active and inactive icon using icon and activeIcon and ignore the label.

---

Related Topics