UINavigationBar TitleView with subtitle

Question

I want a titleView inside my UINavigationBar which has two lines of text instead of only one

My current implementiation works well when I have a "Back"-Button and an "Edit" Button because it looks nearly centered. The problem is when I only have one of the Buttons. It looks really weird and wrong because the view centers itself on the available space.

UINavigationBar with left and right Button

UINavigationBar with only one Button

This is my current implementation:

CGRect frame = self.navigationController.navigationBar.frame;

UIView *twoLineTitleView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetWidth(frame), 0, CGRectGetWidth(frame), CGRectGetHeight(frame))];

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 8, CGRectGetWidth(frame), 14)];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth;
titleLabel.textAlignment = UITextAlignmentCenter;
titleLabel.text = self.title;
[twoLineTitleView addSubview:titleLabel];

UILabel *subTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 23, CGRectGetWidth(frame), 14)];
subTitleLabel.backgroundColor = [UIColor clearColor];
subTitleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth;
subTitleLabel.textAlignment = UITextAlignmentCenter;
subTitleLabel.text = self.subTitle;
[twoLineTitleView addSubview:subTitleLabel];

self.navigationItem.titleView = twoLineTitleView;

Answer 1

Here is how I would do it:

• Use sizeToFit for each of your two labels.
• Have the container view's width set to the max width of your two labels.
• Center the smaller of the two labels on the view.

This code should work for you:

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
    titleLabel.backgroundColor = [UIColor clearColor];
    titleLabel.textColor = [UIColor whiteColor];
    titleLabel.font = [UIFont boldSystemFontOfSize:20];
    titleLabel.text = @"Your Title";
    [titleLabel sizeToFit];

    UILabel *subTitleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 22, 0, 0)];
    subTitleLabel.backgroundColor = [UIColor clearColor];
    subTitleLabel.textColor = [UIColor whiteColor];
    subTitleLabel.font = [UIFont systemFontOfSize:12];
    subTitleLabel.text = @"Your subtitle";
    [subTitleLabel sizeToFit];

    UIView *twoLineTitleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, MAX(subTitleLabel.frame.size.width, titleLabel.frame.size.width), 30)];
    [twoLineTitleView addSubview:titleLabel];
    [twoLineTitleView addSubview:subTitleLabel];

    float widthDiff = subTitleLabel.frame.size.width - titleLabel.frame.size.width;

    if (widthDiff > 0) {
        CGRect frame = titleLabel.frame;
        frame.origin.x = widthDiff / 2;
        titleLabel.frame = CGRectIntegral(frame);
    }else{
        CGRect frame = subTitleLabel.frame;
        frame.origin.x = abs(widthDiff) / 2;
        subTitleLabel.frame = CGRectIntegral(frame);
    }

    self.navigationItem.titleView = twoLineTitleView;

Swift 3 variant:

    let titleLabel = UILabel.init(frame: CGRect.zero)
    titleLabel.backgroundColor = UIColor.clear
    titleLabel.textColor = UIColor.schBlack
    titleLabel.font = UIFont.schTextStyle2Font()
    titleLabel.text = titleString;
    titleLabel.sizeToFit()

    let subTitleLabel = UILabel.init(frame: CGRect.init(x: 0, y: 22, width: 0, height: 0))
    subTitleLabel.backgroundColor = UIColor.clear
    subTitleLabel.textColor = UIColor.schBrownishGrey
    subTitleLabel.font = UIFont.schTextStyle3Font()
    subTitleLabel.text = subTitleString;
    subTitleLabel.sizeToFit()

    let twoLineTitleView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: self.view.frame.width-40, height: 30))
    twoLineTitleView.addSubview(titleLabel)
    twoLineTitleView.addSubview(subTitleLabel)

    /*

    float widthDiff = subTitleLabel.frame.size.width - titleLabel.frame.size.width;
    if (widthDiff > 0) {
        CGRect frame = titleLabel.frame;
        frame.origin.x = widthDiff / 2;
        titleLabel.frame = CGRectIntegral(frame);
    }else{
        CGRect frame = subTitleLabel.frame;
        frame.origin.x = abs(widthDiff) / 2;
        subTitleLabel.frame = CGRectIntegral(frame);
    }
    */

    self.navigationItem.titleView = twoLineTitleView;

Answer 2

You can also use an attributed string to achieve the same result:

let subtitleAttribute = [NSForegroundColorAttributeName: UIColor.grayColor() , NSFontAttributeName: UIFont.systemFontOfSize(12.0)]
let titleString = NSMutableAttributedString(string: "title" + "\n", attributes: [NSFontAttributeName: UIFont.boldSystemFontOfSize(17.0)])
let subtitleString = NSAttributedString(string: "subtitle", attributes: subtitleAttribute)
titleString.appendAttributedString(subtitleString)

let label = UILabel(frame: CGRectMake(0, 0, titleString.size().width, 44))
label.numberOfLines = 0
label.textAlignment = NSTextAlignment.Center
label.attributedText = titleString
self.navigationItem.titleView = label

Swift 3

let subtitleAttribute = [NSForegroundColorAttributeName: UIColor.gray , NSFontAttributeName: UIFont.systemFont(ofSize: 12.0)]
let titleString = NSMutableAttributedString(string: "title" + "\n", attributes: [NSFontAttributeName: UIFont.boldSystemFont(ofSize: 17.0)])
let subtitleString = NSAttributedString(string: "subtitle", attributes: subtitleAttribute)
titleString.append(subtitleString)

let label = UILabel(frame: CGRect(x: 0, y: 0, width: titleString.size().width, height: 44))
label.numberOfLines = 0
label.textAlignment = NSTextAlignment.center
label.attributedText = titleString
self.navigationItem.titleView = label

Answer 3

Inspired by @Ben Smiley, I added a masonry implementation.

CGFloat width = 200;
CGFloat titleHeight = 25;
CGFloat containerHeight = 40;

UIView * containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, containerHeight)];
UILabel * titleLabel = [[UILabel alloc] init];
titleLabel.text = @"Title";
titleLabel.textAlignment = NSTextAlignmentCenter;
titleLabel.font = [UIFont boldSystemFontOfSize:titleLabel.font.pointSize];

[containerView addSubview:titleLabel];
[titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(0);
    make.left.mas_equalTo(0);
    make.right.mas_equalTo(0);
    make.width.mas_equalTo(width);
    make.height.mas_equalTo(titleHeight);

}];

UILabel * subtitleLabel = [[UILabel alloc] init];
subtitleLabel.textAlignment = NSTextAlignmentCenter;
subtitleLabel.font = [UIFont systemFontOfSize:12];

[containerView addSubview:subtitleLabel];

[subtitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(0);
    make.right.mas_equalTo(0);
    make.top.mas_equalTo(titleLabel.mas_bottom);
    make.width.mas_equalTo(width);
    make.height.mas_equalTo(containerHeight - titleHeight);

}];

subtitleLabel.text = @"Subtitle";

[self.navigationItem setTitleView:containerView];

Answer 4

I was using Rodrigo Pedroso's answer, but the fact that it doesn't truncate long titles became a problem. I made a version that measures how much space there is for the title between the bar button items, and then manually truncates the title to fit in that space. The truncation code was adapted from this answer, and is a bit of a mess - maybe someone can help figure out a way to use UILabel's built-in truncation methods (i.e. .ByTruncatingTail). I've already spent too much time on this though.

Here's what I've got:

extension UIViewController {

    private var availableWidthForTitle: CGFloat {
        get {
            var total = UIScreen.mainScreen().bounds.width
            if let navigationBar = navigationController?.navigationBar {
                var maxYLeft:  CGFloat = 0
                var minYRight: CGFloat = 0
                for subview in navigationBar.subviews.dropFirst()
                    where !subview.hidden {
                    if subview.frame.origin.x < total / 2 {
                        let rightEdge = subview.frame.origin.x + subview.frame.size.width
                        if rightEdge < total / 2 {
                            maxYLeft = max(maxYLeft, rightEdge)
                        }
                    } else {
                        let leftEdge = subview.frame.origin.x
                        if leftEdge > total / 2 {
                            minYRight = min(minYRight, total - leftEdge)
                        }
                    }
                }
                total = total - maxYLeft - minYRight
            }

            return total
        }
    }

    func setTitle(title:String, subtitle:String?) {
        if (subtitle == nil) {
            self.title = title.uppercaseString
        } else {
            let titleLabel = UILabel(frame: CGRectMake(0, -2, 0, 0))
            titleLabel.backgroundColor = UIColor.clearColor()
            titleLabel.textColor = MaterialColor.white
            titleLabel.font = RobotoFont.boldWithSize(17)
            titleLabel.textAlignment = .Center
            let availableWidth = availableWidthForTitle
            let titleUppercase = NSString(string: title.uppercaseString)
            if titleUppercase.boundingRectWithSize(
                // if title needs to be truncated
                CGSize(width: CGFloat.max, height: CGFloat.max),
                options: NSStringDrawingOptions.UsesLineFragmentOrigin,
                attributes: [NSFontAttributeName : titleLabel.font],
                context: nil).width > availableWidth {
                let truncTitle: NSMutableString = ""
                for nextChar in title.uppercaseString.characters {
                    if truncTitle.boundingRectWithSize(
                        CGSize(width: CGFloat.max, height: CGFloat.max),
                        options: NSStringDrawingOptions.UsesLineFragmentOrigin,
                        attributes: [NSFontAttributeName : titleLabel.font],
                        context: nil).width > availableWidth - 16 { // for ellipsis + some margin
                        truncTitle.appendString("...")
                        break
                    } else {
                        truncTitle.appendString(String(nextChar))
                    }
                }
                titleLabel.text = truncTitle as String
            } else {
                // use title as-is
                titleLabel.text = titleUppercase as String
            }
            titleLabel.sizeToFit()
            let subtitleLabel = UILabel(frame: CGRectMake(0, 18, 0, 0))
            subtitleLabel.backgroundColor = UIColor.clearColor()
            subtitleLabel.textColor = MaterialColor.white
            subtitleLabel.font = MaterialFont.italicSystemFontWithSize(10)
            subtitleLabel.text = subtitle
            subtitleLabel.sizeToFit()

            let titleView = UIView(frame: CGRectMake(0, 0, max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), 30))
            // Center title or subtitle on screen (depending on which is larger)
            if titleLabel.frame.width >= subtitleLabel.frame.width {
                var adjustment = subtitleLabel.frame
                adjustment.origin.x = titleView.frame.origin.x + (titleView.frame.width/2) - (subtitleLabel.frame.width/2)
                subtitleLabel.frame = adjustment
            } else {
                var adjustment = titleLabel.frame
                adjustment.origin.x = titleView.frame.origin.x + (titleView.frame.width/2) - (titleLabel.frame.width/2)
                titleLabel.frame = adjustment
            }

            titleView.addSubview(titleLabel)
            titleView.addSubview(subtitleLabel)
            self.navigationItem.titleView = titleView
        }
    }
}

Answer 5

In addition to the github! here.

I found that when my subtitle was smaller than my Title it would not format it correctly here is the right code.

//Usage:
self.navigationItem.titleView = setTitle(varDec.currentDate(), subtitle: varDec.currentDay())

 func setTitle(title:String, subtitle:String) -> UIView {
    //Create a label programmatically and give it its property's
    let titleLabel = UILabel(frame: CGRectMake(0, -5, 0, 0)) //x, y, width, height where y is to offset from the view center
    titleLabel.backgroundColor = UIColor.clearColor()
    titleLabel.textColor = UIColor.blackColor()
    titleLabel.font = UIFont.boldSystemFontOfSize(17)
    titleLabel.text = title
    titleLabel.sizeToFit()

    //Create a label for the Subtitle
    // x, y, width, height where x is set to be half the size of the title (100/4 = 25%) as it starts all the way left.
    let subtitleLabel = UILabel(frame: CGRectMake(titleLabel.frame.size.width / 4, 18, 0, 0)) 
    subtitleLabel.backgroundColor = UIColor.clearColor()
    subtitleLabel.textColor = UIColor.lightGrayColor()
    subtitleLabel.font = UIFont.systemFontOfSize(12)
    subtitleLabel.text = subtitle
    subtitleLabel.sizeToFit()

    /*Create a view and add titleLabel and subtitleLabel as subviews setting 
     * its width to the bigger of both
     * this will crash the program if subtitle is bigger then title
     */
    let titleView = UIView(frame: CGRectMake(0, 0, max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), 30))
    titleView.addSubview(titleLabel)
    titleView.addSubview(subtitleLabel)


    return titleView
}

Answer 6

A few additions to Brian van den hovel's answer to better centralise title and subtitle.

func setTitle(title:String, subtitle:String) -> UIView {
    //Create a label programmatically and give it its property's
    let titleLabel = UILabel(frame: CGRectMake(0, 0, 0, 0)) //x, y, width, height where y is to offset from the view center
    titleLabel.backgroundColor = UIColor.clearColor()
    titleLabel.textColor = UIColor.blackColor()
    titleLabel.font = UIFont.boldSystemFontOfSize(17)
    titleLabel.text = title
    titleLabel.sizeToFit()

    //Create a label for the Subtitle
    let subtitleLabel = UILabel(frame: CGRectMake(0, 18, 0, 0))
    subtitleLabel.backgroundColor = UIColor.clearColor()
    subtitleLabel.textColor = UIColor.lightGrayColor()
    subtitleLabel.font = UIFont.systemFontOfSize(12)
    subtitleLabel.text = subtitle
    subtitleLabel.sizeToFit()

    // Create a view and add titleLabel and subtitleLabel as subviews setting
    let titleView = UIView(frame: CGRectMake(0, 0, max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), 30))

    // Center title or subtitle on screen (depending on which is larger)
    if titleLabel.frame.width >= subtitleLabel.frame.width {
        var adjustment = subtitleLabel.frame
        adjustment.origin.x = titleView.frame.origin.x + (titleView.frame.width/2) - (subtitleLabel.frame.width/2)
        subtitleLabel.frame = adjustment
    } else {
        var adjustment = titleLabel.frame
        adjustment.origin.x = titleView.frame.origin.x + (titleView.frame.width/2) - (titleLabel.frame.width/2)
        titleLabel.frame = adjustment
    }

    titleView.addSubview(titleLabel)
    titleView.addSubview(subtitleLabel)

    return titleView
}