Compose und andere Bibliotheken

Sie können Ihre bevorzugten Bibliotheken in Compose verwenden. In diesem Abschnitt wird beschrieben, wie Sie einige der nützlichsten Bibliotheken einbinden.

Aktivität

Wenn Sie Compose in einer Aktivität verwenden möchten, müssen Sie ComponentActivity verwenden, eine Unterklasse von Activity, die die entsprechenden LifecycleOwner und Komponenten für Compose bereitstellt. Außerdem werden zusätzliche APIs bereitgestellt, die Ihren Code von überschreibenden Methoden in Ihrer Aktivitätsklasse entkoppeln. Activity Compose stellt diese APIs für Compose-Funktionen bereit, sodass Sie keine Methoden außerhalb Ihrer Compose-Funktionen mehr überschreiben oder eine explizite Activity-Instanz abrufen müssen. Außerdem sorgen diese APIs dafür, dass sie nur einmal initialisiert werden, die Neuzusammensetzung überstehen und ordnungsgemäß bereinigt werden, wenn das Compose-Element aus der Zusammensetzung entfernt wird.

Aktivitätsergebnis

Mit der rememberLauncherForActivityResult() API können Sie ein Ergebnis aus einer Aktivität in Ihrer zusammensetzbaren Funktion abrufen:

@Composable
fun GetContentExample() {
    var imageUri by remember { mutableStateOf<Uri?>(null) }
    val launcher = rememberLauncherForActivityResult(ActivityResultContracts.GetContent()) { uri: Uri? ->
        imageUri = uri
    }
    Column {
        Button(onClick = { launcher.launch("image/*") }) {
            Text(text = "Load Image")
        }
        Image(
            painter = rememberAsyncImagePainter(imageUri),
            contentDescription = "My Image"
        )
    }
}

Dieses Beispiel zeigt einen einfachen GetContent()-Vertrag. Durch Tippen auf die Schaltfläche wird die Anfrage gestartet. Das nachgestellte Lambda für rememberLauncherForActivityResult() wird aufgerufen, sobald der Nutzer ein Bild auswählt und zur Startaktivität zurückkehrt. Dadurch wird das ausgewählte Bild mit der rememberImagePainter()-Funktion von Coil geladen.

Jede Unterklasse von ActivityResultContract kann als erstes Argument für rememberLauncherForActivityResult() verwendet werden. Das bedeutet, dass Sie mit dieser Technik Inhalte vom Framework und in anderen gängigen Mustern anfordern können. Sie können auch eigene benutzerdefinierte Verträge erstellen und mit dieser Technik verwenden.

Laufzeitberechtigungen anfordern

Die oben beschriebene Activity Result API und rememberLauncherForActivityResult() können verwendet werden, um Laufzeitberechtigungen anzufordern. Dazu wird der Vertrag RequestPermission für eine einzelne Berechtigung oder der Vertrag RequestMultiplePermissions für mehrere Berechtigungen verwendet.

Die Accompanist Permissions-Bibliothek kann auch als Ebene über diesen APIs verwendet werden, um den aktuellen Status der Berechtigungen einem Status zuzuordnen, der von der Compose-UI verwendet werden kann.

Button „Zurück“ des Systems verarbeiten

Wenn du eine benutzerdefinierte Rückwärtsnavigation bereitstellen und das Standardverhalten der Systemschaltfläche „Zurück“ in deiner zusammensetzbaren Funktion überschreiben möchtest, kannst du mit der zusammensetzbaren Funktion einen BackHandler verwenden, um dieses Ereignis abzufangen:

var backHandlingEnabled by remember { mutableStateOf(true) }
BackHandler(backHandlingEnabled) {
    // Handle back press
}

Das erste Argument steuert, ob der BackHandler derzeit aktiviert ist. Sie können dieses Argument verwenden, um den Handler basierend auf dem Status der Komponente vorübergehend zu deaktivieren. Das nachgestellte Lambda wird aufgerufen, wenn der Nutzer ein Systemereignis zum Zurückgehen auslöst und BackHandler derzeit aktiviert ist.

ViewModel

Wenn Sie die ViewModel-Bibliothek für Architekturkomponenten verwenden, können Sie von jeder zusammensetzbaren Funktion aus auf ein ViewModel zugreifen, indem Sie die Funktion viewModel() aufrufen. Fügen Sie Ihrer Gradle-Datei die folgende Abhängigkeit hinzu:

Groovy

dependencies {
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.11.0'
}

Kotlin

dependencies {
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.11.0")
}

Anschließend können Sie die Funktion viewModel() in Ihrem Code verwenden.

class MyViewModel : ViewModel() { /*...*/ }

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    // use viewModel here
}

viewModel() gibt eine vorhandene ViewModel zurück oder erstellt eine neue. Standardmäßig ist der zurückgegebene ViewModel auf die umschließende Aktivität, das Fragment oder das Navigationsziel beschränkt und wird so lange beibehalten, wie der Bereich aktiv ist.

Wenn die komponierbare Funktion beispielsweise in einer Activity verwendet wird, gibt viewModel() dieselbe Instanz zurück, bis die Activity abgeschlossen oder der Prozess beendet wird.

class MyViewModel : ViewModel() { /*...*/ }
// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    // Returns the same instance as long as the activity is alive,
    // just as if you grabbed the instance from an Activity or Fragment
    viewModel: MyViewModel = viewModel()
) { /* ... */ }

@Composable
fun MyScreen2(
    viewModel: MyViewModel = viewModel() // Same instance as in MyScreen
) { /* ... */ }

Nutzungsrichtlinien

In der Regel greifst du auf ViewModel-Instanzen auf Bildschirmebene zu, also in der Nähe eines Root-Composables, das von einer Aktivität, einem Fragment oder einem Ziel eines Navigationsgraphen aufgerufen wird. Das liegt daran, dass ViewModels standardmäßig auf diese Objekte auf Bildschirmebene beschränkt sind. Weitere Informationen zum Lebenszyklus und Umfang eines ViewModel

Vermeiden Sie es, ViewModel-Instanzen an andere Composables weiterzugeben, da dies das Testen dieser Composables erschweren und Vorabversionen beeinträchtigen kann. Übergeben Sie stattdessen nur die Daten und Funktionen, die sie benötigen, als Parameter.

Du kannst ViewModel-Instanzen verwenden, um den Status für Composables unterhalb der Bildschirmebene zu verwalten. Beachte jedoch den Lebenszyklus und den Bereich von ViewModel. Wenn die komponierbare Funktion eigenständig ist, können Sie Hilt verwenden, um die ViewModel einzufügen. So müssen Sie keine Abhängigkeiten von übergeordneten komponierbaren Funktionen übergeben.

Wenn Ihr ViewModel Abhängigkeiten hat, akzeptiert viewModel() ein optionales ViewModelProvider.Factory als Parameter.

Weitere Informationen zu ViewModel in Compose und zur Verwendung von Instanzen mit der Navigation Compose-Bibliothek oder Aktivitäten und Fragmenten finden Sie in der Dokumentation zur Interoperabilität.

Datenstreams

Compose enthält Erweiterungen für die gängigsten streambasierten Lösungen von Android. Jede dieser Erweiterungen wird von einem anderen Artefakt bereitgestellt:

Diese Artefakte werden als Listener registriert und stellen die Werte als State dar. Immer wenn ein neuer Wert ausgegeben wird, setzt Compose die Teile der Benutzeroberfläche neu zusammen, in denen dieser state.value verwendet wird. In diesem Code wird ShowData beispielsweise jedes Mal neu zusammengesetzt, wenn exampleLiveData einen neuen Wert ausgibt.

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    val dataExample = viewModel.exampleLiveData.observeAsState()

    // Because the state is read here,
    // MyScreen recomposes whenever dataExample changes.
    dataExample.value?.let {
        ShowData(dataExample)
    }
}

Asynchrone Vorgänge in Compose

Mit Jetpack Compose können Sie asynchrone Vorgänge mithilfe von Koroutinen innerhalb Ihrer Composables ausführen.

Weitere Informationen finden Sie in der Dokumentation zu Nebenwirkungen unter den APIs LaunchedEffect, produceState und rememberCoroutineScope.

Die Navigationskomponente bietet Unterstützung für Jetpack Compose-Anwendungen. Weitere Informationen finden Sie unter Mit Compose navigieren und Jetpack Navigation zu Navigation Compose migrieren.

Hilt

Hilt ist die empfohlene Lösung für die Abhängigkeitsinjektion in Android-Apps und funktioniert nahtlos mit Compose.

Die im Abschnitt „ViewModel“ erwähnte Funktion viewModel() verwendet automatisch das ViewModel, das Hilt mit der Annotation @HiltViewModel erstellt. Wir haben eine Dokumentation mit Informationen zur ViewModel-Integration von Hilt bereitgestellt.

@HiltViewModel
class MyViewModel @Inject constructor(
    private val savedStateHandle: SavedStateHandle,
    private val repository: ExampleRepository
) : ViewModel() { /* ... */ }

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) { /* ... */ }

Hilt und Navigation

Hilt lässt sich auch in die Navigation Compose-Bibliothek einbinden. Fügen Sie Ihrer Gradle-Datei die folgenden zusätzlichen Abhängigkeiten hinzu:

Groovy

dependencies {
    implementation 'androidx.hilt:hilt-navigation-compose:1.4.0'
}

Kotlin

dependencies {
    implementation("androidx.hilt:hilt-navigation-compose:1.4.0")
}

Wenn Sie Navigation Compose verwenden, sollten Sie immer die zusammensetzbare Funktion hiltViewModel verwenden, um eine Instanz Ihres mit @HiltViewModel annotierten ViewModel abzurufen. Dies funktioniert mit Fragmenten oder Aktivitäten, die mit @AndroidEntryPoint annotiert sind.

Wenn ExampleScreen beispielsweise ein Ziel in einem Navigationsgraphen ist, rufen Sie hiltViewModel() auf, um eine Instanz von ExampleViewModel abzurufen, die auf das Ziel beschränkt ist, wie im folgenden Code-Snippet gezeigt:

// import androidx.hilt.navigation.compose.hiltViewModel

@Composable
fun MyApp() {
    val navController = rememberNavController()
    val startRoute = "example"
    NavHost(navController, startDestination = startRoute) {
        composable("example") { backStackEntry ->
            // Creates a ViewModel from the current BackStackEntry
            // Available in the androidx.hilt:hilt-navigation-compose artifact
            val viewModel = hiltViewModel<MyViewModel>()
            MyScreen(viewModel)
        }
        /* ... */
    }
}

Wenn Sie stattdessen die Instanz eines ViewModel abrufen müssen, der auf Navigationsrouten oder den Navigationsgraphen beschränkt ist, verwenden Sie die zusammensetzbare Funktion hiltViewModel und übergeben Sie die entsprechende backStackEntry als Parameter:

// import androidx.hilt.navigation.compose.hiltViewModel
// import androidx.navigation.compose.getBackStackEntry

@Composable
fun MyApp() {
    val navController = rememberNavController()
    val startRoute = "example"
    val innerStartRoute = "exampleWithRoute"
    NavHost(navController, startDestination = startRoute) {
        navigation(startDestination = innerStartRoute, route = "Parent") {
            // ...
            composable("exampleWithRoute") { backStackEntry ->
                val parentEntry = remember(backStackEntry) {
                    navController.getBackStackEntry("Parent")
                }
                val parentViewModel = hiltViewModel<ParentViewModel>(parentEntry)
                ExampleWithRouteScreen(parentViewModel)
            }
        }
    }
}

Paging

Mit der Paging-Bibliothek können Sie Daten schrittweise laden. Sie wird in Compose unterstützt. Die Seite zum Paging-Release enthält Informationen zur zusätzlichen paging-compose-Abhängigkeit, die dem Projekt hinzugefügt werden muss, und zu ihrer Version.

Hier ist ein Beispiel für die Compose APIs der Paging-Bibliothek:

@Composable
fun MyScreen(flow: Flow<PagingData<String>>) {
    val lazyPagingItems = flow.collectAsLazyPagingItems()
    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it }
        ) { index ->
            val item = lazyPagingItems[index]
            Text("Item is $item")
        }
    }
}

Weitere Informationen zur Verwendung von Paging in Compose findest du in der Dokumentation zu Listen und Rastern.

Maps

Sie können die Maps Compose-Bibliothek verwenden, um Google Maps in Ihre App einzubinden. Hier ein Beispiel:

@Composable
fun MapsExample() {
    val singapore = LatLng(1.35, 103.87)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 10f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        Marker(
            state = remember { MarkerState(position = singapore) },
            title = "Singapore",
            snippet = "Marker in Singapore"
        )
    }
}