Use imageView as title for Navigation Bar with preferLargeTitles

Question

I would like to use a custom icon with text as the title for a Navigation Bar with preferLargeTitles enabled. The custom title needs to be large and left centered at first then resize when scrolling. This is what it should look like: Large Navigation Bar w/ Title that contains icon and text

I have tried using an image with the icon and text together so I could create one imageViewand set the titleView to that, however that results in a small centered view that overlays the large Navigation Bar.

How should I go about doing this? I want the custom title to behave just like the default large navigation bar and resize and center the image when scrolling up. Thanks!

score 1 · Answer 1 · answered Jun 05 '18 at 07:35

1

Try this

    // Create a navView to add to the navigation bar
    let navView = UIView()

    // Create the label
    let label = UILabel()
    label.text = "Assignment"
    label.font = UIFont.systemFont(ofSize: 30.0, weight: .bold)
    label.sizeToFit()
    label.center = navView.center
    label.textAlignment = NSTextAlignment.center

    // Create the image view
    let image = UIImageView()
    image.image = UIImage(named: "logo.png")
    let imageAspect = image.image!.size.width/image.image!.size.height
    image.frame = CGRect(x: label.frame.origin.x-label.frame.size.height*imageAspect - 5, y: label.frame.origin.y, width: label.frame.size.height*imageAspect, height: label.frame.size.height)
    image.contentMode = UIViewContentMode.scaleAspectFit

    // Add both the label and image view to the navView
    navView.addSubview(label)
    navView.addSubview(image)

    // Set the navigation bar's navigation item's titleView to the navView
    self.navigationItem.titleView = navView
    self.navigationController?.navigationBar.prefersLargeTitles = true

Output:

answered Jun 05 '18 at 07:35

Arnab

4,216
2
28
50

I would like for the icon and "Assignment" to be in the same place as the "Root View Controller." Is that possible with the titleView? The documentation said that it places the content in the center of the navbar. I want the content to be left centered and large at first then centered and smaller when the user scrolls. – Emre Cakir Jun 05 '18 at 07:41
Then you can use `titleView` for both of the texts inspite of using navigationbar title – Arnab Jun 05 '18 at 07:45
And for scrolling effect, you can see [this](https://stackoverflow.com/questions/46703469/shrink-large-title-when-scrolling-not-uitableviewcontroller-ios-11#47992021) answer – Arnab Jun 05 '18 at 07:49
Sorry if I was confusing, but I only want one of the texts. I don't want for the Root View Controller title to be there. However, even if I remove that title, the `titleView` does not behave the same way the original title does (ie. left aligned and larger) – Emre Cakir Jun 05 '18 at 07:51
I don't think Apple wants you to do that. Navigation bars have a pretty specific purpose that often involves having something else in the top left corner like a Back button. One solution would be using a bar button item instead of title view. – Arnab Jun 05 '18 at 08:31

Use imageView as title for Navigation Bar with preferLargeTitles

1 Answers1