在 Xamarin Forms 3.1 中，当使用带有 4 个标签的标签页时，如何防止“滑动"?标签栏对Android的影响? [英] In Xamarin Forms 3.1, when using tabbed page with 4 tabs, how can I prevent "sliding" effect of tab bar on Android?

问题描述

我有一个有四页的应用程序，我希望它看起来类似于我的(非 Xamarin)iOS 应用程序，因此在底部有工具栏.这是我的 MainPage.xaml 文件:

I have an app with four pages, and I want it to look similar to my (non-Xamarin) iOS app, so to have toolbar at the bottom. Here is my MainPage.xaml file:

<?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:local="clr-namespace:XaBLE1"
             x:Class="XaBLE1.MainPage"
            Title="Safe-T Sim" HeightRequest="768" WidthRequest="512" 

            BarBackgroundColor="#F1F1F1"
            BarTextColor="Gray"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="#666666"
            android:TabbedPage.BarSelectedItemColor="Black"
            >

    <NavigationPage Title="Test" Icon="ElectTest.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:TestPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Review" Icon="Review.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:ReviewPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Setup" Icon="Gear.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:SetupPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Info" Icon="Info.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:InfoPage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

我不关心 Oreo 上的当前外观，即让选定的页面选项卡变大并放置标题，将其他选项卡推到一边并删除页面标题.

I don't care for the current look-and-feel on Oreo, which is to make the selected page tab larger and put the title, pushing the other tabs aside and removing the page title.

无论如何要禁用此行为，让它只是 4 个选项卡.请注意，如果有 3 个选项卡，则不会发生此行为 - 图标和图标仅变暗和略微放大；文本，但两者都是可见的.

Is there anyway to disable this behavior, and let it just be 4 tabs. Note that this behavior does not happen if there are 3 tabs -- there is only darkening and slight enlarging of the icon & text, but both are visible.

我尝试了评论中建议的答案，但如前所述，我不确定这是否试图解决相同的问题，并且无论如何都不会改变行为.

I tried the answer suggested in the comments, but as noted I'm not sure this is trying to solve the same problem, and in any case does not change the behavior.

推荐答案

看起来您正在寻找这个(尚未实现)功能:[增强] 为底部导航栏 Android (Github) 实现固定模式

It looks like you are looking for this (not implemented yet) feature: [Enhancement] Implement fixed mode for Bottom Navigation Bar Android (Github)

我可以按照这个 James Montemagno 教程:在 Xamarin.Android 中删除 BottomNavigationView 的图标移动来解决它 并实现我自己的标签页自定义渲染器:

I could solve it following this James Montemagno tutorial: Removing BottomNavigationView’s Icon Shifting in Xamarin.Android and implementing my own Tabbed Page custom renderer:

using Android.Content;
using Android.Support.Design.Internal;
using Android.Views;
using FixedTabbedPage.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace FixedTabbedPage.Droid.CustomRenderers
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (ViewGroup != null && ViewGroup.ChildCount > 0)
            {
                BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);

                if (bottomNavigationMenuView != null)
                {
                    var shiftMode = bottomNavigationMenuView.Class.GetDeclaredField("mShiftingMode");

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

                    for (var i = 0; i < bottomNavigationMenuView.ChildCount; i++)
                    {
                        var item = bottomNavigationMenuView.GetChildAt(i) as BottomNavigationItemView;
                        if (item == null) continue;                         

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

                    if (bottomNavigationMenuView.ChildCount > 0) bottomNavigationMenuView.UpdateMenuView();
                }
            }
        }

        private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
        {
            if (viewGroup == null || viewGroup.ChildCount == 0) return null;

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

                var typedChild = child as T;
                if (typedChild != null) return typedChild;

                if (!(child is ViewGroup)) continue;

                var result = FindChildOfType<T>(child as ViewGroup);

                if (result != null) return result;
            }

            return null;
        }
    }
}

您只需将此代码添加到您的 Android 解决方案中(重构命名空间)，结果如下:

You only have to add this code to your Android solution (refactoring namespaces) and here is the result:

这篇关于在 Xamarin Forms 3.1 中，当使用带有 4 个标签的标签页时，如何防止“滑动"?标签栏对Android的影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！