Xamarin.forms: [Mejora] Android: TabbedPage: Barra de pestañas inferior

Relacionado # 1400

Hola, acabo de abrir una solicitud de extracción sobre este tema. Tengo algunas preguntas sobre la implementación, pero es un punto de partida.
El mapeo era bastante obvio.

Realmente estoy deseando que esta solicitud de extracción se fusione en Xamarin Forms. ¿Hay una ETA o algo así? No he encontrado ninguna solución viable para tener una página con pestañas en la parte inferior de Android.

@mikescandy ¿ alguna actualización sobre esto?

¡Finalmente, estoy mirando lejos a esto por tanto tiempo!
¡Muchas gracias!

¿Cuándo se implementará esta mejora?

+1
¿Puedo ponerlo en construcción nocturna? cc @PureWeen @davidortinau

Y, ¿cómo funciona? ¿Podemos configurarlo también en el XAML de nuestra aplicación Forms (como una propiedad de TabbedPage)?

@netonjm Creo que es solo un apoyo "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/abbedCompat/enderer.

pero no estoy seguro de los detalles (iconos y colores).

Soy yo :-)

UPS

@ niels9001 puede ver todas las opciones para configurar los iconos, etc. aquí

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

Entonces, al configurar "UseBottomNavigation" en XAML, mostrará la barra de pestañas en la parte inferior en Android e iOS (como ya lo hace para una TabbedPage), ¿verdad?

Impresionante: D! ¿Esta mejora ya forma parte del último paquete NuGet de versión preliminar? Y si no, ¿alguna ETA sobre esto?

@ niels9001 y @PureWeen He instalado los formularios xamarin 3.1.0.506097 actualizando para la versión 2. Parece estar funcionando ahora, pero ¿tengo razón al pensar que todavía no está disponible?

¿Alguna posibilidad de que alguien pueda explicar el proceso de cuando las tarjetas (en la columna cerrada hecha, etc.) se fusionan en la noche desde aquí https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124?

Además, ¿cómo se relaciona este tablero? https://github.com/xamarin/Xamarin.Forms/projects/6

¡Gracias!

ok pasó por las solicitudes de extracción y terminó haciendo esto para que funcione en 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;
        }|

no importa mi código, pero la parte principal es __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); es esta la manera correcta?

Sí, esa es la forma correcta. Es algo específico de la plataforma, por lo que solo necesita configurarlo antes de que se procese el control.

oye, ¿esto es compatible con el modo fijo? no puedo encontrar una manera de configurarlo

@maherzaidoune todavía no.
Había estudiado un poco la implementación inicial, pero decidí dejarlo para la próxima versión.

Para que quede claro, estás hablando de esto, ¿verdad?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

Estoy un poco perplejo. ¿Dónde se supone que debemos establecer ToolBarPlacement?

`espacio de nombres Test.Mobile.Views
{
[XamlCompilation (XamlCompilationOptions.Compile)]
TestPage de clase parcial pública: Xamarin.Forms.TabbedPage
{

    public Test()
    {
        InitializeComponent();

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

    }`

¿Como esto?

@PureWeen ¿Cómo funciona On<Android>().SetElevation(); ? Intenté configurarlo con algún valor flotante pero no veo ningún efecto. Quería dejar un poco de sombra para distinguir entre el contenido de la página y la barra inferior.

@ niels9001 sí

¿Te está funcionando bien?

@PureWeen No, recibo este error en MainPage.xaml.g.cs (que es una vista MasterDetail, y TabbedPage está en la parte de detalles)

Excepción no controlada:
System.TypeLoadException: no se pudo resolver el tipo con el token 0100008e (de typeref, clase / ensamblado Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version = 2.0.0.0, Culture = neutral, PublicKeyToken = null) ocurrió

Estoy asombrado. Brillante. @PureWeen Muchas gracias por esto.

@PureWeen Por favor, avíseme si puedo ayudar con la implementación de Badge.

@ niels9001 ese error generalmente significa que algo no está sincronizado con las bibliotecas. ¿Puede eliminar todas sus carpetas obj / bin y asegurarse de tener la misma versión de Xam Forms instalada en todas partes?

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

@PureWeen Gracias, funcionó :)!

¿Cómo establecemos el color de fondo de toda la barra? ¿O habilitar una sombra?

Si la página secundaria (pestaña) de la TabbedPage inferior es una NavigationPage, entonces ella y su contenido (ContentPage con ScrollView) se representan debajo de la barra de pestañas. (3.1-pre3)

¡Buen trabajo!
Pero, ¿por qué 5 niños es el máximo? Se bloquea cuando intento agregar más.

5 se establece como recuento máximo de elementos en Android.
ver https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java

Oh ya veo. ¡Gracias!
Eso es triste :/

Sí, fui de ida y vuelta con la mejor manera de ayudar al usuario con eso. Si observa que hay un GetMaxCount al que puede llamar, que en este momento solo devuelve un 5 para las pestañas inferiores y un máximo int para las pestañas superiores. Veré si puedo propagar un mensaje de error más útil :-)

@bdgza

Gracias por informar. Creé un problema para esto
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColor no parece funcionar para cambiar el color de fondo de la barra cuando se coloca en la parte inferior en Android?

@ niels9001 ¿tienes una reproducción de eso por casualidad?

Lo probé y para mi funciona

oye, ¿es posible desactivar esa animación al cambiar de página? No me refiero a la animación de iconos, sino a la animación de transición.

editar: también me gustaría preguntar si quiero los últimos cambios de esto, ¿debo usar compilaciones nocturnas o prelanzamiento? porque parece que pre4 es más nuevo que la compilación actual de nighlty

@dstarec una nueva noche para 3.2 está en myget

Actualmente no hay, pero lo que estás pidiendo es esto.
https://github.com/xamarin/Xamarin.Forms/issues/2948
¿Derecha?

@PureWeen
si, parece que lo es

@PureWeen
¿Cómo desactivo el modo Shift en esto?

He extraído el código de James aquí desde aquí: https://montemagno.com/remove-shifting-bottomnavigationview-android/

Se agregó un renderizador personalizado para Android, pero no puedo llamarlo así, porque no conozco el ID de la vista de navegación inferior:

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

EDITAR:
La única forma en que he podido hacerlo hasta ahora es recorrer recursivamente las Vistas en ViewGroup para encontrar BottomNavigationView.

¿Alguna solución para eliminar el modo de cambio?

@LynoDesu @ amrkamal1993 abordará en un próximo lanzamiento
https://github.com/xamarin/Xamarin.Forms/issues/3083

@ amrkamal1993 Lo he

@ amrkamal1993 @maherzaidoune
Vea la esencia aquí:
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesu ¿Cómo puedo implementar la desactivación del modo de cambio? Usé tu código pero nada cambió

¿Cómo lo has implementado? Con mi código, debe usar el control personalizado BottomNavTabPage en lugar 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>

¿Cómo puedo agregar el texto de la insignia en la pestaña inferior?

@LynoDesu gracias por fin funciona !! ^ _ ^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
esto puede ayudarte :)

@ amrkamal1993 : gracias, pero pruebo este complemento. No agrega texto de insignia cuando uso la barra inferior.

La pestaña

@ amrkamal1993 cuando configuro On() .SetToolbarPlacement (ToolbarPlacement.Bottom). No muestra el texto de la insignia. Elimino esta configuración inferior. Mostrará el texto de la insignia

¿Algo más sobre el texto de la insignia?

@LynoDesu ¡Impresionante! ¡Tu solución me ayudó a alegrarme el día! ¡Gracias!

Intenté actualizar Xamarin.Forms a la última versión y obtengo este error cuando intento configurar ToolbarPlacement en mi clase TabbedPage:

Excepción no controlada:

System.TypeLoadException: no se pudo resolver el tipo con el token 01000029 (de typeref, clase / ensamblado Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version = 2.0.0.0, Culture = neutral, PublicKeyToken = null)

No sé qué estoy haciendo mal, creo que este error está relacionado con las versiones de los paquetes nuget. ¿Qué puedo hacer para solucionarlo?

@aalbendin eso sucederá si algo está desactualizado o simplemente no está construyendo las bibliotecas correctas. Recomendaría eliminar todas sus carpetas bin / obj y luego reconstruir su proyecto y eso debería solucionarlo.

Un usuario más arriba tenía el mismo problema y eso lo resolvió.

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

¿Está disponible en la versión estable 3.1.0.583944? He agregado el On

¿Alguien más está intentando ocultar TabbedNavigationBar? Tengo un problema en Android si configuro VisibiltyStates.Gone en BottomNavigationView la vista no se descarta por completo:

@ 15mgm15 ese problema está semi relacionado con
https://github.com/xamarin/Xamarin.Forms/issues/3055

El ViewPager que muestra el contenido representa la altura de la barra de navegación inferior para que el contenido no se oculte detrás de ella. Para que ese contenido vuelva a ser retomado, tiene que rediseñar el visor, pero ahora no hay nada que vigile esa visibilidad y cambio.

¿Cuál es tu caso de uso? En su lugar, ¿podría insertar una página modal en la pila para que se superponga a toda la pantalla en lugar de intentar ocultar la barra de navegación inferior?

@PureWeen ¡ Gracias por la respuesta! Desafortunadamente, el uso de páginas modales rompe el diseño del cliente, por lo que tendré que encontrar una solución.

@ 15mgm15 si usa una barra de navegación superior, ¿hace lo mismo? ¿O esto solo sucede con la barra de navegación inferior?

@PureWeen En realidad, ese es un buen punto, déjame comprobarlo y te lo

@PureWeen Usando la barra tav normal, todo funciona como se esperaba, el TabLayout del TabbedPageRenderer se oculta o se muestra a nuestro gusto. ¡Pero intenté establecer la altura en 0 en los parámetros de diseño y realmente funcionó!

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

¡¡Oye, es bueno escucharlo !! Una vez que https://github.com/xamarin/Xamarin.Forms/issues/3055 se solucione, espero que suavizará un poco algunas de las partes ásperas

@cassionandi , ¿sigues teniendo problemas? Si configura la ubicación de la barra de navegación en su constructor o usa XAML, no debería tener ningún problema

Si no establece una etiqueta, y solo el icono, los iconos no están alineados en el centro verticalmente. Parece extraño, como si faltara una etiqueta.

¿Es este el comportamiento esperado? Sería bueno si los íconos estuvieran en el centro (como la aplicación Outlook en Android).

Creo que me estoy perdiendo algo. Actualicé Xamarin Forms a la versión 3.1.0.583944 pero obtengo dos errores en la línea On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

El nombre ToolbarPlacement 'no existe en el contexto actual

y

Error CS1061: 'IPlatformElementConfiguration'no contiene una definición para' SetToolbarPlacement 'y ningún método de extensión' SetToolbarPlacement 'aceptando un primer argumento de tipo' IPlatformElementConfiguration' pudo ser encontrado

¿alguna sugerencia?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

?

Si alguien quiere anular el evento agregar insignias a las pestañas o quiere ocultar el BottomNavigationView, aquí hay un ejemplo:

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

@bverp Cierre VS, elimine la carpeta obj y bin y reinicie el proyecto. Eso debería funcionar, al menos a mí me funcionó.

@ niels9001 que no funcionó para mí. @bverp, ¿lo hiciste funcionar? Intenté descargar y construir este proyecto, pero aparece el error: El nombre ToolbarPlacement 'no existe en el contexto actual
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

Estoy haciendo mi nuez un poco, ¿alguien tiene tiempo para ayudar?
Intenté varias cosas para obtener pestañas inferiores en Android, incluidas ambas opciones en este enlace. Haga lo que haga, mi solución no reconoce la actualización.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
Tengo formularios de la versión 3.1.0.637273 (y también he probado los últimos 5 lanzamientos / prelanzamientos).
He limpiado, construido, reconstruido, eliminado los directorios bin / obj; parece que no puedo ver esta actualización en absoluto, sin importar lo que haga.

Por ejemplo, este es mi XAML actual

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

y el resultado es

No se ha encontrado ninguna propiedad, propiedad enlazable o evento para 'ToolbarPlacement', o un tipo que no coincida entre el valor y la propiedad.

Problema similar al hacerlo programáticamente: simplemente no reconoce esa actualización.

Estoy en Windows VS, usando 8.1 Android para realizar pruebas, y es un proyecto compartido en lugar de .net. Si alguien me pudiera decir lo que me estoy perdiendo, me haría muy feliz.

@pureween?

@taramasalata confirma que todos sus proyectos utilizan la versión más reciente de 3.1.0. Algo no coincide.

También puede consultar mi proyecto de muestra aquí: https://github.com/davidortinau/TheLittleThingsPlayground

También confirmé que podía hacer las pestañas inferiores de un proyecto compartido sin errores. Proyecto:
App25.zip

@davidortinau Gracias por ayudar. He probado variaciones de esto en 8 soluciones diferentes. Actualicé todos los proyectos a 3.1.0 y verifiqué todo tres veces. He revisado la pestaña "actualizaciones" de cada una de ellas repetidamente, todas están actualizadas. No puedo pensar qué más intentar. Probaré sus proyectos de muestra por la mañana y me pondré en contacto con usted. Tal vez debería intentar reinstalar VS.

Su app25 no se compilará con el error: no se encontró propiedad, propiedad enlazable o evento para 'ToolbarPlacement', o el tipo no coincide entre el valor y la propiedad.

¿Estás en Windows o Mac?

Voy a intentar una reinstalación completa de VS ahora realmente no puedo pensar qué más probar

No. No hay alegría con una nueva instalación, ejecutando App25. Esto es tan frustrante.
error: Posición 6:13. No se ha encontrado ninguna propiedad, propiedad enlazable o evento para 'ToolbarPlacement', o un tipo que no coincida entre el valor y la propiedad.

¿Hay algún paquete que necesite para esto además de Xamarin.Forms?

Hmm, algo en su cadena de herramientas de construcción simplemente no está del todo bien @taramasalata
¿Quizás establecer el resultado de la compilación en detallado para ver algún mensaje? Compruebe su Sdk de Android y asegúrese de tener las últimas herramientas de compilación. Instale 4.7.1 sdk y vea si eso se resuelve. eliminar todos los nugets de Xamarin.forms en caché
c: usuarios.nuget

¿Usa algo como ILSpy o dotpeek para mirar los dlls en su directorio de depuración y verificar la versión o ver si puede encontrar esos valores allí?

¿Probar un enfoque de base de código en lugar de XAML?

Gracias @pureween. Probé tanto basado en código como xaml. También intenté reinstalar VS y también probé la versión de "vista previa". Sin embargo, es probable que mi desinstalación / reinstalación no elimine los archivos .nuget. Probaré todas tus sugerencias ahora.

Habiendo reinstalado todas las cosas de Android, esto ahora funciona. ¡Muchas gracias a todos!

Pregunta rápida, ¿tengo razón al pensar que esto solo se ejecutará en Android 8.1 hasta?

Hola @taramasalata. Tuve un problema similar y se solucionó siguiendo los siguientes pasos:

• Eliminando todas las carpetas "bin" y "obj" de mi aplicación
• Haga clic en "Solución limpia"
• Reinicie Visual Studio
• Haga clic en "Reconstruir solución".

@taramasalata YAY !!!! Debe ejecutarse en cualquier dispositivo con al menos API 15

Al construir esto, probé contra API 15, 19, 23, 27

Hacer que los colores de tinte funcionen en 19 y 15 fue realmente divertido

@taramasalata sí, lo using Xamarin.Forms.PlatformConfiguration.AndroidSpecific y reiniciar VS y limpiar la solución.

Cuando se usa en la parte superior, funciona con 6 niños. Cuando está en la parte inferior, solo 5.
La aplicación se bloquea con el mensaje "Java.Lang.IllegalArgumentException:"

@marcelinhovt sí, esa es una limitación de Android.

El BottomNavBar en Android solo admite 5 elementos y realmente no hay forma de que podamos evitar esto

@PureWeen oh ... no lo sabía. Gracias ... Intentaré escribir algún render para extender

@marcelinhovt, así que lo que quiero decir es que, de forma nativa, BottomNavigationBar en Android no admite más de 5 elementos. Esa no es una limitación impuesta por nuestro diseño.

¿Hay una forma de establecer la elevación en la barra de pestañas inferior?

Tengo un nuevo problema en la limitación de Android, incluso si solo tengo 5 pestañas, la aplicación se bloquea

@ amrkamal1993 si pudiera crear una reproducción y un nuevo problema, con suerte podemos abordar el problema

@PureWeen gracias a PureWeen, la excepción ocurre cuando agrego el ícono del título en la barra de herramientas, tengo la pestaña inferior y la barra de herramientas, es un problema que no se maneja

@ amrkamal1993 todo el código de prueba que tenemos para la pestaña inferior usa íconos.

¿Puedes publicar una reproducción o un código que pueda probar para ver si puedo recrear el bloqueo?