Guias “Puras” Xamarin.Forms: guias da barra inferior, guias sublinhadas, guias personalizadas.

TABS! TABS! TABS! TABS! 

Nós amamos abas!
Como aprendemos que o menu de hambúrgueres era o mestre do UI, todo mundo está adotando guias para a navegação do aplicativo. O Android adicionou navegação de barra inferior em seus apoios libs anos atrás, e aplicativos iOS roubaram o layout de guia android.
Admita: você ama abas

Por: Jean-Marie Alfonsi
Traduzido por: Adriano D’lucca [Repost traduzido]
Fonte:sharpnado.com/pure-xamarin-forms-tabs

Abas

Aqui no sharpnado, nós prosperamos em entregar material de alta qualidade para a comunidade

Então eu apresento Sharpnado Pure Xamarin Forms Tabs (também conhecido como SPXFT).
Ele está disponível na v1.0dos pacotes NuGet Sharpnado.Forms.Presentation.

O código fonte pode ser encontrado aqui:
https://github.com/roubachof/Sharpnado.Presentation.Forms

Por que Xamarin Forms UI Pure

O termo “Xamarin Forms Pure” não significa muito. O que quero dizer com isso é que não há renderizadores, as guias que vou apresentar são implementadas apenas com Xamarin.Formsviews, e elas facilitam estender, animar, colocar em qualquer lugar, girar, mudar de cor, mudar a fonte… Bem, você entendeu.

Eu vi que Xamarin estava empurrando theming  VisualMaterial para aliviar a nossa dor, o que é ótimo! Eu amo interface do usuário consistente e a UI específica do plaftorm.

Infelizmente (ou não) a maioria dos designers com quem trabalhei não se preocupam com as regras da plataforma, eles têm um design específico em mente e querem o mesmo design em ambas as plataformas. E como desenvolvedor, você acaba implementando alguns controles personalizados malucos com gradientes.

A arquitetura de guias que agora apresentarei a você foi concebida neste contexto: ela permite que você realmente altere qualquer coisa sobre elas e até mesmo implemente suas próprias guias personalizadas facilmente.

Vamos cobrir dois tipos de cenários de interface do usuário:

1. Guias na parte superior da interface do usuário

iOS Android

2. Interface inferior das guias

iOS Android

Arquitetura

Bem, eu sou um grande fã de composição, então tentei isolar cada responsabilidade como eu posso.

Você pode encontrar todo o código de arquitetura em: https://github.com/roubachof/Sharpnado.Presentation.Forms.

TabItem

TabItemé uma classe abstrata básica para todas as guias.
Tem várias propriedades ligáveis:

 

Duas classes concretas implementam esta classe abstrata:

1. UnderlinedTabItem

Esta é uma guia clássica “Android”, com texto.
Quando a guia é selecionada, o texto é sublinhado.

2. BottomTabItem

Esta é uma guia inferior “iOS” clássica.
Tem um ícone e não está sublinhado.

Adiciona várias propriedades mais ligáveis:

 

TabHostView

TabHostViewtem a responsabilidade de unir as guias em um layout horizontal, gerenciando os estados das guias (basicamente qual delas é selecionado).

 

ViewSwitcher

ViewSwitcherseleciona a visualização vinculada à guia correspondente.

Você pode vê-lo como uma pilha de visualizações, ocultando as que não foram selecionadas.

Observação : você pode usar totalmente um ViewSwitchersem um TabHostView.

 

Colocando tudo junto

Vamos ver agora dois exemplos diferentes de layout com o Silly! App ( https://github.com/roubachof/Xamarin-Forms-Practices ).

UnderlinedTabItem com ViewSwitcher

Vamos considerar essa visão:

E vamos dar uma olhada no seu código:

 

TabHostViewViewSwitchersão  dois componentes independentes, e você pode colocá-los em qualquer lugar. Eles não precisam estar próximos um do outro (mesmo que seja estranho eu devo admitir).

Como eles não se conhecem, você só precisa vinculá-los através de sua propriedade SelectedIndex. Você vai ligar o ViewSwitcherao seu modelo de vista, e o TabHostViewà propriedade ViewSwitcher SelectedIndex.

Você vê uma propriedade ShadowType. Ele adiciona uma pequena sombra agradável “à la Material” para trazer o efeito de elevação agradável e extravagante.
Para as guias principais, queremos a sombra nas nossas guias Bottom.

Você também pode ver uma  Animate misteriosa . Apenas acrescenta um bom efeito de aparição. É realmente apenas um pequeno bônus.

Visualizar modelo

 

Bem, não vou entrar em detalhes, é bem óbvio.
Se você quiser saber mais sobre o mistério ViewModelLoader, leia este post ( https://www.sharpnado.com/taskloaderview-async-init-made-easy/ ).

Styling

O estilo da aba é definido nos recursos da página de conteúdo, mas poderíamos colocá-lo no App.xaml, já que na maioria das vezes teremos um tipo de abas de topo (bem, depende do seu designer louco) 🙂

 

BottomTabItem com o ViewSwitcher

Agora vamos considerar essa visão:

E vamos dar uma olhada no seu xaml:

 

É exatamente a mesma coisa que nossa amostra de guias principais, mas usamosBottomBarItemem  vez de UnderlinedTab. E o nosso ViewSwitcherestá de pé acima do nosso TabHostView.
Simples.

Styling

 

Guias personalizadas de SPAM!

Como eu disse, seu estilista pode ficar louco e você nem vai se cansar.
Apenas estenda o resumo TabIteme cumpra os sonhos mais loucos de seus colegas.

 

Por favor, não seja tímido com animações Xamarin.Forms, é tão fácil de usar e tão poderoso graças à incrível TaskAPI C # .

Use-os

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Bitnami