具有自定义视图的自定义更多选项卡

Posted 2023-03-12

【中文标题】具有自定义视图的自定义更多选项卡

【英文标题】：Custom More-Tab with Custom View

【发布时间】：2021-01-29 23:32:30

【问题描述】：

我正在开发一个复杂的应用程序，并利用 Xamarin.Forms.Shell 的优势进行布局和导航。现在有一些烦人的事情我还没有找到解决办法。

应用程序本身及其内容是德语。有没有一种干净的方法可以将硬编码的“更多”选项卡文本更改为德语翻译（“Mehr”）？

尽管更多选项卡非常好，但它不适合我对应用程序布局的需求。按下它时，我想显示一个视图，其中包含的不仅仅是带有标签的图标列表。我想将视图分成带有标题的部分，在这些标题中我想显示该部分的连贯页面。最简单的方法是用单页选项卡替换多页“更多选项卡”，并按照描述设计页面，但我喜欢更多选项卡的菜单外观，如果可能的话，我想保留它。

在此先感谢您的帮助或建议。

【问题讨论】：

嗨，您使用 Xamarin 表单 shell 作为根布局吗？你可以在那里分享 Xaml 代码，我会检查一下。

是的 - 我正在使用 ShellPage 类型的页面作为根页面。

好吧，“按下它时，我想显示一个视图，其中包含的不仅仅是带有标签的图标列表。”，你能分享一张图片吗？解释这种影响？

@JuniorJiang-MSFT Shure - 它应该看起来像这样：i.imgur.com/SEMdqP1.jpg

【参考方案1】：

您可以自定义ShellRenderer来修改更多标签的Text。

Android 中的CustomShellRenderer.cs 解决方案：

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);
        
    

strings.xml：

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

效果：

iOS 中的CustomShellRenderer.cs 解决方案：

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";
        
    

效果：

以上代码基于this official sample project(Xamarin.Forms - Xaminals)。

【讨论】：

非常感谢！那应该可以完成这项工作。

@ItsAMysterious 很高兴它有效，如果回复有帮助，请不要忘记接受它作为答案（单击此答案左上角的✔）并投票，它会有所帮助其他有类似问题的人。我会检查共享的图像，如果好的想法会在这里更新。