Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@nazywamsiepawel
Last active July 20, 2023 11:58
Show Gist options
  • Star 44 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save nazywamsiepawel/0166e8a71d74e96c7898 to your computer and use it in GitHub Desktop.
Save nazywamsiepawel/0166e8a71d74e96c7898 to your computer and use it in GitHub Desktop.
UINavigationBar with subtitle / swift
func setTitle(title:String, subtitle:String) -> UIView {
let titleLabel = UILabel(frame: CGRect(x:0, y:-5, width:0, height:0))
titleLabel.backgroundColor = UIColor.clear
titleLabel.textColor = UIColor.gray
titleLabel.font = UIFont.boldSystemFont(ofSize: 17)
titleLabel.text = title
titleLabel.sizeToFit()
let subtitleLabel = UILabel(frame: CGRect(x:0, y:18, width:0, height:0))
subtitleLabel.backgroundColor = UIColor.clear
subtitleLabel.textColor = UIColor.black
subtitleLabel.font = UIFont.systemFont(ofSize: 12)
subtitleLabel.text = subtitle
subtitleLabel.sizeToFit()
let titleView = UIView(frame: CGRect(x:0, y:0, width:max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), height:30))
titleView.addSubview(titleLabel)
titleView.addSubview(subtitleLabel)
let widthDiff = subtitleLabel.frame.size.width - titleLabel.frame.size.width
if widthDiff > 0 {
var frame = titleLabel.frame
frame.origin.x = widthDiff / 2
titleLabel.frame = frame.integral
} else {
var frame = subtitleLabel.frame
frame.origin.x = abs(widthDiff) / 2
titleLabel.frame = frame.integral
}
return titleView
}
// Use :
self.navigationItem.titleView = setTitle("title", "subtitle")
// Source : http://stackoverflow.com/questions/12914004/uinavigationbar-titleview-with-subtitle
@craigpearce5
Copy link

This is quite nice, thanks very much. Ok if I use it in my project?

@nazywamsiepawel
Copy link
Author

@craigpearce5 no problem

@fonov
Copy link

fonov commented Feb 18, 2016

Thank, bro

@davidlondono
Copy link

I'll use it too :D i like it

@shaandsingh
Copy link

Nice, but you want to change last line in the widthDiff else statement to subtitleLabel.frame instead of titleLabel.frame

@nazywamsiepawel
Copy link
Author

Updated to Swift 3

@ChenCodes
Copy link

Thanks for updating! Just saw this post haha

@odonckers
Copy link

odonckers commented Feb 20, 2017

I updated your code to allow for a more customizable title, hope you don't mind. This also fixes a glitch that overlaps the title ontop of the subtitle.

func setTitle(title: String, titleColor: UIColor, titleSize: Int, subtitle: String, subtitleColor: UIColor, subtitleSize: Int) -> UIView {
   let titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: -5, height: 0))

   titleLabel.backgroundColor = UIColor.clear
   titleLabel.textColor = titleColor
   titleLabel.font = UIFont.boldSystemFont(ofSize: CGFloat(titleSize))
   titleLabel.text = title
   titleLabel.sizeToFit()
   
   let subtitleLabel = UILabel(frame: CGRect(x: 0, y: 18, width: 0, height: 0))
   subtitleLabel.backgroundColor = UIColor.clear
   subtitleLabel.textColor = subtitleColor
   subtitleLabel.font = UIFont.systemFont(ofSize: CGFloat(subtitleSize))
   subtitleLabel.text = subtitle
   subtitleLabel.sizeToFit()
   
   let titleView = UIView(frame: CGRect(x: 0, y: 0, width: max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), height: 30))
   titleView.addSubview(titleLabel)
   titleView.addSubview(subtitleLabel)

   let widthDiff = subtitleLabel.frame.size.width - titleLabel.frame.size.width
   
   if widthDiff > 0 {
       var frame = titleLabel.frame
       frame.origin.x = widthDiff / 2
       titleLabel.frame = frame.integral
   } else {
       var frame = titleLabel.frame
       frame.origin.x = abs(widthDiff) / 2
       titleLabel.frame = frame.integral
   }

   return titleView
}

How to Use: self.navigationItem.titleView = setTitle(title: "title", titleColor: UIColor.black, titleSize: 17, subtitle: "subtitle", subtitleColor: UIColor.gray, subtitleSize: 12)

@dexcell
Copy link

dexcell commented Feb 23, 2017

On line 32 should be subtitleLabel not titleLabel

@yarodevuci
Copy link

my subtitle is shifted to the left ...

@kelvinmedeiros
Copy link

kelvinmedeiros commented Apr 10, 2017

I did some modifications in case of the title or sub be too large and if there is some item on the right side of the navigation bar.

    static func setTitle(title:String, subtitle:String, view: UIView) -> UIView {
        let titleLabel = UILabel(frame: CGRect(x:0, y:-5, width: view.frame.width - 100, height: 20))
        titleLabel.backgroundColor = UIColor.clear
        titleLabel.textColor = UIColor.black
        titleLabel.font = UIFont.boldSystemFont(ofSize: 17)
        titleLabel.text = title
        titleLabel.adjustsFontSizeToFitWidth = false
        titleLabel.lineBreakMode = .byTruncatingTail
        titleLabel.textAlignment = .center
    
        let subtitleLabel = UILabel(frame: CGRect(x:0, y:18, width: view.frame.width - 100, height: 10))
        subtitleLabel.backgroundColor = UIColor.clear
        subtitleLabel.textColor = UIColor.gray
        subtitleLabel.font = UIFont.systemFont(ofSize: 11)
        subtitleLabel.text = subtitle
        subtitleLabel.adjustsFontSizeToFitWidth = false
        subtitleLabel.lineBreakMode = .byTruncatingTail
        subtitleLabel.textAlignment = .center
    
        let titleView = UIView(frame: CGRect(x:0, y:0, width: view.frame.width - 30, height:30))
        titleView.addSubview(titleLabel)
        titleView.addSubview(subtitleLabel)
    
        return titleView
    }

@akhjain6
Copy link

thx, it solved my issue

@KC-218
Copy link

KC-218 commented Jun 21, 2017

Hello, sorry, I'm beginner for swift, I practice this example using your code and have a question.
The two label are overlapping.
I use in navigationcontroller embed tabbarcontroller
what do I miss to think?
Thanks.

switch selectedIndex {
case 0:
self.navigationItem.titleView = setTitle(title: "title123456789", subtitle: "subtitle123456789")
break
case 1:
self.navigationItem.titleView = setTitle(title: "title20987654321", subtitle: "subtitle2")
break
default:
break
}
https://drive.google.com/open?id=0B_IjPmM4mwbRTEFCd3JIbDZBTTA

https://drive.google.com/open?id=0B_IjPmM4mwbRWXFJNjJmaVdIS0E

@grafikri
Copy link

grafikri commented Apr 4, 2018

Thanks

@poojakaluskar
Copy link

Thank you for writing this. It really helped me.

@dadixon
Copy link

dadixon commented Sep 28, 2018

This works great! One question is how can this go under the left bar button instead of beside it?

@X901
Copy link

X901 commented Jan 12, 2019

I joined @odonckers and @blinkelvin code together

 func setTitle(title: String, titleColor: UIColor, titleSize: Int, subtitle: String, subtitleColor: UIColor, subtitleSize: Int , view: UIView) -> UIView {
    let titleLabel = UILabel(frame: CGRect(x:0, y:-5, width: view.frame.width - 100, height: 20))

    titleLabel.backgroundColor = UIColor.clear
    titleLabel.textColor = titleColor
    titleLabel.adjustsFontSizeToFitWidth = false
    titleLabel.font = UIFont.boldSystemFont(ofSize: CGFloat(titleSize))
    titleLabel.lineBreakMode = .byTruncatingTail
    titleLabel.textAlignment = .center
    titleLabel.text = title
    
    let subtitleLabel = UILabel(frame: CGRect(x:0, y:18, width: view.frame.width - 100, height: 10))
    subtitleLabel.backgroundColor = UIColor.clear
    subtitleLabel.textColor = subtitleColor
    subtitleLabel.adjustsFontSizeToFitWidth = false
    subtitleLabel.lineBreakMode = .byTruncatingTail
    subtitleLabel.textAlignment = .center
    subtitleLabel.font = UIFont.systemFont(ofSize: CGFloat(subtitleSize))
    subtitleLabel.text = subtitle
    
    let titleView = UIView(frame: CGRect(x:0, y:0, width: view.frame.width - 30, height:30))
    titleView.addSubview(titleLabel)
    titleView.addSubview(subtitleLabel)

    return titleView
}

here is an example of how to use it

 self.navigationItem.titleView = setTitle(title: "TITLE", titleColor: UIColor.black, titleSize: 16, subtitle: "SUBTITle", subtitleColor: UIColor.gray, subtitleSize: 12, view: self.view)

I notice it looks very good with Regular NavigationBar
but with Large NavigationBar it stays on the same size

it needs to improve with Large Navigation bar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment