A partir do .NET 10, o iOS e o macOS oferecem suporte a itens secundários da barra de ferramentas, que são encontrados em menus flutuantes e fazem com que um aplicativo .NET MAUI pareça mais nativo para a experiência do usuário Apple.
Quando falamos em tecnologia pensamos em um mundo de constantes mudanças que a cada dia se concentra em melhorar o anterior. No caso do .NET MAUI, isso não é exceção; no .NET 10, muitas melhorias muito interessantes foram lançadas para tornar nosso trabalho como devs cada vez mais eficiente.
É o caso dos Itens secundários da barra de ferramentas, uma melhoria focada diretamente na experiência do usuário. Anteriormente, o comportamento deles não era consistente em todas as plataformas, especialmente no iOS e no macOS. Agora, temos um suporte que permite que ações secundárias se comportem de forma mais natural e alinhadas às convenções da Apple, fazendo com que nossos aplicativos pareçam muito mais nativos.
Estas são opções que ficam na barra de ferramentas. Em vez de serem exibidos diretamente na barra de ferramentas, eles são agrupados dentro de um menu secundário que é mostrado ao selecionar sua ação principal.
Por exemplo: Localização → América do Norte.
Dessa forma, apenas as ações mais importantes permanecem visíveis na barra de ferramentas principal, o que ajuda a reduzir a confusão visual e melhora a experiência do usuário.
Do .NET 10 em diante, a documentação oficial afirma:
“iOS e macOS agora suportam itens secundários da barra de ferramentas, proporcionando melhor alinhamento com as convenções da plataforma.” 😍
Esta melhoria não é apenas uma mudança visual; ele apresenta vários aprimoramentos importantes para iOS e macOS que afetam diretamente o comportamento e a integração dos itens secundários da barra de ferramentas com a plataforma, tornando-os muito mais nativos, como:
Detecção Automática
Ao configurar Itens da barra de ferramentasprecisamos definir se serão primários ou secundários. Com esta melhoria, todos os itens marcados no Order imóvel com o valor Secondary são agrupados automaticamente no menu secundário, o que significa que não precisamos adicionar nenhuma configuração extra ou escrever código adicional para que funcione.
Isto é especialmente valioso quando queremos manter uma experiência nativa em nossas aplicações.
Padrão iOS moderno
O .NET MAUI agora usa APIs do iOS 13+, o que significa que exibe um design de menu moderno para apresentar opções secundárias. Este design segue as regras estabelecidas e respeita as Diretrizes de Interface Humana.
O Diretrizes de Interface Humana (HIG) são um conjunto de recomendações de design criadas pela Apple, que alinham uma experiência única e consistente em suas plataformas, indicando como os aplicativos devem se parecer e se comportar.
Você pode definir a ordem dos seus itens! 😎
Manter uma ordem lógica em seus itens também é importante. Ao adicionar um ToolbarItem, existe uma propriedade chamada Priorityque é responsável por definir a ordem em que as opções serão exibidas no menu, tanto primárias quanto secundárias.
Os itens são ordenados numericamente, do menor para o maior, começando em 0. Isso nos permite decidir quais ações devem aparecer primeiro, ajudando a manter uma hierarquia clara do que queremos apresentar ao usuário.
Como o posicionamento é tratado?
O menu secundário é exibido por padrão no certo lado da barra de ferramentas. Ele também tem a capacidade de se adaptar automaticamente quando Da direita para a esquerda (RTL) está ativado em seu aplicativo.
Caso você não saiba, RTL refere-se à direção de leitura e escrita de certos idiomas. Isso significa que seu aplicativo .NET MAUI respeita as convenções de cada linguagem, proporcionando uma experiência de usuário mais acessível e adaptável. Este comportamento se aplica a todos os elementos visuais, incluindo o menu secundário.
Ícone personalizável
Por padrão, os itens secundários da barra de ferramentas são agrupados em um menu suspenso que usa o sistema reticências (⋯) ícone (UIImage.GetSystemImage("ellipsis.circle")). Este ícone, definido por Maçã em seu Diretrizes de Interface Humanaé usado para representar ações adicionais, secundárias ou menos frequentes, para que o menu se pareça e se comporte como qualquer outro menu nativo no iOS e no macOS.
Embora este ícone seja recomendado, não é obrigatório. Se o seu aplicativo exigir uma representação visual diferente, o .NET MAUI permitirá que você personalize o ícone, permitindo que o menu secundário se alinhe melhor aos requisitos visuais do seu aplicativo, preservando seu comportamento nativo.
⚠️Minha recomendação é que sempre que esse ícone precisar ser alterado, é importante que a equipe de design esteja alinhada e ciente de que uma regra definida pela Apple está sendo modificada. Não há nada de errado em alterá-lo, mas é essencial ter uma ideia clara POR QUE por trás da decisão.
Outro detalhe importante a destacar é que este menu é dinâmico. Se o menu estiver aberto e qualquer propriedade de um item for alterada em tempo de execução, como texto, estado ativado ou visibilidade, o sistema reconstruirá e fechará automaticamente o menu para refletir essas atualizações.
Isso permite que os usuários sempre vejam informações atualizadas e consistentes, evitando ações inválidas e mantendo uma experiência de usuário nativa e confiável.
Resumindo
- Itens principais da barra de ferramentas são exibidos diretamente na barra de ferramentas.
- Itens secundários da barra de ferramentas são agrupados dentro do menu flutuante (secundário).
💡 A documentação oficial recomenda mantendo o texto do rótulo curto para que caiba no menu suspenso, reduzindo assim o risco de inconsistências entre plataformas.
Uma implementação XAML básica sobre uma implementação de ToolbarItems seria semelhante ao exemplo a seguir:
Exemplo obtido da documentação oficial.
E é isso! 🎉 Com .NET 10, itens secundários da barra de ferramentas no .NET MAUI dá um passo importante, especialmente no iOS e no macOS. Essas melhorias trazem um comportamento mais nativo, consistente e previsível ao alinhar as ações da barra de ferramentas com as convenções da plataforma, por isso é importante mantê-lo atualizado com as novidades!
Se você tiver alguma dúvida ou quiser que eu me aprofunde em tópicos relacionados, fique à vontade para deixar um comentário – ficarei feliz em ajudar! 💚
Vejo você no próximo artigo! 🙋♀️✨
Referências
A explicação foi baseada na documentação oficial:
