web-dev-qa-db-fra.com

Dans Xamarin Forms 3.1, comment puis-je empêcher l'effet de "glissement" de la barre de tabulation sur Android lors de l'utilisation d'une page à onglets avec 4 onglets?

J'ai une application de quatre pages et je veux qu'elle ressemble à celle de mon application iOS (non-Xamarin), donc une barre d'outils en bas. Voici mon fichier 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: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>

Je me fiche de l'apparence actuelle d'Oreo, qui consiste à agrandir l'onglet de la page sélectionnée et à mettre le titre, en écartant les autres onglets et en supprimant le titre de la page.
 Bottom Tab Bar with 2nd page selected

Est-il possible de désactiver ce comportement et laissez-le simplement 4 onglets. Notez que ce problème ne se produit pas s'il y a 3 onglets - il y a seulement un assombrissement et un léger agrandissement de l'icône et du texte, mais les deux sont visibles.

EDIT: J'ai essayé la réponse suggérée dans les commentaires, mais comme indiqué, je ne suis pas sûr que cela essaie de résoudre le même problème, et dans tous les cas, cela ne change pas le comportement.

xamarinxamarin.formsxamarin.androidtabbedpage
5
bobwki

Il semble que vous recherchiez cette fonctionnalité (pas encore implémentée): [Amélioration] Implémenter le mode fixe pour la barre de navigation inférieure Android (Github)

Je pourrais le résoudre après ceci Tutoriel de James Montemagno: Suppression du déplacement de l’icône de BottomNavigationView dans Xamarin.Android et implémentation de mon propre moteur de rendu personnalisé avec une page à onglet:

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;
        }
    }
}

Il vous suffit d'ajouter ce code à votre solution Android (espaces de noms refactorisés) et voici le résultat:

Bottom Fixed TabbedPage on Android

5
J. Aguilar

Pour désactiver Tabulation, vous pouvez utiliser PlatformConfiguration dans votre classe TabbedPage.

public partial class MyTabbedPage : TabbedPage
{
    public MainTabbedPage ()
    {
        InitializeComponent();
        this.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);    
    }
}

si vous n'avez pas la classe MyTabbedPage, ajoutez-la pour que la structure de votre fichier axml ressemble à ceci

<?xml version="1.0" encoding="utf-8" ?>
<MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.Microsoft.com/winfx/2009/xaml"
         x:Class="XaBLE1.MainPage">   
</MyTabbedPage>
1
CGPA6.4