TabBar's bar title is not centered

Question

TabBar's bar title is not centered

Dmitriy Reznik 241

In our .Net MAUI iOS app, we use Shell TabBar:

    <TabBar>  
        <Tab Title="Home" Icon="{StaticResource IconHome}">  
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />  
        </Tab>  
        <Tab Title="Coverage&#10;Calculator" Icon="{StaticResource IconCalculator}" >  
            <ShellContent ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />  
        </Tab>  
        <Tab Title="Distributor&#10;Locator" Icon="{StaticResource IconLocator}">  
            <ShellContent ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />  
        </Tab>  
        <Tab Title="Scan&#10;QR Code" Icon="{StaticResource IconQrScanner}">  
            <ShellContent ContentTemplate="{DataTemplate qrScanner:QrScannerPage}" />  
        </Tab>          
        <Tab Title="More" Icon="{StaticResource IconMore}">  
            <ShellContent ContentTemplate="{DataTemplate more:MoreFeaturesPage}" />  
        </Tab>  
    </TabBar>

We need Titles to be centered horizontally. So I created a custom renderer like this:

    internal class MyShellRenderer : ShellRenderer  
    {  
        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)  
        {  
            var renderer = base.CreateShellItemRenderer(item);  
            if (renderer != null)  
            {  
                if (renderer is ShellItemRenderer shellItem)  
                {  
                    var items = shellItem.TabBar.Items;  
                    for (int i = 0; i < items.Length; i++)  
                    {  
                        if (items[i] == null) continue;  
                        else  
                        {  
                            UITabBarItem item_temp = items[i];  
                            UIView view = item_temp.ValueForKey(new Foundation.NSString("view")) as UIView;  
                            UILabel label = view.Subviews[1] as UILabel;  
  
                            label.Lines = 2;  
                            label.LineBreakMode = UILineBreakMode.WordWrap;  
                            label.TextAlignment = UITextAlignment.Center;  
                        }  
                    }  
                }  
            }  
            return renderer;  
        }  
    }

But the titles of the tabs still are not centered. When I did a similar renderer for Android, it did work.
What am I missing?

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

Hello,

If you want to custom the TabBar's bar title, you need to override the CreateTabBarAppearanceTracker method. Then set the title to the center like the following code.

   [assembly: ExportRenderer(typeof(Shell), typeof(MyCustomrender))]  
   namespace App1.iOS  
   {  
   internal class MyCustomrender: ShellRenderer  
       {  
           protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()  
           {  
               return new MyCreateTabBarAppearanceTracker();  
           }  
       }  
      internal class MyCreateTabBarAppearanceTracker : IShellTabBarAppearanceTracker  
       {  
           public void Dispose()  
           {  
               
           }  
          public void ResetAppearance(UITabBarController controller)  
           {  
                 
           }  
          public void SetAppearance(UITabBarController controller, ShellAppearance appearance)  
           {           
              var items = controller.TabBar.Items;  
               for (int i = 0; i < items.Length; i++)  
               {  
                   if (items[i] == null) continue;  
                   else  
                   {  
                       UITabBarItem item_temp = items[i];  
                       UIView view = item_temp.ValueForKey(new Foundation.NSString("view")) as UIView;  
                       UILabel label = view.Subviews[1] as UILabel;  
                      label.Lines = 2;  
                       label.LineBreakMode = UILineBreakMode.WordWrap;  
                       label.TextAlignment = UITextAlignment.Center;  
                   }  
               }           
           }  
          public void UpdateLayout(UITabBarController controller)  
           {  
     
          }  
       }

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Dmitriy Reznik 241 Reputation points

2022-10-03T12:42:19.777+00:00

Thank you for your answer. But in this line

var items = controller.TabBar.Items;

items is null. I added a check

if ( items == null) return;

And now it works.
Some texts are truncated, though the bar has enough free space. Is it possible to make the label wider? Thank you again.

Share via

TabBar's bar title is not centered

0 additional answers

Your answer