Мови програмування мобільних пристроїв

Створення першого проекту на Jetpack Compose

Крок 1: Створення нового Android проєкту

1. Відкрийте Android Studio.
2. Виберіть New Project.
3. У вікні Create New Project оберіть шаблон Empty Compose Activity.
4. Натисніть Next.
5. Заповніть наступні поля:
   • Name: Вкажіть ім'я проєкту, наприклад, MyFirstComposeApp.
   • Package Name: Дайте відповідну назву пакету (наприклад, com.example.myfirstcomposeapp).
   • Save location: Оберіть місце збереження проєкту.
   • Language: Виберіть Kotlin.
   • Minimum SDK: Оберіть API 21: Android 5.0 (Lollipop) або вище.
6. Натисніть Finish.

Крок 2: Ознайомлення з шаблоном Jetpack Compose

Після створення проєкту, відкрийте файл MainActivity.kt. Ви побачите заготовку коду з основною функцією, яка використовує Jetpack Compose для побудови інтерфейсу:

package com.example.myfirstcomposeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import com.example.myfirstcomposeapp.ui.theme.MyFirstComposeAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyFirstComposeAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}


setContent { ... }
Це функція, яка використовується для відображення компонентів Jetpack Compose в активності.
Greeting("Android")
Це виклик функції, яка відображає текст. Функція Greeting приймає параметр name і виводить привітання.
Text(...)
Компонент для виведення тексту на екрані.
Крок 3: Зміна привітання
Змініть текст привітання на інший. Наприклад, змініть функцію Greeting так:
@Composable
fun Greeting(name: String) {
    Text(text = "Привіт, $name!")
}

В MainActivity змініть виклик Greeting, щоб передати інше ім’я:

Greeting("Світ")

Тепер текст на екрані відображатиме: Привіт, Світ!

Додайте стилізацію до вашого тексту, щоб зробити його більшим і центрувати на екрані.

@Composable
fun Greeting(name: String) {
    Text(
        text = "Привіт, $name!",
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(),
        style = MaterialTheme.typography.h4
    )
}

Тут ми додали такі модифікатори:

• fillMaxSize(): Заповнює весь доступний простір.
• wrapContentSize(): Центрує текст всередині контейнера.
• style: Використовуємо стандартний стиль заголовка (h4).

Крок 4: Запуск проєкту

1. Підключіть свій пристрій або використайте емулятор.
2. Натисніть кнопку Run в Android Studio, щоб запустити додаток.

Крок 5: Завдання для самостійної роботи

1. Додайте ще один компонент Text, який відображає вашу улюблену цитату.
2. Використайте різні стилі тексту для кожного з компонентів.
3. Спробуйте додати кнопку (компонент Button), яка при натисканні змінює текст на екрані.