在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.

推荐答案

您似乎正在寻找此功能(尚未实现):

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屋！