CC BY
0
СРАВНИТЕЛЬНЫЙ АНАЛИЗ XML И JETPACK COMPOSE В ANDROID РАЗРАБОТКЕ
Д.Г. Алипатова, студент
А.В. Свищёв, старший преподаватель
МИРЭА - Российский технологический университет
(Россия, г. Москва)
DOI:10.24412/2500-1000-2024-11-2-142-146
Аннотация. В данной статье рассматриваются основные подходы к созданию пользовательских интерфейсов в Android-приложениях. Описываются преимущества и недостатки использования XML, который остается популярным в крупных проектах, и Jetpack Compose, который предлагает декларативный подход и упрощает разработку. Приводятся примеры успешного перехода с XML на Compose и обсуждаются перспективы его дальнейшего развития в контексте современных требований к разработке.
Ключевые слова: Jetpack Compose, XML, Android-разработка, UI.
Разработка пользовательских интерфейсов (UI) является одной из ключевых задач в Android разработке. С момента появления платформы Android разработчики использовали различные подходы для создания интерфейсов, начиная с XML-разметки и заканчивая современными декларативными методами, такими как Jetpack Compose. В последние годы Jetpack Compose стал все более популярным, предлагая более интуитивный и гибкий способ создания UI, что заставляет разработчиков пересматривать свои подходы и методы.
Исторический контекст: эволюция Android UI.
ML (extensible Markup Language) был введен в Android с первых версий. Этот подход стал стандартом, который позволял отделить логику приложения от его визуального представления. XML-дизайнеры активно использовались в Android Studio, что позволяло разработчикам легко настраивать визуальные элементы с помощью графического интерфейса.
С течением времени XML нашел широкое применение в разработке сложных интерфейсов, однако растущая сложность приложений, необходимость в динамическом изменении интерфейса и непростой процесс обработки состояния привели к необходимости поисков более эффективных методов.
Jetpack Compose был анонсирован в 2019 году на конференции Google I/O как решение, которое должно было упростить процессы создания интерфейсов [1]. Это фреймворк раз-
работан с концепцией декларативного программирования, что позволяет разработчикам описывать интерфейс приложения с использованием обычного кода на Kotlin. В отличие от XML, Jetpack Compose позволяет разработчикам более естественно работать с состоянием интерфейса, так как изменения в состоянии автоматически отражаются в UI без необходимости явного управления этими изменениями.
Jetpack Compose также предлагает множество встроенных компонентов, более простое создание анимаций и использование тем, а также улучшенную интеграцию с другими библиотеками Jetpack. Это позволило значительно сократить количество кода и упростить поддержку и масштабируемость приложений.
Краткий обзор XML.
XML (eXtensible Markup Language) является форматом разметки, который используется в Android для описания пользовательского интерфейса (UI) приложения.
XML-файлы в Android имеют иерархическую структуру. Каждый элемент в XML-дереве представляет собой вид (View) или контейнер (ViewGroup).
ViewGroup - это контейнеры, которые могут содержать другие представления (например, LinearLayout, RelativeLayout, ConstraintLayout). View - это базовые элементы интерфейса, такие как TextView, Button, ImageView.
Например, файл макета может выглядеть следующим образом:
Листинг 1. Пример XML-кода <LinearLayout
xmlns:android="http://schemas.andraid.com/apk/res/andraid" android:layout_width="match_parent" android:layout_height="match_parent" android :ori entation="vertical">
<TextView
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="np™eT, мир!" />
<Button
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Нажми меня" /> </LinearLayout>
В этом примере LinearLayout является контейнером, который располагает свои дочерние элементы (в данном случае, TextView и Button) вертикально.
В этом примере атрибут textColor устанавливает цвет текста кнопки, а атрибут background задает цвет фона.
Краткий обзор Jetpack Compose.
Jetpack Compose - это декларативный фреймворк для создания нативного пользовательского интерфейса на Android [2].
Декларативное программирование отличается от императивного тем, что вместо указания последовательности шагов для достижения результата, разработчик описывает ко-
XML позволяет задавать различные стили и атрибуты для компонентов. Например, можно изменить цвет текста и фона кнопки:
Для обработки событий, таких как нажатие на кнопку, необходимо установить слушатель в коде Java или Kotlin.
нечный результат. В контексте Jetpack Compose это означает, что разработчики могут сосредоточиться на том, что должно быть отображено на экране, а не на том, как это должно быть реализовано.
В Jetpack Compose код выглядит более лаконично:
Листинг 2. Пример изменения цветов в кнопке с XML <Button
android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Нажми меня" android :textColor="#FFFFFF" android:background="@color/colorPrimary" />
Листинг 3. Пример обработки нажатий с XML-разметкой val button: Button = findViewById(R.id.button) button.setOnClickListener {
// Действие при нажатии на кнопку
Toast.makeText(this, "Кнопка нажата!", Toast.LENGTH_SHORT).show()
}
Здесь мы определяем функцию MyButton, которая принимает лямбда-выражение onClick и отображает кнопку с текстом. Мы не заботимся о том, как именно кнопка будет создана - мы просто описываем, что она должна делать и как должна выглядеть.
Рассмотрим более сложный пример, где мы создаем экран с текстовым полем и кнопкой. При нажатии на кнопку текст из текстового поля будет отображаться ниже:
Листинг 4. Пример создания кнопки на Compose @Composable
fun MyButton(onClick: () -> Unit) { Button(onClick = onClick) { Тех^'Нажми меня")
}
}
Листинг 5. Пример экрана на Compose
@Composable fun GreetingAppO {
var name by remember { mutableStateOf("") } var greeting by remember { mutableStateOf("") }
Column(modifier = Modifier.padding(16.dp)) { TextField( value = name,
onValueChange = { name = it }, label = { Тех^'Ъведите ваше имя") }
)
Spacer(modifier = Modifier.height(8.dp)) Button(onClick = { greeting = "Привет, $name!" }) { Тех^'Поздороваться")
}
Spacer(modifier = Modifier.height(16.dp)) Text(text = greeting)
}
}
В этом примере мы используем несколько компонентов Compose: TextField, Button, Text и Column. Мы также используем remember для хранения состояния переменных name и greeting. Каждый раз, когда пользователь вводит текст или нажимает кнопку, интерфейс автоматически обновляется в зависимости от текущего состояния.
Jetpack Compose включает поддержку Material Design. Библиотека предоставляет готовые компоненты, соответствующие принципам Material Design, а также возможность ка-стомизации для создания уникального стиля.
Сравнение по ключевым характеристикам:
1. Удобство использования. XML имеет явно определённый синтаксис, который легко
осваивается, особенно для новичков. Однако, для больших макетов количество кода может значительно увеличиться, что усложняет чтение и поддержку. В Jetpack Compose благодаря декларативному подходу код проще и менее многословен. Так как сейчас большинство Android-приложений пишутся на Kotlin, код имеет единый стиль, что также упрощает процесс разработки.
2. Производительность. Рендеринг в Jetpack Compose является одним из основных недостатков фреймворка. Согласно замерам времени рендера, чистый XML является самым быстрым по производительность, затем идёт чистый Compose, далее встроенный compose в XML и наоборот, однако все эти отличия не являются колоссальными. Сильно
же отличается использовании Compose без R8 в режиме отладки, этот подход показывает значительно худший результат по производительности [3].
3. Гибкость и расширяемость. В Jetpack Compose создание кастомных компонентов происходит через функции, тогда как в XML это делается при помощи наследования от стандартных классов View, что гораздо сложнее. Также в Jetpack Compose реакция на изменения состояния осуществляется автоматически. Использование State и MutableState в Compose позволяет легко отслеживать изменения данных. С одной стороны, это без-
условно упрощает процесс разработки, но также это может повлечь ошибки, связанные с большим количеством перерисовок.
4. Инструменты и экосистема.
Одним из главных преимуществ XML является наличие мощного визуального редактора Android Studio Layout Editor в Android Studio, который позволяет разработчикам создавать интерфейсы с помощью перетаскивания элементов. Он автоматически генерирует соответствующий XML-код, что делает его доступным для разработчиков, не обладающих глубокими знаниями программирования.
Common AbTtxtVitw « ti / L О у«»«
Ü Plain In( il ("«word _V vo-мл. - + _
Button) ¡ь ftsMMud (NU... Mi-null ¡ь Mult)Unr Tnl conti« ^ malthjiiitnt т Ii" mauhjiifcnl т .«jinAcüvily
r »Tim» ¡ь от Number (Sign... Tre« 0
Component L------------„.. |«мГ RaM em
4, ConicraimUyoin M>MltWtM "HillO A ■ ■ щ -«- 0 -«- 0
* □
*n4 «ТО|<Ч!ПГ1«1СШ »lt!q*l.l пмщлц avaw T«
Рис. 1. Android Studio Layout Editor в Android Studio
XML является традиционным способом создания интерфейсов в Android и поддерживается с момента появления платформы. Большое количество библиотек и компонентов уже адаптированы для работы с XML.
Jetpack Compose предлагает функцию Live Preview, которая позволяет разработчикам видеть изменения в реальном времени по мере редактирования кода. Также фреймворк предоставляет набор готовых компонентов, которые легко настраиваются и комбинируются, что упрощает создание сложных интерфейсов. Несмотря на то что Jetpack Compose относительно нов, сообщество быстро растет, и появляются новые библиотеки и инструменты, адаптированные под этот подход. Google активно поддерживает его внедрение в новые проекты.
Перспективы развития.
Так как XML долгое время являлся основным способом создания UI в Android-разработке, большинство больших приложений написано именно на нём. Крупные проек-
ты переписывать на Jetpack Compose может быть сложно и дорого, поэтому XML-код сейчас поддерживается, но новые модули, как правило, пишутся на Jetpack Compose. Однако есть и успешные примеры перехода крупных проектов на более новую технологию. Один из ярких примеров - приложение Google Maps, которое постепенно интегрирует Compose [4]. Результатом стало существенное сокращение времени на разработку нового функционала и обновление интерфейса.
С учётом растущего числа библиотек и ресурсов, создаваемых сообществом, можно ожидать, что в будущем количество приложений, использующих Jetpack Compose, будет только расти. При этом XML всё ещё сохранит свою значимость, поскольку многие устаревшие приложения нуждаются в поддержке и обновлении. Однако, по мере роста числа новых приложений и появления новых стандартов, Jetpack Compose может стать основной технологией для разработки интерфейсов в Android.
Библиографический список
1. Google I/O 2019: Empowering developers to build the best experiences on Android + Play. -[Электронный ресурс]. - Режим доступа: https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html (дата обращения 07.11.2024).
2. Android Developers "Jetpack Compose". - [Электронный ресурс]. - Режим доступа: https://developer.android.com/compose (дата обращения 07.11.2024).
3. Клоков, С.А. Сравнительный анализ времени отображения экранов с использованием стандартного подхода в Android и библиотеки Jetpack Compose / С.А. Клоков // Молодой ученый. -2022. - № 4 (399). - С. 12-16.
4. Google Maps Platform "Compose for the Maps SDK for Android". - [Электронный ресурс]. -Режим доступа: https://mapsplatform.google.com/resources/blog/compose-maps-sdk-android-now-available/ (дата обращения: 07.11.2024).
COMPARATIVE ANALYSIS OF XML AND JETPACK COMPOSE IN ANDROID
DEVELOPMENT
D.G. Alipatova, Student
A.V. Svishchev, Senior Lecturer
MIREA - Russian Technological University
(Russia, Moscow)
Abstract. This article discusses the main approaches to creating user interfaces in Android applications. The advantages and disadvantages of using XML, which remains popular in large projects, and Jetpack Compose, which offers a declarative approach and simplifies development, are described. Examples of a successful transition from XML to Compose are given and prospects for its further development in the context of modern development requirements are discussed. Keywords: Jetpack Compose, XML, Android development, UI.
