如何在TabBar .NET MAUI中删除或隐藏标签文本?

huangapple go评论105阅读模式
英文:

how can i remove or hide the text of tabs in TabBar .NET MAUI?

问题

对于Android平台:

我想在.NET MAUI中底部的TabBar中仅使用图标,
因此我必须要么移除标题,要么隐藏它,
如果我将标题留空而没有文本,它会保留其空间,因此图标不会填满所有空间。

英文:

For Android Platform:

I want to use icons only in the bottom TabBar in .NET MAUI,
So I have to either remove the title or hide it,
If i leave the title empty without text, it retains its space, so the icon does not fill all the space

如何在TabBar .NET MAUI中删除或隐藏标签文本?

答案1

得分: 2

你可以使用自定义的外壳渲染器来移除底部选项卡栏中标题视图。

在/Platforms/Android中创建自定义渲染器类:

public class MyShellRenderer : ShellRenderer
{
    public MyShellRenderer(Context context) : base(context)
    {
    }
    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new MyShellBottomNavViewAppearanceTracker();
    }
}
public class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
{
    public void Dispose()
    {
    }

    public void ResetAppearance(BottomNavigationView bottomView)
    {
    }

    public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
        // 这一行将隐藏标题的空间
    }
}

然后在MauiProgram.cs中使用渲染器:

builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    })
    .ConfigureMauiHandlers(handlers =>
    {
#if ANDROID
        handlers.AddHandler(typeof(Shell), typeof(Platforms.Android.MyShellRenderer));
#endif
    });

最后,在AppShell.xaml中:

<TabBar>
    <Tab Icon="main.png">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
    <Tab Icon="page1.png">
        <ShellContent ContentTemplate="{DataTemplate local:NewPage1}"/>
    </Tab>
</TabBar>

不要翻译代码部分。

英文:

You can use the custom shell renderer to remove the title's view in the bottom tab bar.

Create the custom renderer class in the /Platforms/Android:

public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }
        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MyShellBottomNavViewAppearanceTracker();
        }
    }
    public class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {
        }

        public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
            // this line will hide the space of the title
        }
    }

And use the Renderer in the MauiProgram.cs:

builder

                  .UseMauiApp&lt;App&gt;()
                  .ConfigureFonts(fonts =&gt;
                  {
                        fonts.AddFont(&quot;OpenSans-Regular.ttf&quot;, &quot;OpenSansRegular&quot;);
                        fonts.AddFont(&quot;OpenSans-Semibold.ttf&quot;, &quot;OpenSansSemibold&quot;);
                  })
                  .ConfigureMauiHandlers(handlers =&gt;
                  {
#if ANDROID
                        handlers.AddHandler(typeof(Shell), typeof(Platforms.Android.MyShellRenderer));
#endif
                  })
                  ;

And in the AppShell.xaml:

    &lt;TabBar&gt;
        &lt;Tab
            Icon=&quot;main.png&quot;&gt;
            &lt;ShellContent ContentTemplate=&quot;{DataTemplate local:MainPage}&quot;/&gt;
        &lt;/Tab&gt;
        &lt;Tab
        Icon=&quot;page1.png&quot;&gt;
            &lt;ShellContent ContentTemplate=&quot;{DataTemplate local:NewPage1}&quot;/&gt;
        &lt;/Tab&gt;
    &lt;/TabBar&gt;

</details>



huangapple
  • 本文由 发表于 2023年3月7日 08:51:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/75657132.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定