Xamarin.forms: [Aprimoramento] Android: TabbedPage: Barra da guia inferior

Relacionado # 1400

Olá, acabei de abrir uma solicitação pull sobre esse problema. Tenho algumas dúvidas sobre a implementação, mas é um ponto de partida.
O mapeamento era bastante óbvio.

Estou realmente ansioso para que esta solicitação de pull seja mesclada com o Xamarin Forms. Existe um HEC ou algo assim. Não encontrei nenhuma solução viável para ter uma página com guias na parte inferior do Android.

@mikescandy alguma atualização sobre isso?

Finalmente, estou olhando para isso por tanto tempo!
Muito obrigado!

Quando esse aprimoramento será lançado?

+1
posso obtê-lo na construção noturna? cc @PureWeen @davidortinau

E como isso funciona? Podemos defini-lo no XAML de nosso aplicativo Forms também (como uma propriedade de TabbedPage)?

@netonjm Acho que é apenas um adereço "UseBottomNavigation" https://github.com/mikescandy/Xamarin.Forms/blob/27c6da20b0ade7f96c0fd889f00c96b7e4db1fcc/Xamarin.Forms.Platform.Android/AppcsLorms.Platform.Android/AppcsLorms.Platform.Android/AppcsCompat/Tabbeder

mas não tenho certeza dos detalhes (ícones e cores).

Sou eu :-)

opa

@ niels9001 você pode ver todas as opções para configurar os ícones etc. aqui

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

Portanto, ao definir "UseBottomNavigation" em XAML, ele mostrará a barra de guias na parte inferior do Android e iOS (como já faz para uma TabbedPage), certo?

Incrível: D! Este aprimoramento já faz parte do pacote NuGet de pré-lançamento mais recente? E se não, algum HEC sobre isso?

@ niels9001 e @PureWeen Instalei o xamarin forms 3.1.0.506097 atualização para a versão 2. Parece estar funcionando agora, mas estou certo em pensar que ainda não está disponível lá?

Alguma chance de alguém poder explicar o processo de quando os cartões (na coluna fechada concluída, etc.) são mesclados no noturno a partir daqui https://github.com/xamarin/Xamarin.Forms/projects/2#card -8921124?

Além disso, como esta placa se relaciona? https://github.com/xamarin/Xamarin.Forms/projects/6

obrigado!

ok passou pelas solicitações pull e acabou fazendo isso para fazê-lo funcionar no 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;
        }|

esqueça o meu código, mas a parte principal é __bottomBarPage.On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); este é o caminho certo?

Sim, esse é o caminho certo. É uma coisa específica da plataforma, então só precisa definir isso antes de o controle ser renderizado.

Ei, isso é compatível com o modo fixo?! não consigo encontrar uma maneira de configurá-lo

@maherzaidoune ainda não.
Eu havia olhado um pouco para a implementação inicial, mas decidi deixar para a próxima versão.

Só para deixar claro que você está falando sobre isso, certo?
https://stackoverflow.com/questions/41649494/how-to-remove-icon-animation-for-bottom-navigation-view-in-android

Estou um pouco confuso. Onde devemos definir o ToolBarPlacement?

`namespace Test.Mobile.Views
{
[XamlCompilation (XamlCompilationOptions.Compile)]
classe pública parcial TestPage: Xamarin.Forms.TabbedPage
{

    public Test()
    {
        InitializeComponent();

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

    }`

Assim?

@PureWeen Como On<Android>().SetElevation(); funciona? Tentei configurá-lo com algum valor flutuante, mas não vejo nenhum efeito. Eu queria lançar alguma sombra para distinguir entre o conteúdo da página e a barra inferior.

@ niels9001 sim

Isso está funcionando para você, ok?

@PureWeen Não, estou recebendo este erro no MainPage.xaml.g.cs (que é uma visualização MasterDetail, e a TabbedPage está na parte Detalhe dela)

Exceção não tratada:
System.TypeLoadException: Não foi possível resolver o tipo com token 0100008e (de typeref, class / assembly Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Versão = 2.0.0.0, Culture = neutral, PublicKeyToken = null) ocorreu

Estou impressionado. Brilhante. @PureWeen Muito obrigado por isso.

@PureWeen Informe se eu puder ajudar na implementação do

@ niels9001 esse erro geralmente significa que algo está fora de sincronia com as bibliotecas. Você pode excluir todas as suas pastas obj / bin e certificar-se de que possui a mesma versão do Xam Forms instalada em todos os lugares?

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

@PureWeen Obrigado, funcionou :)!

Como definimos a cor de fundo de toda a barra? Ou habilitar um dropshadow?

Se a página filho (guia) da TabbedPage inferior for uma NavigationPage, então ela, e seu conteúdo (ContentPage com ScrollView), será renderizado abaixo da barra de guias. (3.1-pre3)

Bom trabalho!
Mas por que 5 filhos é o máximo? Ele trava quando tento adicionar mais.

5 é definido como contagem máxima de itens no Android.
consulte https://android.googlesource.com/platform/frameworks/support.git/+/master/design/src/android/support/design/internal/BottomNavigationMenu.java

Oh, eu vejo. Obrigado!
Isso é triste :/

Sim, eu fui e voltei com a melhor maneira de ajudar o usuário com isso. Se você olhar, há um GetMaxCount que você pode chamar, que agora retorna apenas 5 para as guias inferiores e um máximo de int para as guias superiores. Vou ver se consigo propagar uma mensagem de erro mais útil :-)

@bdgza

Obrigado por relatar. Eu criei um problema para este
https://github.com/xamarin/Xamarin.Forms/issues/2993

@PureWeen BarBackgroundColor não parece funcionar para alterar a cor de fundo da barra quando colocada na parte inferior no Android?

@ niels9001 você tem uma reprodução disso por acaso?

Eu testei e para mim funciona

Ei, é possível desabilitar essa animação ao trocar de página? Não me refiro a animação de ícone, mas aquela animação de transição

editar: também gostaria de perguntar: Se eu quiser as últimas alterações disso, devo usar compilações noturnas ou pré-lançamento? porque parece que o pre4 é mais novo do que a construção atual da noite

@dstarec um novo nightly para 3.2 está disponível no myget

Atualmente não há, mas o que você está pedindo é por isso
https://github.com/xamarin/Xamarin.Forms/issues/2948
direito?

@PureWeen
sim parece que é

@PureWeen
Como eu desativo o modo Shift nisso?

Peguei o código de James aqui: https://montemagno.com/remove-shifting-bottomnavigationview-android/

Adicionou um renderizador personalizado para Android, mas não posso chamá-lo assim, porque não sei o ID da visualização de navegação inferior:

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

EDITAR:
A única maneira que consegui fazer até agora é percorrer recursivamente as Visualizações em ViewGroup para encontrar BottomNavigationView.

Qualquer solução para remover o modo de deslocamento?

@LynoDesu @ amrkamal1993 irá abordar em um próximo lançamento
https://github.com/xamarin/Xamarin.Forms/issues/3083

@ amrkamal1993 Eu

@ amrkamal1993 @maherzaidoune
Veja a essência aqui:
https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

@LynoDesu Como posso implementar o modo de desabilitação de mudança? Eu usei seu código, mas nada mudou

Como você o implementou? Com meu código, você precisa usar o controle personalizado BottomNavTabPage em vez 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>

Como posso adicionar o texto do crachá na guia inferior?

@LynoDesu thx finalmente funciona !! ^ _ ^

@nhdanh https://github.com/xabre/xamarin-forms-tab-badge
isso pode te ajudar :)

@ amrkamal1993 : obrigado, mas tento este plugin. Não adiciona texto de emblema quando uso a barra inferior.

A aba

@ amrkamal1993 quando eu configuro() .SetToolbarPlacement (ToolbarPlacement.Bottom). Não processa o texto do emblema. Eu removo esta configuração inferior. Irá exibir o texto do emblema

mais alguma coisa sobre o texto do emblema?

@LynoDesu Awesome! Sua solução acabou de ajudar a tornar o meu dia! Obrigado!

Tentei atualizar o Xamarin.Forms para a versão mais recente e recebo este erro quando tento definir o ToolbarPlacement na minha classe TabbedPage:

Exceção não tratada:

System.TypeLoadException: Não foi possível resolver o tipo com token 01000029 (de typeref, class / assembly Xamarin.Forms.PlatformConfiguration.AndroidSpecific.ToolbarPlacement, Xamarin.Forms.Core, Version = 2.0.0.0, Culture = neutral, PublicKeyToken = null) ocurrió

Não sei o que estou fazendo de errado, acho que esse erro está relacionado às versões dos pacotes nuget. O que posso fazer para resolver isso?

@aalbendin que acontecerá se algo estiver desatualizado ou simplesmente não estiver construindo as bibliotecas corretas. Eu recomendaria excluir todas as suas pastas bin / obj e, em seguida, reconstruir seu projeto e isso deve corrigi-lo.

Um usuário mais adiante estava tendo o mesmo problema e isso resolveu para eles

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

isso está disponível na versão 3.1.0.583944 estável? Eu adicionei o On

Alguém mais está tentando esconder o TabbedNavigationBar? Estou tendo um problema no Android se definir VisibiltyStates.Gone como BottomNavigationView a visualização não será completamente descartada:

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

O ViewPager que exibe as contas de conteúdo para a altura da barra de navegação inferior para que o conteúdo não fique escondido atrás dela. Para que o conteúdo seja retomado, é necessário refazer o layout do visualizador, mas não há nada agora que preste atenção a essa visibilidade e mudança

Qual é o seu caso de uso? Em vez disso, você poderia colocar uma página modal na pilha de modo que ela apenas sobreponha a tela inteira em vez de tentar ocultar a barra de navegação inferior?

@PureWeen Obrigado pela resposta! infelizmente, usar páginas modais quebra o design do cliente, então terei que encontrar uma solução.

@ 15mgm15 se você usar uma barra de navegação superior, ela faz a mesma coisa? Ou isso só acontece com a barra de navegação inferior?

@PureWeen Na verdade, esse é um bom ponto, deixe-me verificar e informá-lo.

@PureWeen Usando a barra tav normal, tudo funciona como esperado, o TabLayout de TabbedPageRenderer é escondido ou mostrado como quisermos. Mas tentei definir a altura para 0 nos parâmetros de layout e realmente funcionou!

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

Ei, é bom ouvir isso !! Assim que https://github.com/xamarin/Xamarin.Forms/issues/3055 for corrigido, espero que isso suavize um pouco as partes difíceis

@cassionandi você ainda está tendo problemas? Se você definir a localização da barra de navegação em seu construtor ou usar XAML, não deverá ter problemas

Se você não definir um rótulo e apenas o ícone, os ícones não serão alinhados ao centro verticalmente. Parece estranho, como se faltasse um rótulo.

Este é o comportamento esperado? Seria bom se os ícones estivessem no centro (como o aplicativo Outlook no Android).

Acho que estou perdendo alguma coisa. Atualizei o Xamarin Forms para a versão 3.1.0.583944, mas recebo dois erros na linha On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

O nome ToolbarPlacement 'não existe no contexto atual

e

Erro CS1061: 'IPlatformElementConfiguration'não contém uma definição para' SetToolbarPlacement 'e nenhum método de extensão' SetToolbarPlacement 'aceitando um primeiro argumento do tipo' IPlatformElementConfiguration' pode ser encontrado

alguma sugestão?

@bverp

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific

?

Se alguém deseja substituir o evento adicionar emblemas às guias ou deseja ocultar o BottomNavigationView, aqui está um exemplo:

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

@bverp Feche o VS, exclua a pasta obj e bin e reinicie o projeto. Isso deve funcionar, pelo menos funcionou para mim.

@ niels9001 que não funcionou para mim. @bverp conseguiu fazer funcionar? Tentei baixar e construir este projeto, mas recebo o erro: O nome ToolbarPlacement 'não existe no contexto atual
https://github.com/15mgm15/XamarinFormsBottomTabbedPage

Estou mexendo um pouco - alguém tem tempo para ajudar?
Tentei várias coisas para obter as guias inferiores no Android, incluindo as duas opções neste link. Faça o que fizer, minha solução não reconhece a atualização.
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/
Tenho a versão 3.1.0.637273 do forms (e também tentei os últimos 5 lançamentos / pré-lançamentos).
Limpei, construí, reconstruí, apaguei os diretórios bin / obj - não consigo ver essa atualização, não importa o que eu faça.

Por exemplo, este é meu XAML atual

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

e o resultado é

Nenhuma propriedade, propriedade vinculável ou evento encontrado para 'ToolbarPlacement' ou tipo incompatível entre valor e propriedade.

Problema semelhante ao fazê-lo programaticamente - ele simplesmente não reconhece essa atualização.

Estou no Windows VS, usando o Android 8.1 para testes, e é um projeto compartilhado em vez de .net. Se alguém puder me dizer o que estou perdendo, me deixaria muito feliz.

@pureween?

@taramasalata confirma se todos os seus projetos estão usando a versão mais recente 3.1.0. Algo não está combinando.

Você também pode verificar meu projeto de amostra aqui: https://github.com/davidortinau/TheLittleThingsPlayground

Também confirmei que poderia fazer as guias inferiores de um projeto compartilhado sem erros. Projeto:
App25.zip

@davidortinau Obrigado por ajudar. Tentei variações disso em 8 soluções diferentes. Eu atualizei todos os projetos para 3.1.0 e verifiquei tudo três vezes. Eu verifiquei a guia "atualizações" para cada um repetidamente, eles estão todos atualizados. Não consigo pensar no que mais tentar. Tentarei seus projetos de amostra pela manhã e entrarei em contato com você. Talvez eu deva tentar reinstalar o VS.

Seu app25 não será compilado com erro: nenhuma propriedade, propriedade vinculável ou evento encontrado para 'ToolbarPlacement' ou tipo incompatível entre valor e propriedade.

Você está no Windows ou Mac?

Vou tentar uma reinstalação completa do VS agora, realmente não consigo pensar no que mais tentar

Não. Sem alegria com a nova instalação, executando o App25. Isso é tão frustrante.
erro: Posição 6:13. Nenhuma propriedade, propriedade vinculável ou evento encontrado para 'ToolbarPlacement' ou tipo incompatível entre valor e propriedade.

Preciso de mais algum pacote para isso além do Xamarin.Forms?

Hmm, algo em sua cadeia de ferramentas de construção simplesmente não está certo @taramasalata
Talvez defina a saída da compilação como detalhada para ver as mensagens? Verifique seu SDK do Android e certifique-se de ter as ferramentas de compilação mais recentes? Instale o sdk 4.7.1 e veja se isso resolve? exclua todos os seus nugets Xamarin.forms em cache
c: usuários.nuget

Use algo como ILSpy ou dotpeek para olhar as dlls em seu diretório de depuração e verificar a versão ou veja se você pode encontrar esses valores lá?

Tentar uma abordagem de base de código em vez de XAML?

Obrigado @pureween. Eu tentei com base em código e xaml. Eu também tentei reinstalar o VS e tentei a versão "preview" também. É provável que minha desinstalação / reinstalação não tenha excluído os arquivos .nuget. Vou tentar todas as suas sugestões agora.

Tendo reinstalado todas as coisas do Android, agora funciona. Muito obrigado a todos!

Rápido P estou certo em pensar que isso só funcionará no Android 8.1 ou superior?

Olá @taramasalata. Tive um problema semelhante e ele foi corrigido com as seguintes etapas:

• Excluindo todas as pastas "bin" e "obj" do meu aplicativo
• Clique em "Solução Limpa"
• Reinicie o Visual Studio
• Clique em "Rebuild Solution".

@taramasalata YAY !!!! Deve ser executado em qualquer dispositivo com pelo menos API 15

Ao construir isso, testei com a API 15, 19, 23, 27

Fazer com que as cores de tingimento funcionassem em 19 e 15 foi muito divertido

@taramasalata sim, comecei a trabalhar depois de adicionar using Xamarin.Forms.PlatformConfiguration.AndroidSpecific e reiniciar o VS e limpar a solução.

Quando usado no topo, funciona com 6 crianças. Quando está na parte inferior, apenas 5.
O aplicativo falha com a mensagem "Java.Lang.IllegalArgumentException:"

@marcelinhovt sim, essa é uma limitação do Android.

O BottomNavBar no Android suporta apenas 5 itens e realmente não há como contornar isso

@PureWeen oh ... eu não sabia. Obrigado ... Vou tentar escrever algum render para estender

@marcelinhovt então o que quero dizer é que nativamente o BottomNavigationBar no android não suporta mais de 5 itens. Isso não é uma limitação imposta pelo nosso design

Existe uma maneira de definir a elevação na barra da guia inferior?

Eu tenho um novo problema na limitação do Android, embora eu tenha apenas 5 guias, o aplicativo está falhando

@ amrkamal1993 se você pudesse criar uma reprodução e um novo problema, então podemos resolver o problema

@PureWeen obrigado PureWeen, a exceção que acontece quando adiciono o ícone do título na barra de ferramentas, eu tenho a guia inferior e a barra de ferramentas, é um problema que não foi resolvido

@ amrkamal1993 todo o código de teste que temos para a guia inferior usa ícones.

Você pode postar uma reprodução ou código que eu possa testar para ver se consigo recriar a falha?