Xamarin.Forms Renderizadores personalizados do Shell

Uma das vantagens dos aplicativos Shell Xamarin.Forms é que sua aparência e comportamento são altamente personalizáveis por meio das propriedades e métodos que as várias classes shell expõem. No entanto, também é possível criar um renderizador personalizado do Shell quando são necessárias personalizações mais extensas específicas da plataforma. Assim como acontece com outros renderizadores personalizados, um renderizador personalizado do Shell pode ser adicionado a apenas um projeto de plataforma para personalizar a aparência e o comportamento, permitindo o comportamento padrão na outra plataforma; ou um renderizador personalizado do Shell diferente pode ser adicionado a cada projeto de plataforma para personalizar a aparência e o comportamento no iOS e no Android.

Os aplicativos do Shell são renderizados usando a classe ShellRenderer no iOS e no Android. No iOS, a classe ShellRenderer pode ser encontrada no namespace Xamarin.Forms.Platform.iOS. No Android, a classe ShellRenderer pode ser encontrada no namespace Xamarin.Forms.Platform.Android.

O processo para criar um renderizador personalizado do Shell é o seguinte:

1. Crie uma subclasse da classe Shell. Isso já será realizado no seu aplicativo do Shell.
2. Consuma a classe Shell com a subclasse. Isso já será realizado no seu aplicativo do Shell.
3. Crie uma classe de renderizador personalizado que derive da classe ShellRenderer nas plataformas necessárias.

Criar uma classe de renderizador personalizado

O processo para criar uma classe de renderizador personalizado é a seguinte:

1. Crie uma subclasse da classe ShellRenderer.
2. Substitua os métodos necessários para realizar a personalização necessária.
3. Adicione uma ExportRendererAttribute à subclasse ShellRenderer para especificar que ela será usada para renderizar o aplicativo do Shell. Esse atributo é usado para registrar o renderizador personalizado com Xamarin.Forms.

Observação

O fornecimento de um renderizador personalizado do Shell em cada projeto de plataforma é opcional. Se um renderizador personalizado não estiver registrado, então a classe ShellRenderer será usada.

A classe ShellRenderer expõe os seguintes métodos substituíveis:

iOS	Android	UWP
SetElementSize CreateFlyoutRenderer CreateNavBarAppearanceTracker CreatePageRendererTracker CreateShellFlyoutContentRenderer CreateShellItemRenderer CreateShellItemTransition CreateShellSearchResultsRenderer CreateShellSectionRenderer CreateTabBarAppearanceTracker Dispose OnCurrentItemChanged OnElementPropertyChanged OnElementSet UpdateBackgroundColor	CreateFragmentForPage CreateShellFlyoutContentRenderer CreateShellFlyoutRenderer CreateShellItemRenderer CreateShellSectionRenderer CreateTrackerForToolbar CreateToolbarAppearanceTracker CreateTabLayoutAppearanceTracker CreateBottomNavViewAppearanceTracker OnElementPropertyChanged OnElementSet SwitchFragment Dispose	CreateShellFlyoutTemplateSelector CreateShellHeaderRenderer CreateShellItemRenderer CreateShellSectionRenderer OnElementPropertyChanged OnElementSet UpdateFlyoutBackdropColor UpdateFlyoutBackgroundColor

As classes FlyoutItem e TabBar são aliases da classe ShellItem, e a classe Tab é um alias da classe ShellSection. Portanto, o método CreateShellItemRenderer deve ser substituído ao criar um renderizador personalizado para objetos FlyoutItem, e o método CreateShellSectionRenderer deve ser substituído ao criar um renderizador personalizado para objetos Tab.

Importante

Há classes adicionais do renderizador do Shell, como ShellSectionRenderer e ShellItemRenderer, no iOS, Android e UWP. No entanto, elas são criadas por substituições na classe ShellRenderer. Portanto, a personalização do comportamento dessas classes de renderizador adicionais pode ser obtida por meio da criação de subclasses, e a criação de uma instância da subclasse na substituição apropriada na classe ShellRenderer com subclasse.

Exemplo de iOS

O exemplo de código a seguir mostra uma ShellRenderer com subclasse para iOS, que define uma imagem de plano de fundo na barra de navegação do aplicativo de Shell:

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(Xaminals.AppShell), typeof(Xaminals.iOS.MyShellRenderer))]
namespace Xaminals.iOS
{
    public class MyShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            if (renderer != null)
            {
                (renderer as ShellSectionRenderer).NavigationBar.SetBackgroundImage(UIImage.FromFile("monkey.png"), UIBarMetrics.Default);
            }
            return renderer;
        }
    }
}

A classe MyShellRenderer substitui o método CreateShellSectionRenderer e recupera o renderizador criado pela classe base. Ela, em seguida, modifica o renderizador ao definir uma imagem de plano de fundo na barra de navegação antes de retornar o renderizador.

Exemplo do Android

O exemplo de código a seguir mostra uma ShellRenderer com subclasse para Android, que define uma imagem de plano de fundo na barra de navegação do aplicativo do Shell:

using Android.Content;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xaminals.AppShell), typeof(Xaminals.Droid.MyShellRenderer))]
namespace Xaminals.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new MyShellToolbarAppearanceTracker(this);
        }
    }
}

A classe MyShellRenderer substitui o método CreateToolbarAppearanceTracker e retorna uma instância da classe MyShellToolbarAppearanceTracker. A classe MyShellToolbarAppearanceTracker, que deriva da classe ShellToolbarAppearanceTracker, é mostrada no exemplo a seguir:

using AndroidX.AppCompat.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

namespace Xaminals.Droid
{
    public class MyShellToolbarAppearanceTracker : ShellToolbarAppearanceTracker
    {
        public MyShellToolbarAppearanceTracker(IShellContext context) : base(context)
        {
        }

        public override void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
            base.SetAppearance(toolbar, toolbarTracker, appearance);
            toolbar.SetBackgroundResource(Resource.Drawable.monkey);
        }
    }
}

A classe MyShellToolbarAppearanceTracker substitui o método SetAppearance e modifica a barra de ferramentas ao definir uma imagem de plano de fundo nela.

Importante

Só é necessário adicionar ExportRendererAttribute a um renderizador personalizado que derive da classe ShellRenderer. As classes de renderizador do Shell com subclasse adicionais são criadas pela classe ShellRenderer com subclasse.

Links relacionados

• Xamarin.Forms Renderizadores personalizados