Krótkie wprowadzenie

Aby zapewnić sobie jak najlepsze warunki do tworzenia aplikacji za pomocą Compose, pobierz i zainstaluj Android Studio. Zawiera ona wiele funkcji inteligentnego edytora, takich jak nowe szablony projektów i możliwość natychmiastowego wyświetlenia podglądu interfejsu Compose i animacji.

Pobierz Android Studio

Wykonaj te instrukcje, aby utworzyć nowy projekt aplikacji Compose, skonfigurować Compose dla istniejącego projektu aplikacji lub zaimportować przykładową aplikację napisaną w Compose.

Tworzenie nowej aplikacji obsługującej Compose

Jeśli chcesz rozpocząć nowy projekt, który domyślnie obsługuje Compose, Android Studio zawiera różne szablony projektów, które ułatwią Ci rozpoczęcie pracy. Aby utworzyć nowy projekt z prawidłowo skonfigurowanym Compose:

  1. Jeśli widzisz okno Witamy w Android Studio, kliknij Rozpocznij nowy projekt w Android Studio. Jeśli masz już otwarty projekt w Android Studio, na pasku menu wybierz Plik > Nowy > Nowy projekt.
  2. W oknie Wybieranie szablonu projektu kliknij Pusty Activity i kliknij Dalej.
  3. W oknie Skonfiguruj projekt:
    1. Ustaw pola Nazwa, Nazwa pakietu i Zapisz lokalizację tak jak zwykle. Pamiętaj, że w menu Język jedyną dostępną opcją jest Kotlin, ponieważ Jetpack Compose działa tylko z klasami napisanymi w Kotlinie.
    2. W menu Minimalny poziom interfejsu API wybierz poziom API 21 lub wyższy.
  4. Kliknij Zakończ.

Możesz już zacząć tworzyć aplikację za pomocą Jetpack Compose. Aby rozpocząć korzystanie z zestawu narzędzi i dowiedzieć się, co możesz z nim zrobić, obejrzyj samouczek Jetpacka dotyczący tworzenia treści.

Konfigurowanie Compose w istniejącej aplikacji

Najpierw skonfiguruj kompilator Compose za pomocą wtyczki Gradle do kompilatora Compose.

Następnie dodaj do pliku build.gradle aplikacji tę definicję:

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Ustawienie flagi compose na true w bloku Androida BuildFeatures włącza funkcję Compose w Android Studio.

Na koniec dodaj do zależności zestaw materiałów Compose i podzbiór zależności biblioteki Compose, których potrzebujesz, z tego bloku:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.10.01")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Wypróbuj przykładowe aplikacje Jetpack Compose

Najszybszym sposobem na eksperymentowanie z możliwościami Jetpack Compose jest wypróbowanie przykładowych aplikacji Jetpack Compose hostowanych na GitHubie. Aby zaimportować projekt przykładowej aplikacji z Android Studio:

  1. Jeśli jesteś w oknie Witamy w Android Studio, wybierz Importuj przykład kodu Androida. Jeśli masz już otwarty projekt w Android Studio, na pasku menu kliknij Plik > Nowy > Importuj przykład.
  2. Na pasku wyszukiwania u góry kreatora Przeglądanie próbek wpisz „compose”.
  3. W wynikach wyszukiwania wybierz jedną z przykładowych aplikacji Jetpack Compose i kliknij Dalej.
  4. Zmień Nazwa aplikacji i Lokalizacja projektu lub pozostaw domyślne wartości.
  5. Kliknij Zakończ.

Android Studio pobierze przykładową aplikację na wskazaną ścieżkę i otworzy projekt. Następnie możesz sprawdzić MainActivity.kt w każdym z tych przykładów, aby zobaczyć interfejsy Jetpack Compose, takie jak animacja przejścia, komponenty niestandardowe, typografia i wyświetlanie jasnych i ciemnych kolorów w podglądzie w IDE.

Aby używać Jetpack Compose na Wear OS, zapoznaj się z artykułem Konfigurowanie Jetpack Compose na Wear OS.