将位置设置为底部时不显示 TabbedPage 图标

Question

我是 Xamarin 的初学者，并尝试将 TabbedPage 用于我的应用程序。当我使用 TabbedPage 并设置图标时，它工作正常。

然后我使用下面的链接将 TabbedPage 位置设置为底部

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/tabbedpage-toolbar-placement-color

但是，当我运行应用程序时，TabbedPage 图标不可见，甚至宽度对于一个 Tab 来说都太长了

下面是我的 XAML 代码：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="//xamarin.com/schemas/2014/forms"
        xmlns:x="//schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:App5.Views"
        x:Class="App5.Views.MainPage"
        BarBackgroundColor="LightYellow"
        BarTextColor="Black"
        xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
        android:TabbedPage.ToolbarPlacement="Bottom"
        android:TabbedPage.BarItemColor="Black"
        android:TabbedPage.BarSelectedItemColor="Red">
<TabbedPage.Children>
    <NavigationPage Title="Tab1" Icon="Tab1.png">
        <x:Arguments>
            <views:ItemsPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Tab2" Icon="Tab2.png">
        <x:Arguments>
            <views:AboutPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Tab3" Icon="Tab3.png">
        <x:Arguments>
            <views:AboutPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Tab4" Icon="Tab4.png">
    <x:Arguments>
        <views:AboutPage />
    </x:Arguments>
</NavigationPage>
</TabbedPage.Children>

谁能帮我解决这个问题？

Answer 1

我认为选择选项卡时选项卡之间的空间可能存在问题。您需要在选择选项卡时禁用缩放效果。

创建自定义标签阅读器以禁用 Android 的缩放效果。

BottomTabbedPageRenderer.cs

  [assembly: ExportRenderer(typeof(TabbedPage), typeof(BottomTabbedPageRenderer))]
namespace Droid.Renderer

{
    public class BottomTabbedPageRenderer : TabbedPageRenderer
    {
    public BottomTabbedPageRenderer(Context context) : base(context)
    {
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);
        try
        {
            var children = GetAllChildViews(ViewGroup);

            if (children.SingleOrDefault(x => x is BottomNavigationView) is BottomNavigationView bottomNav)
            {

                try
                {
                    if (!(bottomNav.GetChildAt(0) is BottomNavigationMenuView menuView))
                    {
                        System.Diagnostics.Debug.WriteLine("Unable to find BottomNavigationMenuView");
                        return;
                    }


                    var shiftMode = menuView.Class.GetDeclaredField("mShiftingMode");

                    shiftMode.Accessible = true;
                    shiftMode.SetBoolean(menuView, false);
                    shiftMode.Accessible = false;
                    shiftMode.Dispose();


                    for (int i = 0; i < menuView.ChildCount; i++)
                    {
                        if (!(menuView.GetChildAt(i) is BottomNavigationItemView item))
                            continue;

                        item.SetShiftingMode(false);
                        item.SetChecked(item.ItemData.IsChecked);

                    }

                    menuView.UpdateMenuView();
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine($"Unable to set shift mode: {ex}");
                }

            }

        }
        catch (Exception e)
        {
            Console.WriteLine($"Error setting ShiftMode: {e}");
        }
    }

    private List<View> GetAllChildViews(View view)
    {
        if (!(view is ViewGroup group))
        {
            return new List<View> { view };
        }

        var result = new List<View>();

        for (int i = 0; i < group.ChildCount; i++)
        {
            var child = group.GetChildAt(i);

            var childList = new List<View> { child };
            childList.AddRange(GetAllChildViews(child));

            result.AddRange(childList);
        }

        return result.Distinct().ToList();
    }
}
}

MyTabPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BarBackgroundColor="LightYellow"
    BarTextColor="Black"
    xmlns:views="clr-namespace:Demo"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    x:Class="Demo.MyTabPage">
    <TabbedPage.Children>
        <NavigationPage
            Title="Tab1"
            Icon="dashboard_selected.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="Tab2"
            Icon="dashboard.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="Tab3"
            Icon="error_alert.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="Tab4"
            Icon="menu.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

我把所有的图片资源都放在同名的 xhdpi,mdpi,xxhdpi,xxxhdpi 的 drawable 文件夹中，就我而言，它工作正常。

Answer 2

正如 @User5590 和 @Jaymin 在 Jaymin 的回答 cmets 中提到的，它与标签栏图标的分辨率有关（我不需要实现自定义渲染器）。这是我所做的：

1. 转到Online Android Asset Studio 并在 Source 部分选择 Image 并上传您想要的标签栏图标：

1. 从左侧面板中选择标签图标的名称：

然后点击蓝色图标下载 zip 文件：

1. 现在我们在 zip 文件中拥有所有分辨率的选项卡图标，请将它们放在 Android 项目的 corespondent 文件夹中。例如将 zip 文件的 drawable-xxxhdpi 文件夹中的 tab_icon.png 移动到 Android 项目中的同一文件夹中。

注意：确保设置每个页面的 Title 和 Icon 属性，例如在第一页的 XAML 中：

Icon="tab_icon.png"

这是最终结果：