当 ToolbarPlacement 位于底部且 ContentPage 计数大于 4 时，TabbedPage Toolbar 仅显示活动的 ToolbarItem

Question

Xamarin.Forms 3.1 版本中有一项功能，我们已经支持将 Android 工具栏放置在底部。但是当 Tabbed Page 中的内容页大于 4 时，Toolbar 将不会显示那里的所有选项卡，只会显示当前活动的选项卡。其他的只能切换，然后相应地选择选项卡。这是我的代码，工具栏中应该有四个选项卡：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="MelkRadar.App.MobileApp.Views.TabbedView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:view="clr-namespace:MelkRadar.App.MobileApp.Views"
android:TabbedPage.ToolbarPlacement="Bottom"
BarTextColor="Red">

<view:CustomerExplorerView Title="مشتریان" />
<view:RealtorSettingView Title="تنظیمات" />
<view:FavoriteAdvertsExplorerView Title="زونکن" />
<view:AdvertsExplorerView Title="اگهی ها" />

</TabbedPage>

请看这张照片：

https://cdn1.imggmi.com/uploads/2019/6/11/6659fa76fc68ae58deb17d6dfd74f089-full.jpg https://cdn1.imggmi.com/uploads/2019/6/11/150fe2463357f9008da3bed6d976d1bd-full.jpg

我需要显示所有页面标题。这个问题我该怎么办？

Answer 1

您好，当有超过 3 个项目时，这是底部标签栏的一个已知问题 android 将激活切换模式。您可以进行自定义渲染来解决此问题。

从此处复制粘贴代码到您的项目以实现自定义渲染以关闭轮班模式 https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

Answer 2

您可以使用 Routing Effect 来修复它，禁用移动并正确显示标签。

A reusable effect is better, safer and easier to use than a custom renderer that use reflection.

首先确保针对 Android 9.0（目标框架）进行编译并将 Xamarin Android 支持库更新为 v28+

在平台代码（Android项目）中创建这个效果：

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

[assembly:ResolutionGroupName ("MelkRadar")]
[assembly:ExportEffect (typeof(NoShiftEffect), nameof(NoShiftEffect))]
namespace MelkRadar.Droid.Effects
{
    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 ()
        {
        }
    }
}

在您的共享代码中添加效果（NetStandard 项目）

using Xamarin.Forms;

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

现在您可以在 Xaml 页面中使用该效果：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="MelkRadar.App.MobileApp.Views.TabbedView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:view="clr-namespace:MelkRadar.App.MobileApp.Views"
android:TabbedPage.ToolbarPlacement="Bottom"
BarTextColor="Red">

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

<view:CustomerExplorerView Title="مشتریان" />
<view:RealtorSettingView Title="تنظیمات" />
<view:FavoriteAdvertsExplorerView Title="زونکن" />
<view:AdvertsExplorerView Title="اگهی ها" />

</TabbedPage>

有关效果的更多信息 here

James Montemagno 的完整指南here

当 ToolbarPlacement 位于底部且 ContentPage 计数大于 4 时，TabbedPage Toolbar 仅显示活动的 ToolbarItem

TabbedPage Toolbar only shows the active ToolbarItem when ToolbarPlacement is bottom and ContentPage count bigger than 4

android

xamarin

xamarin.forms

tabbedpage