Разработка Android приложении? с Jetpack Compose
Шрифт:
Оптимизация считывания состояния. Поскольку Compose выполняет отслеживание считывания состояний внутри этапов, мы можем минимизировать количество работы, выполняемой считыванием каждого состояния на этапах.
Посмотрим
По мере прокрутки пользователем значение firstVisibleItemScrollOffset будет меняться. Как мы знаем, Compose отслеживает любое чтение состояния, чтобы можно было повторно вызвать считывающий этот состояние код, в нашем случае – содержимое Box.
В этом примере состояние читается внутри этапа Composition. Это необязательно плохо. Фактически – это основа рекомпозиции, позволяющая при изменении данных создавать новый UI. Причина не оптимальности кода в примере выше в том, что каждое событие скролла приводит к переоценке всего существующего composable-содержимого, и затем новому измерению, расположению и финальной отрисовке.
Мы запускаем этап Composition на каждую прокрутку, даже если то, что мы показываем, не изменилось, а изменилось только где показываем. Мы можем оптимизировать считывание нашего состояния, чтобы повторно запускать этапы, начиная с Layout.
Существует другая версия offset– модификатора. Эта версия функции принимает лямбду, которая возвращает итоговый offset.
Почему этот способ более производительный? Лямбда, которую мы предоставляем модификатору, вызывается во время этапа Layout – если быть точнее, во время шага размещения – что означает, что наше состояние firstVisibleItemScrollOffset больше не считывается во время этапа Composition. Compose отслеживает, когда состояние считано. Поэтому, если значение firstVisibleItemScrollOffset меняется, Compose должен только перезапустить этапы Layout и Drawing.
Вы можете спросить: не может ли использование лямбды привести к дополнительным затратам по сравнению с использованием простого значения? Так и есть. Однако выигрыш от чтения состояния на этапе Layout перевешивает эти затраты. Значение firstVisibleItemScrollOffset меняет каждый кадр в течение прокрутки, и, отложив чтение состояния до этапа Layout, мы совсем избегаем повторных этапов Composition.
Layouts
Основными layout в Jetpack Compose являются Box, Row, Column. Также Compose позволяет использовать аналоги Constraint Layout. Все эти компоненты inline Composable – функции. Это значит, что другие Composable функции могут быть вызв
Layouts могут быть представлены в коде как лямбда-блок, принимающий дополнительные параметры для изменения внешнего вида или поведения компонентов – позиционирование элементов, которые находятся внутри.
Box
Box – аналог FrameLayout в XML. Нижний элемент будет отображаться поверх остальных, первый выполняет функцию подложки/фона.
View без обернутого в Box имеет схожее поведение. За единственным исключением: вы не сможете контролировать расположение элементов на экране.
Box принимает 4 параметра:
• modifier – позволяет настроить внешний вид и его поведение;
• contentAlignment – устанавливает расположение элемента на экране, по умолчанию имеет значение Alignment.TopStart (расположение вначале контейнера в верхнем углу);
• propagateMinConstraints – указывает, надо ли применять к содержимому ограничения минимального размера во время отрисовки, по умолчанию false;
• content – объект интерфейса BoxScope, который подставляет вложенное содержимое, может быть заменен на лямбда-блок.
Column
Column layout – вертикальный список, LinearLayout в XML
< image l:href="#"/>Column принимает 4 параметра:
• modifier – позволяет настроить внешний вид и его поведение;
• verticalArrangment – выравнивание элементов по вертикали, по умолчанию имеет значение Arrangment.Top;
• horizontalAlignment – выравнивание по горизонтали, по умолчанию имеет значение Alignment.Start;
• content – объект интерфейса ColumnScope, который подставляет вложенное содержимое, может быть заменен на лямбда-блок;
VerticalArrangment позволяет изменить позиционирование элементов по вертикали не только стандартными модификаторами, такими как: Arrangment.Center, Arrangment.Bottom, Arrangment.Top, но и более гибкими, которые позволяют располагать элементы равномерно внутри layout.
• Arrangment.SpaceAround – компоненты равномерно распределяются по всей высоте с отступами между элементами, при этом отступы между первым и последним элементами равны половине отступов между элементами;
• Arrangement.SpaceBetween – компоненты распределяются по всей высоте с равномерными отступами между элементами, при этом первый и последний элементы прижимаются к границам контейнера;
Конец ознакомительного фрагмента.