Xamarin.Forms Renderizadores personalizados do Shell

Uma das vantagens dos Xamarin.Forms aplicativos Shell é que sua aparência e comportamento são altamente personalizáveis por meio das propriedades e métodos que as várias classes do Shell expõem. No entanto, também é possível criar um renderizador personalizado do Shell quando personalizações específicas da plataforma mais extensas são necessárias. 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.

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

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.

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.

Links relacionados

• Xamarin.Forms Renderizadores personalizados