如何阻止 TabbedPage 图标在被选中时向上移动

Question

我正在尝试构建一个导航栏，上面有 5 个图标（每个图标都有自己的页面）。我目前遇到的问题是，每当我单击其中一个图标时，它都会在您选择该页面时将其向上移动一点（类似于弹出窗口）。我知道它可能是某种属性必须设置为 false 但我不知道到底是哪个。如有任何帮助，我们将不胜感激。

XAML MainPage.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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:views="clr-namespace:StudioDen.View"
            mc:Ignorable="d"
            x:Class="StudioDen.MainPage"
            BarBackgroundColor="#FFDA00"
            UnselectedTabColor="Black"
            SelectedTabColor="Black">
            <!--The last three properties set the colours of the bar to yellow and the icons to black-->


    <!--Projects view on the tabbed page-->
    <NavigationPage IconImageSource="ic_projects.png" >
        <x:Arguments>
            <views:Projects />
        </x:Arguments>
    </NavigationPage>

    <!--Events view on the tabbed page-->
    <NavigationPage IconImageSource="ic_events.png" >
        <x:Arguments>
            <views:Events/>
        </x:Arguments>
    </NavigationPage>

    <!--Upload view on the tabbed page-->
    <NavigationPage IconImageSource="ic_uploadV2.png" >
        <x:Arguments>
            <views:Upload/>
        </x:Arguments>
    </NavigationPage>

    <!--Process view on the tabbed page-->
    <NavigationPage IconImageSource="ic_processV3.png" >
        <x:Arguments>
            <views:Process />
        </x:Arguments>
    </NavigationPage>

    <!--Login view on the tabbed page-->
    <NavigationPage IconImageSource="ic_loginV2.png" >
        <x:Arguments>
            <views:Login />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

选中第 3 个图标的导航栏图片：

Answer 1

这是 Android 默认执行的操作。您可以通过为它写一个 Effect 来禁用它。

确保您使用的是 28.0.0.1 Android 支持库并且目标是 Android 9.0 (Pie)。如果你不能，有一个（不好）reflection trick你可以试试。

将此 NoShiftEffect.cs 添加到您的 Android 项目，当然还要重命名名称空间和其他特定于您的项目和解决方案的值：

using Android.Support.Design.BottomNavigation;
using Android.Support.Design.Widget;
using Android.Views;
using App16.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly:ResolutionGroupName ("MyCompany")]
[assembly:ExportEffect (typeof(NoShiftEffect), "NoShiftEffect")]
namespace App16.Droid
{
    public class NoShiftEffect : PlatformEffect
    {
        protected override void OnAttached ()
        {
            if (!(Container.GetChildAt(0) is ViewGroup layout))
                return;

            if (!(layout.GetChildAt(1) is BottomNavigationView bottomNavigationView))
                return;

            // This is what we set to adjust if the shifting happens
            bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityLabeled;
        }

        protected override void OnDetached ()
        {
        }
    }
}

现在向您的共享项目添加另一个 NoShiftEffect.cs：

using Xamarin.Forms;

namespace App16
{
    public class NoShiftEffect : RoutingEffect
    {
        public NoShiftEffect() : base("MyCompany.NoShiftEffect")
        {
        }
    }
}

最后在你的 TabbedPage:

中消耗效果

<TabbedPage.Effects>
    <local:NoShiftEffect />
</TabbedPage.Effects>

感谢 James Montemagno 和他的 post here。

如何阻止 TabbedPage 图标在被选中时向上移动

How to stop TabbedPage icon from shifting up when it is selected

c#

xaml

android

xamarin.forms

tabbedpage