在Xamarine中使用带有底部标签栏的Shell结构时如何删除标签的标题文本 在iOS中在Android中

如何解决在Xamarine中使用带有底部标签栏的Shell结构时如何删除标签的标题文本 在iOS中在Android中

我没有标题，我更喜欢只使用图标，但是图标没有居中，因为标题的空间和填充仍然出现，任何解决方法？Picture of the problem

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:WebViewSample"
             mc:Ignorable="d"
             x:Class="WebViewSample.MainPage"
             Shell.NavBarIsVisible="False"       
            
       >
 
        <TabBar>
        <Tab Icon="home.png">
           
            <ShellContent>
                <local:HomePage/>
            </ShellContent>
        </Tab>
        <Tab Icon="user.png">
            <ShellContent>
                <local:MyAccount/>
            </ShellContent>
        </Tab>
        <Tab Icon="cart.png">
            <ShellContent>
                <local:OrderPage/>
            </ShellContent>
        </Tab>
        <Tab Icon="search.png" Title="" >
            <ShellContent >
                <local:BarCodeScanner/>
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

解决方法

我们可以使用 Custom Renderer

来实现它

在iOS中

AppShell 这是我项目中的Shell。您需要根据需要对其进行修改（示例中似乎是MainPage）

using xxx;
using xxx.iOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(AppShell),typeof(MyShellRenderer))]
namespace xxx.iOS
{
    public class MyShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            if (renderer != null)
            {

            }
            return renderer;
        }

        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new CustomTabbarAppearance();
        }
    }

    public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(UITabBarController controller)
        {

        }

        public void SetAppearance(UITabBarController controller,ShellAppearance appearance)
        {
            UITabBar myTabBar = controller.TabBar;

            if (myTabBar.Items != null)
            {
                foreach (UITabBarItem item in myTabBar.Items)
                {
                    item.Title = null;
                    item.ImageInsets = new UIEdgeInsets(10,0);
                }
                //The same logic if you have itemThree,itemFour....
            }

            

        }

        public void UpdateLayout(UITabBarController controller)
        {

        }
    }
}

在Android中

using Android.App;

using Android.Content;

using Android.Support.Design.BottomNavigation;
using Android.Support.Design.Widget;
using Android.Views;

using Android.Widget;

using App13;

using App13.Droid;
using System;
using Xamarin.Forms;

using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(AppShell),typeof(ShellCustomRenderer))]
namespace App13.Droid

{

    public class ShellCustomRenderer : ShellRenderer

    {

        public ShellCustomRenderer(Context context) : base(context)

        {



        }


        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)

        {

            return new MarginedTabBarAppearance();

        }


    }



    public class ToolbarAppearance : IShellToolbarAppearanceTracker

    {

        public void Dispose()

        {



        }

        public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar,IShellToolbarTracker toolbarTracker)
        {
            throw new NotImplementedException();
        }

        public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar,IShellToolbarTracker toolbarTracker,ShellAppearance appearance)
        {
            throw new NotImplementedException();
        }
    }



   

    public class MarginedTabBarAppearance : IShellBottomNavViewAppearanceTracker

    {

        public void Dispose()

        {

        }



        public void ResetAppearance(BottomNavigationView bottomView)

        {

         
        }

      
        public void SetAppearance(BottomNavigationView bottomView,IShellAppearanceElement appearance)
        {
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled; 
        }
    }

}

现在图标位于选项卡的中心。