Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@craigpearce5 craigpearce5 commented Dec 6, 2015

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

@nazywamsiepawel

This comment has been minimized.

Copy link
Owner Author

@nazywamsiepawel nazywamsiepawel commented Jan 4, 2016

@craigpearce5 no problem

@fonov

This comment has been minimized.

Copy link

@fonov fonov commented Feb 18, 2016

Thank, bro

@davidlondono

This comment has been minimized.

Copy link

@davidlondono davidlondono commented Apr 11, 2016

I'll use it too :D i like it

@shaandsingh

This comment has been minimized.

Copy link

@shaandsingh shaandsingh commented Jul 10, 2016

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

@nazywamsiepawel

This comment has been minimized.

Copy link
Owner Author

@nazywamsiepawel nazywamsiepawel commented Dec 31, 2016

Updated to Swift 3

@ChenCodes

This comment has been minimized.

Copy link

@ChenCodes ChenCodes commented Dec 31, 2016

Thanks for updating! Just saw this post haha

@odonckers

This comment has been minimized.

Copy link

@odonckers 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

This comment has been minimized.

Copy link

@dexcell dexcell commented Feb 23, 2017

On line 32 should be subtitleLabel not titleLabel

@yarodevuci

This comment has been minimized.

Copy link

@yarodevuci yarodevuci commented Mar 7, 2017

my subtitle is shifted to the left ...

@blinkelvin

This comment has been minimized.

Copy link

@blinkelvin blinkelvin 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

This comment has been minimized.

Copy link

@akhjain6 akhjain6 commented Jun 14, 2017

thx, it solved my issue

@Bruce9487

This comment has been minimized.

Copy link

@Bruce9487 Bruce9487 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

This comment has been minimized.

Copy link

@grafikri grafikri commented Apr 4, 2018

Thanks

@poojakaluskar

This comment has been minimized.

Copy link

@poojakaluskar poojakaluskar commented Jun 13, 2018

Thank you for writing this. It really helped me.

@dadixon

This comment has been minimized.

Copy link

@dadixon 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

This comment has been minimized.

Copy link

@X901 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
You can’t perform that action at this time.