Search code examples
iosxamarinkerning

How to Change Title Kerning Value of NavigationBar in iOS using Xamarin


I'm trying to adjust the kerning for the title text in the NavigationBar. I've gotten as far as assigning a custom UIStringAttributes to the NavigationBar title. Setting the font and the text color seems to work fine, but when I input the Kerning Adjustment, nothing happens, regardless of what value I input.

public void SetTitleFont (string fontName, float fontSize, Color foregroundColor)
{
    var TitleAttr = new UIStringAttributes {
        ForegroundColor = foregroundColor.ToUIColor(),
        Font = UIFont.FromName (fontName, fontSize),
        KerningAdjustment = 50
    }; 

    this.NavigationController.NavigationBar.TitleTextAttributes = TitleAttr;
}

Solution

  • Figured this one out.

    What worked out for me was creating a new UILabel, set the attributes for the UILabel, then set the TitleView to the UILabel.

    // We will grab the actual title of the Page further down.    
    string viewTitle = string.Empty;
    
    UINavigationItem navItem = new UINavigationItem();
    
    if (this.NavigationController != null)
    {
        if (this.NavigationController.VisibleViewController != null)
        {
            if (this.NavigationController.VisibleViewController.NavigationItem != null)
            {
                navItem = this.NavigationController.VisibleViewController.NavigationItem;
    
                // Grab the title of the Page you are on.
                if (navItem.Title != null)
                {
                    viewTitle = this.NavigationController.VisibleViewController.NavigationItem.Title;
                }
            }
        }
    }
    
    // We do not want to set an arbitrary size for the UILabel.
    // Otherwise, positioning it will be very difficult.
    // The StringSize function will set the size of the UILabel to the absolute
    // minimum size of whatever string you specify - given the correct
    // parameters (font and fontSize).
    CGSize titleSize = viewTitle.StringSize(UIFont.FromName (fontName, size));
    
    // Create the new title UILabel. Make sure to set the Bounds!
    pageTitleView = new UILabel {
        Bounds = new CGRect (0, 0, titleSize.Width, titleSize.Height),
        BackgroundColor = UIColor.FromRGBA(0, 0, 0, 0)
    };
    
    var titleAttributes = new NSAttributedString (viewTitle,
        new UIStringAttributes () {
        ForegroundColor =  foregroundColor.ToUIColor(),
        Font = UIFont.FromName (fontName, size),
        KerningAdjustment = 1.1f
    });
    
    // Apply the new attributes to the UILabel and center the text.
    pageTitleView.AttributedText = titleAttributes;
    pageTitleView.TextAlignment = UITextAlignment.Center;
    
    // Set the TitleView to the new UILabel.
    navItem.TitleView = pageTitleView;
    

    I hope this helps!