How do I override the Xamarin Forms TabbedPage item fonts for iOS?

Question

Wanting to achieve a consistent look for my Xamarin Forms app, I need to know how to change the font for the tabbed page tab bar icons. Using UITabBarItem.Appearance as the iOS API would suggest does not appear to have any effect. What's necessary to do this?

Answer 1

U need to write a custom renderer like this one , take a clue from below code ! it has what u r seeking

 [assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(TabbedPageCustom))]
    namespace App.iOS
    {
        public class TabbedPageCustom : TabbedRenderer
        {
            public TabbedPageCustom ()
        {
            TabBar.TintColor = UIKit.UIColor.White;
            TabBar.BarTintColor = UIKit.UIColor.White;
            TabBar.BackgroundColor = UIKit.UIColor.Red;
        }
        protected override void OnElementChanged (VisualElementChangedEventArgs e)
        {
            base.OnElementChanged (e);

            // Set Text Font for unselected tab states
            UITextAttributes normalTextAttributes = new UITextAttributes();
            normalTextAttributes.Font = UIFont.FromName("ChalkboardSE-Light", 20.0F); // unselected
            normalTextAttributes.TextColor = UIKit.UIColor.Blue;

            UITabBarItem.Appearance.SetTitleTextAttributes(normalTextAttributes, UIControlState.Normal);
        }
        public override UIViewController SelectedViewController {
            get {
                UITextAttributes selectedTextAttributes = new UITextAttributes();
                selectedTextAttributes.Font = UIFont.FromName("ChalkboardSE-Bold", 20.0F); // SELECTED
                if (base.SelectedViewController != null)
                {
                    base.SelectedViewController.TabBarItem.SetTitleTextAttributes(selectedTextAttributes, UIControlState.Normal);
                }
                return base.SelectedViewController;
            }
            set {
                base.SelectedViewController = value;

                foreach (UIViewController viewController in base.ViewControllers)
                {
                    UITextAttributes normalTextAttributes = new UITextAttributes();
                    normalTextAttributes.Font = UIFont.FromName("ChalkboardSE-Light", 20.0F); // unselected
                    normalTextAttributes.TextColor = UIKit.UIColor.Blue;
                    viewController.TabBarItem.SetTitleTextAttributes(normalTextAttributes, UIControlState.Normal);
                }
            }
        }

    }
}

Answer 2

This was a particularly interesting problem. I tried:

UITabBarItem.Appearance

Using the UITabBarItem.Appearance.SetTitleTextAttributes method to update the UITextAttribute to my font (size 9.0f) for UIControlState.Normal. This didn't appear to make any difference.

UINavigationBar.Appearance

I found out that setting UINavigationBar.Appearance.SetTitleTextAttributes would update both the UINavigationBar text appearance as well as the UITabBarItem text appearance.

Which was a problem because the tabbed page item font size was far too large.

Customizing the TabbedRenderer

Inspired by a sample I saw somewhere, I subclassed TabbedRenderer in the iOS project.

I tried overriding the settor for TabbedRenderer.SelectedViewController property and loop through the ViewControllers property to set their items. The icons would display with the standard font, but once the user changed the tab they would all update to the desired font. Almost there!

I then tried overriding AddChildViewController and updating that controller's TabBarItem after it was added which ended up having no effect. The TabBarItem for the added page was being updated at some point after the controller was added.

Eventually I found out that overriding ViewWillAppear and setting the appearance for all the tab bar items at that time seemed to do the job I desired.

I've included a sample in this gist.