Sunday, December 4, 2022
HomeiOS Developmentios - .NET MAUI Shell TabBar doesn't behave as anticipated

ios – .NET MAUI Shell TabBar doesn’t behave as anticipated


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

<TabBar>
    <Tab Title="Residence" Icon="{StaticResource IconHome}">
        <ShellContent ContentTemplate="{DataTemplate native:MainPage}" />
    </Tab>
    <Tab Title="Protection&#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="Extra" Icon="{StaticResource IconMore}">
        <ShellContent ContentTemplate="{DataTemplate extra:MoreFeaturesPage}" />
    </Tab>
</TabBar>

As you possibly can see, some tab titles have two traces. To indicate each traces, and to heart the titles’ texts, I exploit customized renderer:

inside class MyShellRenderer : ShellRenderer
{
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new MyCreateTabBarAppearanceTracker();
    }

    public class MyCreateTabBarAppearanceTracker : ShellTabBarAppearanceTracker, IShellTabBarAppearanceTracker
    {
        void IShellTabBarAppearanceTracker.SetAppearance(UITabBarController controller, ShellAppearance look)
        {
            base.SetAppearance(controller, look);

            var gadgets = controller.TabBar.Objects;

            if (gadgets == null)
            {
                return;
            }

            for (int i = 0; i < gadgets.Size; i++)
            {
                if (gadgets[i] == null) proceed;
                else
                {
                    UITabBarItem item_temp = gadgets[i];
                    UIView view = item_temp.ValueForKey(new Basis.NSString("view")) as UIView;
                    UILabel label = view.Subviews[1] as UILabel;
                    label.Traces = 2;
                    label.LineBreakMode = UILineBreakMode.WordWrap;
                    label.TextAlignment = UITextAlignment.Heart;
                }
            }
        }
    }
}

With this tradition renderer, the objective is achieved solely partially. Right here is how the TabBar appears to be like firstly:

Initial look

The titles are centered, however solely the primary line reveals up.

If the app is positioned within the background, when it re-appears, all tabs have now two traces, however the textual content is just not centered:

enter image description here

If I contact a tab, the texts get centered:

enter image description here

However the textual content of the second tab is truncated.

And the 2nd line of the fourth tab that has two phrases, loses the second phrase (wrapped to the third line).

How can this habits be fastened? I.e. learn how to make the textual content to be centered initially, and learn how to improve the tabs’ width to keep away from truncating?

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments