Хомяков

1.

Jetpack Compose

2.

• UI или пользовательский интерфейс (от
англ. User Interface), — это совокупность
элементов и компонентов, с которыми
взаимодействует пользователь при работе
с программным обеспечением.

3.

Ранее разработка интерфейсов на Android основывалась на XML-разметке и
использовании классов View. Этот подход имел свои недостатки: он требовал
много шаблонного кода, часто приводил к сложностям при управлении
состоянием интерфейса и не всегда был интуитивно понятным.
Jetpack Compose основан на декларативном подходе. Это означает, что мы
описываем, как должен выглядеть интерфейс в зависимости от состояния, а
не указываем, как его создать пошагово. Например, вместо того чтобы
добавлять элементы в иерархию View, мы просто описываем, что должно
отображаться.

4.

Давайте рассмотрим пример интерактивности в пользовательском
интерфейсе (UI) на основе двух различных подходов: традиционного
(на основе XML и классов View) и современного (декларативного) с
использованием Jetpack Compose.

5.

XML разметка (activity_main.xml):
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Нажми меня" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Привет!" />
Java/Kotlin код (MainActivity.java):
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?)
{
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val button: Button = findViewById(R.id.button)
val textView: TextView =
findViewById(R.id.textView)
button.setOnClickListener {
textView.text = "Вы нажали кнопку!"
}
@Composable
fun MyApp() {
var text by remember { mutableStateOf("Привет!") }
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxSize()
){
Button(onClick = { text = "Вы нажали кнопку!" }) {
Text("Нажми меня")
}
Text(text = text)
}
}

6.

Composable функции
@Composable
fun Greeting(name: String) {
Text(text = "Hello, $name!")
}

7.

В Jetpack Compose мы работаем с различными компонентами пользовательского
интерфейса. Это такие элементы, как Text, Button, Image и другие. Также есть Layoutкомпоненты, такие как Column, Row и Box, которые помогают организовать размещение
элементов на экране.

8.

9.

Одним из больших преимуществ Jetpack Compose является возможность
интеграции с существующими проектами. Вы можете использовать Compose
в старых приложениях, совместно с традиционными View и XML. Это
позволяет постепенно переходить на новый подход, не отказываясь от уже
разработанных компонентов.

10.

В заключение, Jetpack Compose представляет собой значительный шаг
вперед в разработке пользовательских интерфейсов для Android. Он
упрощает процесс создания UI, делает код более чистым и понятным, а
также открывает новые возможности для разработки адаптивных и
интерактивных приложений. Я уверен, что Jetpack Compose будет играть
важную роль в будущем Android-разработки.