Customize Navigation Bar with Title View

Customize navigation bar with title view

This works. Give frame at the time of initialisation

UIView *iv = [[UIView alloc] initWithFrame:CGRectMake(0,0,32,32)];
[iv setBackgroundColor:[UIColor whiteColor]];
self.navigationItem.titleView = iv;

Custom Navigation Title in iOS 12

Creating your custom titleView and assigning it to navigationItem.titleView is what you want. On older systems (pre iOS 11) you just might need to call sizeToFit() on the titleView.

This way you can create this titleView

Swift

override func viewDidLoad() {
    super.viewDidLoad()

    let imageView = UIImageView()
    NSLayoutConstraint.activate([
        imageView.heightAnchor.constraint(equalToConstant: 20),
        imageView.widthAnchor.constraint(equalToConstant: 20)
    ])
    imageView.backgroundColor = .red
    
    let titleLabel = UILabel()
    titleLabel.text = "Custom title"
    
    let hStack = UIStackView(arrangedSubviews: [imageView, titleLabel])
    hStack.spacing = 5
    hStack.alignment = .center
    
    navigationItem.titleView = hStack
}

Obj-C

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIImageView *imageView = [[UIImageView alloc] init];
    [NSLayoutConstraint activateConstraints:@[
        [imageView.heightAnchor constraintEqualToConstant:20],
        [imageView.widthAnchor constraintEqualToConstant:20]
    ]];
    imageView.backgroundColor = [UIColor redColor];

    UILabel *titleLabel = [[UILabel alloc] init];
    titleLabel.text = @"Custom title";

    UIStackView *hStack = [[UIStackView alloc] initWithArrangedSubviews:@[imageView, titleLabel]];
    hStack.spacing = 5;
    hStack.alignment = UIStackViewAlignmentCenter;
    
    self.navigationItem.titleView = hStack;
}

You might also need to have the right set of autolayout constraints or use UIStackView.

setting titleView of custom UINavigationBar

You need to access UINavigationBar's topItem attribute.
Then you can set the topItem's titleView with a UIImageView.

So in your case:

self.navBar.topItem?.titleView = logoImage

Navigation bar with segment control and custom title view

I would assume that the SegmentedControl only looks like its part of the navigation bar due to coloring. My suggestion here is to implement a custom view with a SegmentedControl and put it just at the top of your ViewController while using the same color for the custom view and the NavigationBar.

For the custom title view you can use the titleView property of the UINavigationItem:

self.navigationItem.titleView = view // <-- ´view´ is your custom title view

See this link and look out for "Customize the Title View":

• https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar

Change navigationBar titleView image globally

You need to override the pushViewController function of your custom UINavigationController and assign the imageView to the viewController's titleView like this:

override public func pushViewController(viewController: UIViewController, animated: Bool) {
    super.pushViewController(viewController, animated: animated)

    viewController.navigationItem.titleView = UIImageView(image: UIImage(named: "logo"))
}

iOS: Full width custom titleView of navigation bar flickers during interactive pop gesture of UINavigationController

Eventually I found a solution to this.
The interactive pop gesture starts at viewWillDisappear: and ends at viewWillAppear:.
Step 1: switch on translatesAutoresizingMaskIntoConstraints for navigation title view when interaction starts(i.e. in viewWillDisappear:) so that the width and position of title view remains constant.
Step 2: switch off translatesAutoresizingMaskIntoConstraints for navigation title view when interaction stops(i.e. in viewWillAppear:) so that the existing constraints will work as it is.

---

Related Topics