Set Title and Subtitle to Navigation like WhatsApp

Question

private func setTitle(title:String, subtitle:String, animate: Bool) -> 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: 15)
    titleLabel.text = title
    titleLabel.adjustsFontSizeToFitWidth = true

    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.adjustsFontSizeToFitWidth = true


    let titleView = UIView(frame: CGRect(x:0, y:0, width:max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), height:30))
    let titleViewTapGesture = UITapGestureRecognizer(target: self, action: #selector(titleViewTapped(sender:)))
    titleView.addGestureRecognizer(titleViewTapGesture)
    titleView.addSubview(titleLabel)

    if animate{
        subtitleLabel.alpha = 0.0
        titleView.addSubview(subtitleLabel)

        UIView.animate(withDuration: 1) { () -> Void in
            subtitleLabel.alpha = 1.0
        }

    }else{
        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
}

This is how i'm setting title on navigationItem

        self.navigationItem.titleView = setTitle(title: "DEMO NAME TO TEST TITLE", subtitle: "tap here to get info", animate: false)

But it looks like this

How to fix that title with subTitle collapsing ? I don't mind showing "..." (no multiline) on title.

Possible duplicate of [Add subtitle under the title in navigation bar controller in Xcode](https://stackoverflow.com/questions/38626004/add-subtitle-under-the-title-in-navigation-bar-controller-in-xcode) — Itai Spector, Oct 25 '18 at 13:26

Shabir jan · Accepted Answer · 2017-05-23T19:14:02.117

5

You can achieve such functionality by using this :

func setTitle(title:String, subtitle:String) -> UIView {

        let titleLabel = UILabel(frame: CGRect(x: 0, y: -2, 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 = .clear
        subtitleLabel.textColor = .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 {
            let newX = widthDiff / 2
            subtitleLabel.frame.origin.x = abs(newX)
        } else {
            let newX = widthDiff / 2
            titleLabel.frame.origin.x = newX
        }

        return titleView
    }

And call like that :

self.navigationItem.titleView = setTitle(title: "Title Title Title", subtitle: "ello Shabir how are you")

The result is like that :

edited May 23 '17 at 19:14

answered May 23 '17 at 18:55

Shabir jan

2,295
2
23
37

But by this it moves to right. Even the subtitle. Try adding big title – Nitesh May 23 '17 at 19:11
I have used big title and big subtitle and i have attached the screenshot as well, its fine i guess – Shabir jan May 23 '17 at 19:14
I have back button and image too on left. – Nitesh May 23 '17 at 19:16
than its obvious that it will move to right because it doesn't have space or room to adjust on left side – Shabir jan May 23 '17 at 19:18
Can we have subtitle in middle only ? subtitle text is not that big and will remain same. – Nitesh May 23 '17 at 19:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144973/discussion-between-shabir-jan-and-nitesh). – Shabir jan May 23 '17 at 19:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144995/discussion-between-nitesh-and-shabir-jan). – Nitesh May 24 '17 at 08:18

Set Title and Subtitle to Navigation like WhatsApp

1 Answers1