Compartilhar via


Compactação de Layout

A compactação de layout remove layouts especificados da árvore visual em uma tentativa de melhorar o desempenho de renderização de página. Este artigo explica como habilitar a compactação de layout e os benefícios que ela pode trazer.

Visão geral

Xamarin.Forms Executa o layout usando duas séries de chamadas de método recursivo:

  • O layout começa na parte superior da árvore visual com uma página e prossegue por todos os ramos da árvore visual para abranger todos os elementos visuais em uma página. Elementos que são pais de outros elementos são responsáveis por dimensionar e posicionar seus filhos em relação a si mesmos.
  • Invalidação é o processo pelo qual uma alteração em um elemento em uma página dispara um novo ciclo de layout. Os elementos são considerados inválidos quando não têm mais o tamanho ou a posição correta. Cada elemento da árvore visual que tem filhos é alertado sempre que um de seus filhos muda de tamanho. Portanto, uma alteração no tamanho de um elemento na árvore visual pode causar alterações que ondulam a árvore.

Para obter mais informações sobre como Xamarin.Forms executa o layout, consulte Criando um layout personalizado.

O resultado do processo de layout é uma hierarquia de controles nativos. No entanto, essa hierarquia inclui renderizadores de contêiner e wrappers adicionais para renderizadores de plataforma, inflando ainda mais o aninhamento da hierarquia de exibição. Quanto mais profundo o nível de aninhamento, maior a quantidade de trabalho que Xamarin.Forms deve ser executado para exibir uma página. Para layouts complexos, a hierarquia de exibição pode ser profunda e ampla, com vários níveis de aninhamento.

Por exemplo, considere o seguinte botão do aplicativo de exemplo para fazer login no Facebook:

Botão Facebook

Esse botão é especificado como um controle personalizado com a seguinte hierarquia de exibição XAML:

<ContentView ...>
    <StackLayout>
        <StackLayout ...>
            <AbsoluteLayout ...>
                <Button ... />    
                <Image ... />
                <Image ... />
                <BoxView ... />
                <Label ... />
                <Button ... />
            </AbsoluteLayout>
        </StackLayout>
        <Label ... />
    </StackLayout>    
</ContentView>

A hierarquia de exibição aninhada resultante pode ser examinada com a Árvore Visual em tempo real. No Android, a hierarquia de exibição aninhada contém 17 exibições:

Botão Ver hierarquia para o Facebook

A compactação de layout, que está disponível para Xamarin.Forms aplicativos nas plataformas iOS e Android, visa achatar o aninhamento de exibição removendo layouts especificados da árvore visual, o que pode melhorar o desempenho de renderização de página. O benefício de desempenho fornecido varia dependendo da complexidade de uma página, da versão do sistema operacional que está sendo usado e do dispositivo no qual o aplicativo está sendo executado. No entanto, os maiores ganhos de desempenho serão observados em versões mais antigas.

Observação

Embora este artigo se concentre nos resultados da aplicação da compactação de layout no Android, ele é igualmente aplicável ao iOS.

Compactação de Layout

Em XAML, a compactação de layout pode ser habilitada definindo a propriedade anexada CompressedLayout.IsHeadless como true em uma classe de layout:

<StackLayout CompressedLayout.IsHeadless="true">
  ...
</StackLayout>   

Como alternativa, ele pode ser habilitado em C# especificando a instância de layout como o primeiro argumento para o CompressedLayout.SetIsHeadless método:

CompressedLayout.SetIsHeadless(stackLayout, true);

Importante

Como a compactação de layout remove um layout da árvore visual, ela não é adequada para layouts que têm uma aparência visual ou que obtêm entrada por toque. Portanto, layouts que definem VisualElement propriedades (como BackgroundColor, IsVisible, TranslationXRotationScale, e TranslationY ou que aceitam gestos, não são candidatos à compactação de layout. No entanto, habilitar a compactação de layout em um layout que define propriedades de aparência visual ou que aceita gestos, não resultará em um erro de compilação ou tempo de execução. Em vez disso, a compactação de layout será aplicada e as propriedades de aparência visual e o reconhecimento de gestos falharão silenciosamente.

Para o botão Facebook, a compactação de layout pode ser ativada nas três classes de layout:

<StackLayout CompressedLayout.IsHeadless="true">
    <StackLayout CompressedLayout.IsHeadless="true" ...>
        <AbsoluteLayout CompressedLayout.IsHeadless="true" ...>
            ...
        </AbsoluteLayout>
    </StackLayout>
    ...
</StackLayout>  

No Android, isso resulta em uma hierarquia de exibição aninhada de 14 exibições:

Botão Exibir hierarquia para o Facebook com compactação de layout

Em comparação com a hierarquia de exibição aninhada original de 17 exibições, isso representa uma redução no número de visualizações de 17%. Embora essa redução possa parecer insignificante, a redução de exibição em uma página inteira pode ser mais significativa.

Renderizadores Rápidos

Os renderizadores rápidos reduzem a inflação e os custos de renderização dos Xamarin.Forms controles no Android, achatando a hierarquia de exibição nativa resultante. Isso melhora ainda mais o desempenho, criando menos objetos, o que, por sua vez, resulta em uma árvore visual menos complexa e menos uso de memória. Para obter mais informações sobre renderizadores rápidos, consulte Renderizadores rápidos.

Para o botão Facebook no aplicativo de exemplo, a combinação de compactação de layout e renderizadores rápidos produz uma hierarquia de exibição aninhada de 8 visualizações:

Botão Exibir hierarquia para o Facebook com compactação de layout e renderizadores rápidos

Em comparação com a hierarquia de exibição aninhada original de 17 exibições, isso representa uma redução de 52%.

O aplicativo de exemplo contém uma página extraída de um aplicativo real. Sem compactação de layout e renderizadores rápidos, a página produz uma hierarquia de exibição aninhada de 130 visualizações no Android. Habilitar renderizadores rápidos e compactação de layout em classes de layout apropriadas reduz a hierarquia de exibição aninhada para 70 exibições, uma redução de 46%.

Resumo

A compactação de layout remove layouts especificados da árvore visual em uma tentativa de melhorar o desempenho de renderização de página. O benefício de desempenho que isso oferece varia dependendo da complexidade de uma página, da versão do sistema operacional que está sendo usado e do dispositivo no qual o aplicativo está sendo executado. No entanto, os maiores ganhos de desempenho serão observados em versões mais antigas.