Сжатие макета

Download Sample Скачайте пример

Сжатие макета удаляет указанные макеты из визуального дерева в попытке повысить производительность отрисовки страниц. В этой статье объясняется, как включить сжатие макета и преимущества, которые он может принести.

Обзор

Xamarin.Forms выполняет макет с помощью двух рядов вызовов рекурсивных методов:

  • Макет начинается в верхней части визуального дерева со страницей, и он проходит через все ветви визуального дерева, чтобы охватывать каждый визуальный элемент на странице. Элементы, которые являются родителями для других элементов, отвечают за изменение размера и размещение своих детей относительно себя.
  • Недопустимое — это процесс, с помощью которого изменение элемента на странице активирует новый цикл макета. Элементы считаются недопустимыми, если они больше не имеют правильного размера или положения. Каждый элемент в визуальном дереве с дочерними элементами оповещается всякий раз, когда один из дочерних элементов изменяет размер. Таким образом, изменение размера элемента в визуальном дереве может привести к изменениям, которые рябят вверх по дереву.

Дополнительные сведения о том, как Xamarin.Forms выполняет макет, см. в разделе "Создание пользовательского макета".

Результатом процесса макета является иерархия собственных элементов управления. Однако эта иерархия включает в себя дополнительные отрисовщики контейнеров и оболочки для отрисовщиков платформы, а также дальнейшее вложение иерархии представлений. Чем глубже уровень вложения, тем больше объем работы, который Xamarin.Forms должен выполняться для отображения страницы. Для сложных макетов иерархия представлений может быть как глубокой, так и широкой с несколькими уровнями вложения.

Например, рассмотрим следующую кнопку из примера приложения для входа в Facebook:

Facebook Button

Эта кнопка указана как пользовательский элемент управления со следующей иерархией представлений XAML:

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

Результирующая иерархия вложенных представлений может быть проверена с помощью динамического визуального дерева. В Android вложенная иерархия представлений содержит 17 представлений:

View Hierarchy for Facebook Button

Сжатие макета, доступное для приложений на Xamarin.Forms платформах iOS и Android, предназначено для выравнивания вложенных представлений путем удаления указанных макетов из визуального дерева, что может повысить производительность отрисовки страниц. Преимущество производительности, которое предоставляется, зависит от сложности страницы, используемой операционной системы и устройства, на котором работает приложение. Однако наиболее заметное повышение производительности будет наблюдаться на старых устройствах.

Примечание.

Хотя в этой статье рассматриваются результаты применения сжатия макета в Android, оно одинаково применимо к iOS.

Сжатие макета

В XAML сжатие макета можно включить, задав присоединенное CompressedLayout.IsHeadless свойство true в классе макета:

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

Кроме того, его можно включить в C#, указав экземпляр макета в качестве первого аргумента CompressedLayout.SetIsHeadless метода:

CompressedLayout.SetIsHeadless(stackLayout, true);

Внимание

Так как сжатие макета удаляет макет из визуального дерева, оно не подходит для макетов, имеющих визуальный вид, или для получения сенсорных входных данных. Поэтому макеты, которые задают VisualElement свойства (напримерBackgroundColor, , IsVisible, RotationScaleи , TranslationX и TranslationY которые принимают жесты, не являются кандидатами на сжатие макета. Однако включение сжатия макета в макете, которое задает свойства внешнего вида или принимает жесты, не приведет к ошибке сборки или среды выполнения. Вместо этого сжатие макета будет применяться, а свойства внешнего вида визуальных элементов и распознавание жестов автоматически завершаются ошибкой.

Для кнопки Facebook сжатие макета можно включить в трех классах макета:

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

В Android это приводит к вложенной иерархии представлений 14 представлений:

View Hierarchy for Facebook Button with Layout Compression

По сравнению с исходной иерархией вложенного представления 17 представлений это означает сокращение числа представлений на 17 %. Хотя это сокращение может показаться незначительным, уменьшение представления на всей странице может быть более значительным.

Быстрые отрисовщики

Быстрые отрисовщики снижают затраты на инфляцию и отрисовку элементов управления в Android путем выравнивания результирующей иерархии собственного Xamarin.Forms представления. Это повышает производительность, создавая меньше объектов, что в свою очередь приводит к менее сложному визуальному дереву и меньшему использованию памяти. Дополнительные сведения о быстрых отрисовщиках см. в разделе Быстрые отрисовщики.

Для кнопки Facebook в примере приложения объединение сжатия макета и быстрых отрисовщиков создает вложенную иерархию представлений из 8 представлений:

View Hierarchy for Facebook Button with Layout Compression and Fast Renderers

По сравнению с исходной иерархией вложенных представлений 17 представлений это сокращение составляет 52%.

Пример приложения содержит страницу, извлеченную из реального приложения. Без сжатия макета и быстрых отрисовщиков страница создает вложенную иерархию представлений 130 представлений в Android. Включение быстрого отрисовщика и сжатия макетов для соответствующих классов макетов сокращает вложенную иерархию представлений до 70 представлений, что уменьшается на 46 %.

Итоги

Сжатие макета удаляет указанные макеты из визуального дерева в попытке повысить производительность отрисовки страниц. В этом случае рост производительности зависит от сложности страницы, версии используемой операционной системы и устройства, на котором выполняется приложение. Однако наиболее заметное повышение производительности будет наблюдаться на старых устройствах.