Xamarin.forms: [Amélioration] Android : TabbedPage : Barre d'onglets inférieure

Connexe #1400

Bonjour, je viens d'ouvrir une pull request sur ce problème. J'ai quelques questions sur la mise en œuvre, mais c'est un point de départ.
La cartographie était assez évidente.

J'ai vraiment hâte que cette pull-request soit fusionnée dans Xamarin Forms. Y a-t-il un ETA ou quelque chose. Je n'ai trouvé aucune solution viable pour avoir une page à onglets en bas sur Android.

@mikescandy une mise à jour à ce sujet ?

Enfin, je regarde farword à cela si longtemps!
Merci beaucoup!

Quand cette amélioration sera-t-elle déployée ?

+1
puis-je l'obtenir sur la construction nocturne ? cc @PureWeen @davidortinau

Et comment ça marche ? Pouvons-nous également le définir dans le XAML de notre application Forms (en tant que propriété de la TabbedPage) ?

@netonjm Je pense que c'est juste un accessoire "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Formcs.Platform.Android/AppCompater/Tabbed/Tabbed

mais pas vraiment sûr des détails (icônes et couleurs).

C'est moi :-)

Oups

@niels9001, vous pouvez voir toutes les options pour configurer les icônes, etc. ici

https://github.com/xamarin/Xamarin.Forms/blob/67d2be4cd224678a350f258b888c568ac8898a8f/Xamarin.Forms.Core/PlatformConfiguration/AndroidSpecific/TabbedPage.cs

Donc, en définissant "UseBottomNavigation" dans XAML, la barre d'onglets en bas s'affichera sur Android et iOS (comme c'est déjà le cas pour une TabbedPage), n'est-ce pas ?

Génial :D ! Cette amélioration fait-elle déjà partie du dernier package NuGet de pré-version ? Et sinon, une ETA à ce sujet ?

@niels9001 et @PureWeen J'ai installé la mise à niveau des formulaires xamarin 3.1.0.506097 pour la version 2. Semble fonctionner maintenant, mais ai-je raison de penser que ce n'est pas encore disponible là-bas ?

Toute chance que quelqu'un puisse expliquer le processus de fusion des cartes (sur la colonne fermée terminée, etc.) dans la nuit à partir d'ici https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124?

Aussi comment est-ce que ce conseil se rapporte? https://github.com/xamarin/Xamarin.Forms/projects/6

Merci!

ok a parcouru les demandes de tirage et a fini par le faire pour le faire fonctionner sur xamarin.forms

private Xamarin.Forms.TabbedPage __bottomBarPage;
        private INavigationService __navigationService;
        private Page __currentPage;

        public BottomTabBarPageBuilder(INavigationService navigationService)
        {
            __navigationService = navigationService;
            __bottomBarPage = new Xamarin.Forms.TabbedPage();
            __bottomBarPage.BarTextColor = (Color)App.Current.Resources["tile2"]; // Setting Color of selected Text and Icon
            __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
            // You can only define the color for the active icon if you set the Bottombar to fixed mode
            //__bottomBarPage.Navigation..FixedMode = true;
        }|

peu importe le mon code mais la partie principale est __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); est-ce la bonne façon?

Oui c'est le bon chemin. C'est une chose spécifique à la plate-forme, il suffit donc de le définir avant que le contrôle ne soit rendu.

Hé, cela prend-il en charge le mode fixe ?! je ne trouve pas comment le régler

@maherzaidoune pas encore.
J'avais un peu étudié la mise en œuvre initiale, mais j'ai décidé de le laisser pour la prochaine version.

Juste pour être clair, vous en parlez, n'est-ce pas?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

Je suis un peu perplexe. Où sommes-nous censés définir le ToolBarPlacement ?

`espace de noms Test.Mobile.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
Classe partielle publique TestPage : Xamarin.Forms.TabbedPage
{

    public Test()
    {
        InitializeComponent();

        On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

    }`

Comme ça?

@PureWeen Comment fonctionne On<Android>().SetElevation(); ? J'ai essayé de le définir avec une valeur flottante mais je ne vois aucun effet. Je voulais laisser tomber une ombre pour faire la distinction entre le contenu de la page et la barre inférieure.

@niels9001 oui

Est-ce que ça marche pour toi ?

@PureWeen Non,

Exception non-gérée:
System.TypeLoadException : impossible de résoudre le type avec le jeton 0100008e (de typeref, class/assembly Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null) s'est produit

Je suis ébahi. Brillant. @PureWeen Merci beaucoup pour cela.

@PureWeen Veuillez me faire savoir si je peux aider à la mise en œuvre du badge.

@niels9001 cette erreur signifie généralement que quelque chose n'est pas synchronisé avec les bibliothèques. Pouvez-vous supprimer tous vos dossiers obj/bin et vous assurer que la même version de Xam Forms est installée partout ?

https://forums.xamarin.com/discussion/83410/could-not-resolve-type-with-token-01000012

@PureWeen Merci, cela a fonctionné :) !

Comment définir la couleur d'arrière-plan de toute la barre ? Ou activer une ombre portée ?

Si la page enfant (onglet) de la TabbedPage inférieure est une NavigationPage, elle et son contenu (ContentPage avec ScrollView) sont affichés sous la barre d'onglets. (3.1-pré3)

Bon travail!
Mais pourquoi 5 enfants c'est le max ? Il plante quand j'essaye d'en rajouter.

5 est défini comme nombre maximal d'articles dans Android.
voir https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java

Oh je vois. Merci!
C'est triste :/

Oui, j'ai fait des allers-retours avec la meilleure façon d'aider l'utilisateur avec cela. Si vous regardez, il existe un GetMaxCount que vous pouvez appeler et qui renvoie pour le moment un 5 pour les onglets du bas et un int max pour les onglets du haut. Je vais voir si je peux propager un message d'erreur plus utile :-)

@bdgza

Merci d'avoir signalé. J'ai créé un problème pour cela
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColor ne semble pas fonctionner pour changer la couleur d'arrière-plan de la barre lorsqu'elle est placée en bas sur Android ?

@niels9001 avez-vous une reproduction pour ça par hasard ?

j'ai testé et pour moi ça marche

Hé, est-il possible de désactiver cette animation lors du changement de page ? Je ne veux pas dire l'animation d'icônes mais cette animation de transition

edit : je voudrais aussi demander si je veux les derniers changements de ceci, dois-je utiliser des builds nocturnes ou une préversion ? car il semble que pre4 soit plus récent que la version actuelle de la nuit

@dstarec un nouveau nightly pour 3.2 est disponible sur myget

Actuellement, il n'y en a pas, mais ce que vous demandez est pour cela
https://github.com/xamarin/Xamarin.Forms/issues/2948
droit?

@PureWeen
oui, on dirait que c'est

@PureWeen
Comment désactiver le mode Shift à ce sujet ?

J'ai extrait le code de James ici à partir d'ici : https://montemagno.com/remove-shifting-bottomnavigationview-android/

Ajout d'un moteur de rendu personnalisé pour Android, mais je ne peux pas l'appeler ainsi, car je ne connais pas l'ID de la vue de navigation inférieure :

var bottomNavigation = FindViewById(Resource.Id.bottom_navigation);
bottomNavigation.SetShiftMode(false, false);

ÉDITER:
La seule façon dont j'ai pu le faire jusqu'à présent est de parcourir de manière récursive les vues dans ViewGroup pour trouver BottomNavigationView.

Une solution pour supprimer le mode de changement de vitesse ?

@LynoDesu @amrkamal1993 abordera dans une prochaine version
https://github.com/xamarin/Xamarin.Forms/issues/3083

@ amrkamal1993 J'ai

@amrkamal1993 @maherzaidoune
Voir l'essentiel ici :
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesu Comment puis-je implémenter le mode de décalage désactivé ? j'ai utilisé votre code mais rien n'a changé

Comment l'avez-vous implémenté ? Avec mon code, vous devez utiliser le contrôle personnalisé BottomNavTabPage au lieu de TabbedPage :

<?xml version="1.0" encoding="utf-8" ?> <controls:BottomNavTabPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:MyProject.App.Views;assembly=MyProjects.App" xmlns:controls="clr-namespace:MyProject.App.Controls;assembly=MyProjects.App" x:Class="MyProject.App.Views.MainTabPage" Title=""> <views:NewsFeed></views:NewsFeed> <views:Rewards></views:Rewards> <views:Nominations></views:Nominations> <views:Notifications></views:Notifications> </controls:BottomNavTabPage>

Comment puis-je ajouter du texte de badge dans l'onglet inférieur ?

@LynoDesu merci ça marche enfin !! ^_^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
cela peut t'aider :)

@amrkamal1993 : merci, mais j'essaye ce plugin. Il n'ajoute pas de texte de badge lorsque j'utilise la barre inférieure.

L' onglet

@amrkamal1993 lorsque j'ai ().SetToolbarPlacement(ToolbarPlacement.Bottom). Il ne rend pas le texte du badge. Je supprime ce réglage en bas. Il affichera le texte du badge

autre chose sur le texte du badge ?

@LynoDesu Génial ! Votre solution vient de m'aider à faire ma journée ! Merci!

J'ai essayé de mettre à jour Xamarin.Forms vers la dernière version et j'obtiens cette erreur lorsque j'essaie de définir le ToolbarPlacement dans ma classe TabbedPage :

Exception non-gérée:

System.TypeLoadException : impossible de résoudre le type avec le jeton 01000029 (de typeref, class/assembly Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null) ocurrió

Je ne sais pas ce que je fais de mal, je pense que cette erreur est liée aux versions des packages nuget. Que puis-je faire pour le résoudre ?

@aalbendin cela se produira si quelque chose est obsolète ou ne

Un utilisateur plus haut avait le même problème et cela l'a résolu pour eux

https://github.com/xamarin/Xamarin.Forms/issues/1675#issuecomment-395211876

est-ce disponible sur la version stable 3.1.0.583944 ? J'ai ajouté le On

Quelqu'un d'autre essaie de masquer la TabbedNavigationBar ? J'ai un problème sur Android si je règle le VisibiltyStates.Gone sur le BottomNavigationView la vue n'est pas complètement ignorée :

@ 15mpm15 ce problème est semi-lié à
https://github.com/xamarin/Xamarin.Forms/issues/3055

Le ViewPager qui affiche le contenu prend en compte la hauteur de la barre de navigation inférieure afin que le contenu ne soit pas caché derrière. Pour que ce contenu soit repris, il doit redisposer le visualiseur, mais il n'y a rien pour le moment qui surveille cette visibilité et ce changement

Quel est votre cas d'utilisation ? Pourriez-vous plutôt pousser une page modale sur la pile afin qu'elle recouvre simplement tout l'écran au lieu d'essayer de masquer la barre de navigation inférieure ?

@PureWeen Merci pour la réponse ! Malheureusement, l'utilisation de pages modales casse la conception du client, je devra donc trouver une solution.

@ 15mgm15 si vous utilisez une barre de navigation supérieure, fait-elle la même chose ? Ou cela ne se produit-il qu'avec la barre de navigation inférieure ?

@PureWeen En fait, c'est un bon point, laissez-moi vérifier et vous le faire savoir.

@PureWeen En utilisant la barre de tav normale, tout fonctionne comme prévu, le TabLayout du TabbedPageRenderer est masqué ou affiché à notre guise. Mais j'ai essayé de régler la hauteur à 0 sur les paramètres de mise en page et cela a fonctionné !

BottomNavigationView _bottomBar;
...
if (_extendedTabbedPage.BottomTabBarHidden) { _layoutParams.Height = 0; _bottomBar.LayoutParameters = _layoutParams; } else { _layoutParams.Height = _bottomBarHeight; _bottomBar.LayoutParameters = _layoutParams; }

Hé c'est bon à entendre !! Une fois que https://github.com/xamarin/Xamarin.Forms/issues/3055 est corrigé, j'espère que cela atténuera un peu certaines des parties difficiles

@cassionandi avez-vous toujours des problèmes? Si vous définissez l'emplacement de la barre de navigation dans votre constructeur ou utilisez XAML, vous ne devriez pas avoir de problèmes

Si vous ne définissez pas d'étiquette et uniquement l'icône, les icônes ne sont pas alignées verticalement au centre. Ça a l'air bizarre, comme s'il manquait une étiquette.

Est-ce un comportement attendu ? Ce serait bien si les icônes seraient au centre (comme l'application Outlook sur Android).

Je pense qu'il me manque quelque chose. J'ai mis à jour Xamarin Forms vers la version 3.1.0.583944 mais j'obtiens deux erreurs sur la ligne On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

Le nom ToolbarPlacement' n'existe pas dans le contexte actuel

et

Erreur CS1061 : 'IPlatformElementConfiguration' ne contient pas de définition pour 'SetToolbarPlacement' et aucune méthode d'extension 'SetToolbarPlacement' acceptant un premier argument de type 'IPlatformElementConfiguration' pourrait être trouvé

Aucune suggestion?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

?

Si quelqu'un souhaite ignorer l' événement ajouter des badges aux onglets ou masquer BottomNavigationView, voici un exemple :

https://gist.github.com/15mgm15/76914bf623e33676252864ac1898e7f9

@bverp Fermez VS, supprimez les dossiers obj et bin et redémarrez le projet. Cela devrait fonctionner, du moins pour moi.

@niels9001 qui n'a pas fonctionné pour moi. @bverp l' avez-vous fait fonctionner? J'ai essayé de télécharger et de créer ce projet, mais j'obtiens l'erreur : le nom ToolbarPlacement' n'existe pas dans le contexte actuel
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

Je fais un peu ma noix - est-ce que quelqu'un a le temps de m'aider?
J'ai essayé un certain nombre de choses pour obtenir les onglets inférieurs dans Android, y compris les deux options de ce lien. Quoi que je fasse, ma solution ne reconnaît pas la mise à jour.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
J'ai la version 3.1.0.637273 des formulaires (et j'ai également essayé les 5 dernières versions/prereleases).
J'ai nettoyé, construit, reconstruit, supprimé les répertoires bin/obj - je n'arrive pas du tout à voir cette mise à jour, peu importe ce que je fais.

Par exemple, ceci est mon XAML actuel

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ProjName"
             x:Class="ProjName.MainPage"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="Black"
            android:TabbedPage.BarSelectedItemColor="Red">
    <local:LoginPage Title="Favorites" Icon="ic_favorites.png" />
    <local:LoginPage Title="Friends" Icon="ic_friends.png" />
    <local:LoginPage Title="Nearby" Icon="ic_nearby.png" />
    <local:LoginPage Title="Recents" Icon="ic_recents.png" />
    <local:RegistrationPage Title="Restaurants" Icon="ic_restaurants.png" />
</TabbedPage>

et le résultat est

Aucune propriété, propriété pouvant être liée ou événement trouvé pour 'ToolbarPlacement', ou type incompatible entre la valeur et la propriété.

Problème similaire en le faisant par programmation - il ne reconnaît tout simplement pas cette mise à jour.

Je suis sur Windows VS, j'utilise Android 8.1 pour les tests, et c'est un projet partagé plutôt que .net. Si quelqu'un peut me dire ce qui me manque, ça me ferait très plaisir.

@pureween ?

@taramasalata confirme que tous vos projets utilisent la version la plus récente de 3.1.0. Quelque chose ne correspond pas.

Vous pouvez également consulter mon exemple de projet ici : https://github.com/davidortinau/TheLittleThingsPlayground

J'ai également confirmé que je pouvais faire les onglets du bas d'un projet partagé sans erreur. Projet:
App25.zip

@davidortinau Merci de votre aide. J'ai essayé des variantes de cela dans 8 solutions différentes. J'ai mis à jour tous les projets vers 3.1.0 et tout vérifié trois fois. J'ai vérifié l'onglet "mises à jour" pour chacun à plusieurs reprises, ils sont tous à jour. Je ne vois pas quoi essayer d'autre. J'essaierai vos exemples de projets dans la matinée et je vous répondrai. Je devrais peut-être essayer de réinstaller VS.

Votre app25 ne générera pas d'erreur : aucune propriété, propriété pouvant être liée ou événement trouvé pour 'ToolbarPlacement', ou type de non-correspondance entre la valeur et la propriété.

Es-tu sous Windows ou Mac ?

Je vais essayer une réinstallation complète de VS maintenant, je ne peux vraiment pas penser à quoi d'autre essayer

Nan. Aucune joie avec une nouvelle installation, exécutant App25. C'est tellement frustrant.
erreur : Position 6:13. Aucune propriété, propriété pouvant être liée ou événement trouvé pour 'ToolbarPlacement', ou type incompatible entre la valeur et la propriété.

Y a-t-il des packages dont j'ai besoin pour cela à côté de Xamarin.Forms ?

Hmm quelque chose dans votre chaîne d'outils de construction ne va pas tout à fait @taramasalata
Peut-être définir la sortie de construction sur verbeux pour voir les messages ? Vérifiez votre SDk Android et assurez-vous d'avoir les derniers outils de build ? Installer 4.7.1 sdk voir si cela résout? supprimer tous vos nugets Xamarin.forms mis en cache
c:utilisateurs.nuget

Utilisez quelque chose comme ILSpy ou dotpeek pour regarder les dll dans votre répertoire de débogage et vérifier la version ou voir si vous pouvez trouver ces valeurs là-dedans ?

Essayer une approche de base de code au lieu de XAML ?

Merci @pureween. J'ai essayé à la fois basé sur le code et xaml. J'ai également essayé de réinstaller VS et j'ai également essayé la version "aperçu". Il est probable que ma désinstallation/réinstallation n'ait pas supprimé les fichiers .nuget. Je vais essayer toutes vos suggestions maintenant.

Après avoir réinstallé tout Android, cela fonctionne maintenant. Merci beaucoup à tous !

Q rapide ai-je raison de penser que cela ne fonctionnera que sur Android 8.1 ?

Salut @taramasalata. J'ai eu un problème similaire et il a été résolu en suivant les étapes suivantes :

• Supprimer tous les dossiers "bin" et "obj" de mon application
• Cliquez sur "Nettoyer la solution"
• Redémarrer Visual Studio
• Cliquez sur "Reconstruire la solution".

@taramasalata YAY !!!! Il devrait fonctionner sur n'importe quel appareil avec au moins API 15

En construisant cela, j'ai testé contre API 15, 19, 23, 27

Faire travailler les couleurs de teinte sur 19 et 15 était vraiment amusant

@taramasalata oui, je l'ai fait fonctionner après avoir ajouté using Xamarin.Forms.PlatformConfiguration.AndroidSpecific et redémarré VS et nettoyé la solution.

Lorsqu'il est utilisé sur le dessus, fonctionne avec 6 enfants. Quand est en bas, juste 5.
L'application se bloque avec le message "Java.Lang.IllegalArgumentException :"

@marcelinhavt oui, c'est une limitation Android.

Le BottomNavBar dans Android ne prend en charge que 5 éléments et il n'y a vraiment de toute façon pas pour nous de contourner ce problème

@PureWeen oh... je ne savais pas. Merci... je vais essayer d'écrire un rendu pour étendre

@marcelinhavt, donc ce que je veux dire, c'est que la BottomNavigationBar dans Android ne prend pas en charge plus de 5 éléments. Ce n'est pas une limitation imposée par notre conception

Existe-t-il un moyen de définir l'élévation dans la barre d'onglets inférieure ?

J'ai un nouveau problème de limitation Android même si je n'ai que 5 onglets, l'application plante

@amrkamal1993 si vous pouviez créer une reproduction et un nouveau problème, nous pourrons, espérons-le, résoudre le problème

@PureWeen merci PureWeen, l'exception se produit lorsque j'ajoute une icône de titre dans la barre d'outils, j'ai l'onglet inférieur et la barre d'outils, est-ce un problème qui n'est pas géré

@ amrkamal1993 tout le code de test que nous avons pour l'onglet inférieur utilise des icônes.

Pouvez-vous poster une reproduction ou un code que je peux tester pour voir si je peux recréer le crash ?