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

Question

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

然后我使用下面的 link

将 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

我认为在选中选项卡时 space 可能有问题。选择标签时需要关闭缩放效果。

创建自定义选项卡 reader 以禁用 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 的回答评论中提到的，它与标签栏图标的分辨率有关（我不需要实现自定义渲染器）。这是我所做的：

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

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

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

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

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

Icon="tab_icon.png"

这是最终结果：

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

TabbedPage icons not shown when set position to bottom

c#

android

xamarin.forms

tabbedpage