CODEWITHSUNDEEP
xamarin.formsmobilecustomizationmultiplatformxamarin.forms.shell
ItsAMysterious
ItsAMysterious

Reputation: 55

Custom More-Tab with Custom View

I am developing a complex App and made use of the advantages of Xamarin.Forms.Shell for layout and navigation. Now there are a few annoying things that I haven't been able to find a solution for yet.

The application itself and its content is German. Is there a clean way to change the hard-coded "more" tab-text to its German translation ("Mehr")?

Eventhough the More-tab is quite nice it does not fit my needs for the Layout of the App. When pressing it I want to show a view containing more than just a list of Icons with Labels. I want to divide the view into sections with captions and inside these Captions I want to show the coherent pages of the section. The easiest way would be to replace the multipage-"More-Tab" by a singlepage-tab and just design the page as described, but I like the Menu-Appearance of the More-tab and I want to keep that, if possible.

Thanks in Advance for any help or advice.

Upvotes: 0

Views: 437

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

You could custom ShellRenderer to modify the Text of More tab.

The CustomShellRenderer.cs in Android solution:

public class CustomShellRenderer : ShellRenderer
{
    public CustomShellRenderer(Context context) : base(context)
    {

    }

    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new MarginedTabBarAppearance();
    }
}

public class MarginedTabBarAppearance : IShellBottomNavViewAppearanceTracker
{
    public void Dispose()
    {
    }

    public void ResetAppearance(BottomNavigationView bottomView)
    {
    }

    public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
    {
    }

    public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        if(null != bottomView.Menu.GetItem(4))
        {
            IMenuItem menuItem = bottomView.Menu.GetItem(4);
            menuItem.SetTitle(Resource.String.More);
        }
    }
}

The strings.xml:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <string name="More">Mehr</string>
</resources>

The effect:

enter image description here

The CustomShellRenderer.cs in iOS solution:

public class CustomShellRenderer: ShellRenderer
{
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new TabBarAppearance();
    }
}

public class TabBarAppearance : IShellTabBarAppearanceTracker
{
    public void Dispose()
    {
    }

    public void ResetAppearance(UITabBarController controller)
    {
    }

    public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
    }

    public void UpdateLayout(UITabBarController controller)
    {
        UITabBar tb = controller.MoreNavigationController.TabBarController.TabBar;
        if (tb.Subviews.Length > 4)
        {
            UIView tbb = tb.Subviews[4];
            UILabel label = (UILabel)tbb.Subviews[1];
            label.Text = "Mehr";
        }
    }
}

The effect:

enter image description here

The above code based on this official sample project(Xamarin.Forms - Xaminals).

Upvotes: 1

Related Questions