Jetpack compose android developers

Jetpack Compose — как легко построить UI на Android

В июле этого года вместе с Android Studio Arctic Fox вышла одна из долгожданных библиотек — Jetpack Compose. Она позволяет создавать пользовательский интерфейс в декларативном стиле и обещает быть революцией в построении UI.

Разбираемся, так ли это на самом деле, какие у библиотеки преимущества и недостатки. Подробности — в статье.

Преимущества Jetpack Compose

Jetpack Compose — это набор инструментов для разработки UI в Android-приложении. Он призван ускорить и упростить разработку пользовательского интерфейса, избавить от лишнего кода и соединить модель реактивного программирования с лаконичностью Kotlin.

Сразу с места в карьер — какие есть преимущества у библиотеки:

1. Меньше кода. Jetpack Compose позволяет писать меньше кода, а значит разработчик может больше фокусироваться на проблеме, с меньшим количеством тестов и дебага, а значит и багов.

2. Интуитивно понятный. Compose использует декларативный API — разработчику нужно лишь сказать, что сделать, а все остальное ляжет на плечи библиотеки.

3. Удобство внедрения. Compose совместим с любым существующим кодом. Например, можно вызвать Compose-код из вьюх (view) и, наоборот, вьюхи из Compose. Многие библиотеки вроде Jetpack Navigation, ViewModel и Coroutines уже адаптированы под Compose, что позволяет сравнительно быстро внедрить его в свой код. Кроме того, Android Studio Arctic Fox поддерживает превью создаваемых вьюх.

4. Имеет обширный инструментарий. Jetpack Compose позволяет создавать красивые приложения с прямым доступом к Android Platform API и build-in поддержкой Material Design, тёмной темы, анимаций и других крутых штук.

Далее пройдёмся по основным аспектам библиотеки и посмотрим, как сильно повышается производительность приложения.

Подключение к проекту

Чтобы подключить Jetpack Compose к проекту, необходимо указать некоторые строки кода в своем build.gradle.

В рутовом объявим переменную с версией Compose:

Здесь мы указываем, что в проекте будем использовать Jetpack Compose и объявляем необходимые зависимости (подробнее про зависимости можно почитать в официальном гайде).

Дальше всё просто. В активити (activity) объявлем Composable-функцию, строим иерархию вьюх с указанием необходимых атрибутов и смотрим результат.

Пройдемся по коду. Я написал две реализации вёрсток различной сложности:

1. Простая реализация

Добавляет TextView в вёрстку с текстом с конкатенацией Hello и аргумента, переданного в Greeting.

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

2. Более сложная реализация

Этот вариант представляет собой скролящийся экран, который содержит изображение, текст и кнопку. Рассмотрим некоторые особенности:

Необходимо объявить Scroll State. Только не обычный, а тот, который позволяет сохранять состояние скролла сквозь рекомпозицию — rememberScrollState().

Column представляет собой ViewGroup с вертикальным расположением элементов.

Modifier позволяет управлять атрибутами, добавлять декорации и поведение к вьюхам.

Остальное интуитивно понятно. И это как раз одна из ключевых особенностей Jetpack Compose — даже если вы не использовали библиотеку ранее, то всё равно с ней разберётесь.

Добавить вьюхи в активити можно через extension setContent <>, например:

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

Для тестирования воспользуемся библиотекой Jetpack Benchmark, о которой, кстати, тоже рассказывали в отдельной статье. Код теста выглядит так:

Протестируем три версии установки вьюхи в активити:

При передаче ресурса в setContentView.

При передаче вьюхи в setContentView.

Итоги тестирования можно посмотреть в таблице: левый столбец — название теста, правый — время на выполнение:

Источник

State and Jetpack Compose

State in an app is any value that can change over time. This is a very broad definition and encompasses everything from a Room database to a variable on a class.

All Android apps display state to the user. A few examples of state in Android apps:

• A Snackbar that shows when a network connection can’t be established.
• A blog post and associated comments.
• Ripple animations on buttons that play when a user clicks them.
• Stickers that a user can draw on top of an image.

Jetpack Compose helps you be explicit about where and how you store and use state in an Android app. This guide focuses on the connection between state and composables, and on the APIs that Jetpack Compose offers to work with state more easily.

State and composition

Compose is declarative and as such the only way to update it is by calling the same composable with new arguments. These arguments are representations of the UI state. Any time a state is updated a recomposition takes place. As a result, things like TextField don’t automatically update like they do in imperative XML based views. A composable has to explicitly be told the new state in order for it to update accordingly.

If you run this, you’ll see that nothing happens. That’s because the TextField doesn’t update itself—it updates when its value parameter changes. This is due to how composition and recomposition work in Compose.

Key Term: Composition: a description of the UI built by Jetpack Compose when it executes composables.

Initial composition: creation of a Composition by running composables the first time.

Recomposition: re-running composables to update the Composition when data changes.

To learn more about initial composition and recomposition, see Thinking in Compose.

State in composables

Composable functions can store a single object in memory by using the remember composable. A value computed by remember is stored in the Composition during initial composition, and the stored value is returned during recomposition. remember can be used to store both mutable and immutable objects.

mutableStateOf creates an observable MutableState , which is an observable type integrated with the compose runtime.

Any changes to value will schedule recomposition of any composable functions that read value . In the case of ExpandingCard , whenever expanded changes, it causes ExpandingCard to be recomposed.

There are three ways to declare a MutableState object in a composable:

• val mutableState = remember
• var value by remember
• val (value, setValue) = remember

These declarations are equivalent, and are provided as syntax sugar for different uses of state. You should pick the one that produces the easiest-to-read code in the composable you’re writing.

The by delegate syntax requires the following imports:

You can use the remembered value as a parameter for other composables or even as logic in statements to change which composables are displayed. For example, if you don’t want to display the greeting if the name is empty, use the state in an if statement:

While remember helps you retain state across recompositions, the state is not retained across configuration changes. For this, you must use rememberSaveable . rememberSaveable automatically saves any value that can be saved in a Bundle . For other values, you can pass in a custom saver object.

Other supported types of state

Jetpack Compose doesn’t require that you use MutableState to hold state. Jetpack Compose supports other observable types. Before reading another observable type in Jetpack Compose, you must convert it to a State so that Jetpack Compose can automatically recompose when the state changes.

Compose ships with functions to create State from common observable types used in Android apps:

You can build an extension function for Jetpack Compose to read other observable types if your app uses a custom observable class. See the implementation of the builtins for examples of how to do this. Any object that allows Jetpack Compose to subscribe to every change can be converted to State and read by a composable.

Key Point: Compose will automatically recompose from reading State objects.

If you use another observable type such as LiveData in Compose, you should convert it to State before reading it in a composable using a composable extension function like LiveData .observeAsState() .

Caution: Using mutable objects such as ArrayList or mutableListOf() as state in Compose will cause your users to see incorrect or stale data in your app.

Mutable objects that are not observable, such as ArrayList or a mutable data class, cannot be observed by Compose to trigger recomposition when they change.

Instead of using non-observable mutable objects, we recommend you use an observable data holder such as State
> and the immutable listOf() .

Stateful versus stateless

A composable that uses remember to store an object creates internal state, making the composable stateful. HelloContent is an example of a stateful composable because it holds and modifies its name state internally. This can be useful in situations where a caller doesn’t need to control the state and can use it without having to manage the state themselves. However, composables with internal state tend to be less reusable and harder to test.

A stateless composable is a composable that doesn’t hold any state. An easy way to achieve stateless is by using state hoisting.

As you develop reusable composables, you often want to expose both a stateful and a stateless version of the same composable. The stateful version is convenient for callers that don’t care about the state, and the stateless version is necessary for callers that need to control or hoist the state.

State hoisting

State hoisting in Compose is a pattern of moving state to a composable’s caller to make a composable stateless. The general pattern for state hoisting in Jetpack Compose is to replace the state variable with two parameters:

• value: T : the current value to display
• onValueChange: (T) -> Unit : an event that requests the value to change, where T is the proposed new value

However, you are not limited to onValueChange . If more specific events are appropriate for the composable you should define them using lambdas like ExpandingCard does with onExpand and onCollapse .

State that is hoisted this way has some important properties:

• Single source of truth: By moving state instead of duplicating it, we’re ensuring there’s only one source of truth. This helps avoid bugs.
• Encapsulated: Only stateful composables will be able to modify their state. It’s completely internal.
• Shareable: Hoisted state can be shared with multiple composables. Say we wanted to name in a different composable, hoisting would allow us to do that.
• Interceptable: callers to the stateless composables can decide to ignore or modify events before changing the state.
• Decoupled: the state for the stateless ExpandingCard may be stored anywhere. For example, it’s now possible to move name into a ViewModel .

In the example case, you extract the name and the onValueChange out of HelloContent and move them up the tree to a HelloScreen composable that calls HelloContent .

By hoisting the state out of HelloContent , it’s easier to reason about the composable, reuse it in different situations, and test. HelloContent is decoupled from how its state is stored. Decoupling means that if you modify or replace HelloScreen , you don’t have to change how HelloContent is implemented.

The pattern where the state goes down, and events go up is called a unidirectional data flow. In this case, the state goes down from HelloScreen to HelloContent and events go up from HelloContent to HelloScreen . By following unidirectional data flow, you can decouple composables that display state in the UI from the parts of your app that store and change state.

Key Point: When hoisting state, there are three rules to help you figure out where state should go:

1. State should be hoisted to at least the lowest common parent of all composables that use the state (read).
2. State should be hoisted to at least the highest level it may be changed (write).
3. If two states change in response to the same events they should be hoisted together.

You can hoist state higher than these rules require, but underhoisting state will make it difficult or impossible to follow unidirectional data flow.

Restoring state in Compose

Use rememberSaveable to restore your UI state after an activity or process is recreated. rememberSaveable retains state across recompositions. In addition, rememberSaveable also retains state across activity and process recreation.

Ways to store state

All data types that are added to the Bundle are saved automatically. If you want to save something that cannot be added to the Bundle , there are several options.

Parcelize

The simplest solution is to add the @Parcelize annotation to the object. The object becomes parcelable, and can be bundled. For example, this code makes a parcelable City data type and saves it to the state.

MapSaver

If for some reason @Parcelize is not suitable, you can use mapSaver to define your own rule for converting an object into a set of values that the system can save to the Bundle .

ListSaver

To avoid needing to define the keys for the map, you can also use listSaver and use its indices as keys:

Managing state in Compose

Simple state hoisting can be managed in the composable functions itself. However, if the amount of state to keep track of increases, or the logic to perform in composable functions arises, it’s a good practice to delegate the logic and state responsibilities to other classes: state holders.

Key Term: State holders manage logic and state of composables.

Note that in other materials, state holders are also called hoisted state objects.

This section covers how to manage state in different ways in Compose. Depending on the complexity of the composable, there are different alternatives to consider:

• Composables for simple UI element state management.
• State holders for complex UI element state management. They own UI elements’ state and UI logic.
• Architecture Components ViewModels as a special type of state holder in charge of providing access to the business logic and the screen or UI state.

State holders come in a variety of sizes depending on the scope of the corresponding UI elements they manage, ranging from a single widget like a bottom app bar to a whole screen. State holders are compoundable; that is, a state holder may be integrated into another state holder, especially when aggregating states.

The following diagram shows a summary of the relationships between the entities involved in Compose state management. The rest of the section covers each entity in detail:

• A composable can depend on 0 or more state holders (that can be plain objects, ViewModels, or both) depending on its complexity.
• A plain state holder might depend on a ViewModel if it needs access to the business logic or screen state.
• A ViewModel depends on the business or data layers.

Summary of the (optional) dependencies for each entity involved in Compose state management.

Types of state and logic

In an Android app, there are different types of state to consider:

UI element state is the hoisted state of UI elements. For example, ScaffoldState handles the state of the Scaffold composable.

Screen or UI state is what needs to be displayed on the screen. For example, a CartUiState class that can contain the Cart items, messages to show to the user or loading flags. This state is usually connected with other layers of the hierarchy because it contains application data.

And also, there are different types of logic:

UI behavior logic or UI logic is related to how to display state changes on the screen. For example, navigation logic decides which screen to show next, or UI logic that decides how to display user messages on the screen that could be using snackbars or toasts. The UI behavior logic should always live in the Composition.

Business logic is what to do with state changes. For example making a payment or storing user preferences. This logic is usually placed in the business or data layers, never in the UI layer.

Composables as source of truth

Having UI logic and UI elements state in composables is a good approach if the state and logic is simple. For example, here’s the MyApp composable handling ScaffoldState and a CoroutineScope :

Because ScaffoldState contains mutable properties, all interactions with it should happen in the MyApp composable. Otherwise, if we pass it to other composables, they could mutate its state, which doesn’t comply with the single source of truth principle and makes tracking down bugs more difficult.

State holders as source of truth

When a composable contains complex UI logic that involves multiple UI elements’ state, it should delegate that responsibility to state holders. This makes this logic more testable in isolation, and reduces the composable’s complexity. This approach favors the separation of concerns principle: the composable is in charge of emitting UI elements, and the state holder contains the UI logic and UI elements’ state.

State holders are plain classes that are created and remembered in the Composition. Because they follow the composable’s lifecycle, they can take Compose dependencies.

If our MyApp composable from the Composables as source of truth section grows in responsibilities, we can create a MyAppState state holder to manage its complexity:

Because MyAppState takes dependencies, it’s a good practice to provide a method that remembers an instance of MyAppState in the Composition. In this case, the rememberMyAppState function.

Now, MyApp is focused on emitting UI elements, and delegates all the UI logic and UI elements’ state to MyAppState :

As you can see, incrementing a composable’s responsibilities increases the need for a state holder. The responsibilities could be in UI logic, or just in the amount of state to keep track of.

ViewModels as source of truth

If plain state holders classes are in charge of the UI logic and UI elements’ state, a ViewModel is a special type of state holder that is in charge of:

• providing access to the business logic of the application that is usually placed in other layers of the hierarchy such as the business and data layers, and
• preparing the application data for presentation in a particular screen, which becomes the screen or UI state.

ViewModels have a longer lifetime than the Composition because they survive configuration changes. They can follow the lifecycle of the host of Compose content–that is, activities or fragments–or the lifecycle of a destination or the Navigation graph if you’re using the Navigation library. Because of their longer lifetime, ViewModels should not hold long-lived references to state bound to the lifetime of the Composition. If they do, it could cause memory leaks.

We recommend screen-level composables to use ViewModels for providing access to business logic and being the source of truth for their UI state. Check the ViewModel and state holders section to see why ViewModels are a good fit for this.

The following is an example of a ViewModel used in a screen-level composable:

ViewModel and state holders

The benefits of ViewModels in Android development make them suitable for providing access to the business logic and preparing the application data for presentation on the screen. Namely, the benefits are:

• Operations triggered by ViewModels survive configuration changes.
• Integration with Navigation:
  • Navigation caches ViewModels while the screen is on the back stack. This is important to have your previously loaded data instantly available when you return to your destination. This is something more difficult to do with a state holder that follows the lifecycle of the composable screen.
  • The ViewModel is also cleared when the destination is popped off the back stack, ensuring that your state is automatically cleaned up. This is different from listening for the composable disposal that can happen for multiple reasons such as going to a new screen, due to a configuration change, etc.
• Integration with other Jetpack libraries such as Hilt.

Note: If ViewModel benefits don’t apply to your use case or you do things in a different way, you can move ViewModel’s responsibilities into state holders.

Because state holders are compoundable and ViewModels and plain state holders have different responsibilities, it’s possible for a screen-level composable to have both a ViewModel that provides access to business logic AND a state holder that manages its UI logic and UI elements’ state. Since ViewModels have a longer lifespan than state holders, state holders can take ViewModels as a dependency if needed.

The following code shows a ViewModel and plain state holder working together on an ExampleScreen :

Learn more

To learn more about state and Jetpack Compose, consult the following additional resources.

Codelabs

Videos

Content and code samples on this page are subject to the licenses described in the Content License. Java is a registered trademark of Oracle and/or its affiliates.

Источник