Korzystanie z widoków w sekcji Utwórz

W interfejsie Compose możesz umieścić hierarchię widoków Androida. To podejście jest szczególnie przydatne, jeśli chcesz używać elementów interfejsu, które nie są jeszcze dostępne w Compose, np. AdView. Dzięki temu możesz też ponownie wykorzystywać zaprojektowane przez siebie widoki niestandardowe.

Aby uwzględnić element widoku lub hierarchię, użyj funkcji kompozycyjnej AndroidView . AndroidView otrzymuje wyrażenie lambda, które zwraca wartość View. AndroidView udostępnia też updatewywołanie zwrotne, które jest wywoływane po rozwinięciu widoku. Funkcja AndroidView jest ponownie komponowana, gdy zmieni się wartość State odczytana w wywołaniu zwrotnym. AndroidView, podobnie jak wiele innych wbudowanych funkcji kompozycyjnych, przyjmuje parametr Modifier, którego można użyć np. do ustawienia jego pozycji w funkcji kompozycyjnej nadrzędnej.

@Composable
fun CustomView() {
    var selectedItem by remember { mutableIntStateOf(0) }

    // Adds view to Compose
    AndroidView(
        modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree
        factory = { context ->
            // Creates view
            MyView(context).apply {
                // Sets up listeners for View -> Compose communication
                setOnClickListener {
                    selectedItem = 1
                }
            }
        },
        update = { view ->
            // View's been inflated or state read in this block has been updated
            // Add logic here if necessary

            // As selectedItem is read here, AndroidView will recompose
            // whenever the state changes
            // Example of Compose -> View communication
            view.selectedItem = selectedItem
        }
    )
}

@Composable
fun ContentExample() {
    Column(Modifier.fillMaxSize()) {
        Text("Look at this CustomView!")
        CustomView()
    }
}

InteroperabilityAPIsSnippets.kt

AndroidView z powiązaniem widoku

Aby osadzić układ XML, użyj interfejsu API AndroidViewBinding udostępnianego przez bibliotekę androidx.compose.ui:ui-viewbinding. Aby to zrobić, musisz włączyć w projekcie powiązanie widoku.

@Composable
fun AndroidViewBindingExample() {
    AndroidViewBinding(ExampleLayoutBinding::inflate) {
        exampleView.setBackgroundColor(Color.GRAY)
    }
}
InteroperabilityAPIsSnippets.kt

AndroidView na listach leniwych

Jeśli używasz AndroidView na liście leniwej (LazyColumn, LazyRow, Pager itp.), rozważ użycie przeciążenia AndroidView wprowadzonego w wersji 1.4.0-rc01. Ten przeciążony wariant umożliwia Compose ponowne użycie bazowej instancji View, gdy zawierająca ją kompozycja jest ponownie używana w niezmienionej postaci, jak w przypadku list leniwych.

Ten przeciążony operator AndroidView dodaje 2 dodatkowe parametry:

  • onReset – wywołanie zwrotne, które sygnalizuje, że obiekt View ma zostać ponownie użyty. Aby włączyć ponowne użycie widoku, ta wartość musi być różna od null.
  • onRelease (opcjonalnie) – wywołanie zwrotne, które jest wywoływane, aby zasygnalizować, że View opuścił kompozycję i nie będzie już ponownie używany.

@Composable
fun AndroidViewInLazyList() {
    LazyColumn {
        items(100) { index ->
            AndroidView(
                modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree
                factory = { context ->
                    MyView(context)
                },
                update = { view ->
                    view.selectedItem = index
                },
                onReset = { view ->
                    view.clear()
                }
            )
        }
    }
}
InteroperabilityAPIsSnippets.kt

Fragmenty w Compose

Aby dodać Fragment w Compose, użyj komponentu AndroidFragment. AndroidFragment ma obsługę specyficzną dla fragmentu, np. usuwanie fragmentu, gdy funkcja kompozycyjna opuszcza kompozycję.

Aby uwzględnić fragment, użyj funkcji AndroidFragment composable. Przekazujesz Fragment do AndroidFragment, które następnie dodaje instancję tej klasy bezpośrednio do kompozycji. AndroidFragment udostępnia też obiekt fragmentState do tworzenia AndroidFragment z określonym stanem, arguments do przekazywania do nowego fragmentu i onUpdate wywołanie zwrotne, które udostępnia fragment z kompozycji. Podobnie jak wiele innych wbudowanych funkcji kompozycyjnych, AndroidFragment akceptuje parametr Modifier, którego możesz użyć np. do ustawienia jego pozycji w funkcji kompozycyjnej nadrzędnej.

Wywołaj funkcję AndroidFragment w funkcji Compose w ten sposób:

@Composable
fun FragmentInComposeExample() {
    AndroidFragment<MyFragment>()
}

InteroperabilityAPIsSnippets.kt

Wywoływanie platformy Android z Compose

Compose działa w ramach klas platformy Android. Jest on na przykład hostowany w klasach widoku Androida, takich jak Activity lub Fragment, i może korzystać z klas platformy Androida, takich jak Context, zasoby systemowe, Service lub BroadcastReceiver.

Więcej informacji o zasobach systemowych znajdziesz w artykule Zasoby w Compose.

Composition Locals

CompositionLocal klasy umożliwiają niejawne przekazywanie danych za pomocą funkcji, które można łączyć. Zwykle mają one wartość w określonym węźle drzewa interfejsu. Jej wartość może być używana przez elementy podrzędne, które można łączyć, bez deklarowania CompositionLocal jako parametru w funkcji, którą można łączyć.

Symbol CompositionLocal służy do propagowania wartości typów platformy Android w Compose, takich jak Context, Configuration lub View, w którym jest hostowany kod Compose, z odpowiednimi wartościami LocalContext, LocalConfiguration lub LocalView. Pamiętaj, że klasy CompositionLocal mają przedrostek Local, co ułatwia ich wyszukiwanie za pomocą autouzupełniania w IDE.

Aby uzyskać dostęp do bieżącej wartości CompositionLocal, użyj właściwości current. Na przykład poniższy kod wyświetla komunikat typu toast, przekazując LocalContext.current do metody Toast.makeToast.

@Composable
fun ToastGreetingButton(greeting: String) {
    val context = LocalContext.current
    Button(onClick = {
        Toast.makeText(context, greeting, Toast.LENGTH_SHORT).show()
    }) {
        Text("Greet")
    }
}
InteroperabilityAPIsSnippets.kt

Bardziej szczegółowy przykład znajdziesz w sekcji Studium przypadku: BroadcastReceivers na końcu tego dokumentu.

Inne interakcje

Jeśli nie ma funkcji zdefiniowanej dla interakcji, której potrzebujesz, najlepszym rozwiązaniem jest przestrzeganie ogólnych wytycznych dotyczących Compose: dane przepływają w dół, a zdarzenia w górę (więcej informacji znajdziesz w artykule Myślenie w Compose). Na przykład ten komponent kompozycyjny uruchamia inną aktywność:

class OtherInteractionsActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // get data from savedInstanceState
        setContent {
            MaterialTheme {
                ExampleComposable(data, onButtonClick = {
                    startActivity(Intent(this, MyActivity::class.java))
                })
            }
        }
    }
}

@Composable
fun ExampleComposable(data: DataExample, onButtonClick: () -> Unit) {
    Button(onClick = onButtonClick) {
        Text(data.title)
    }
}
InteroperabilityAPIsSnippets.kt

Studium przypadku: odbiorniki

Aby przedstawić bardziej realistyczny przykład funkcji, które możesz chcieć przenieść lub zaimplementować w Compose, oraz zaprezentować CompositionLocal i efekty uboczne, załóżmy, że z funkcji kompozycyjnej trzeba zarejestrować BroadcastReceiver.

Rozwiązanie korzysta z funkcji LocalContext, aby używać bieżącego kontekstu, oraz z efektów ubocznych rememberUpdatedState i DisposableEffect.

@Composable
fun SystemBroadcastReceiver(
    systemAction: String,
    onSystemEvent: (intent: Intent?) -> Unit
) {
    // Grab the current context in this part of the UI tree
    val context = LocalContext.current

    // Safely use the latest onSystemEvent lambda passed to the function
    val currentOnSystemEvent by rememberUpdatedState(onSystemEvent)

    // If either context or systemAction changes, unregister and register again
    DisposableEffect(context, systemAction) {
        val intentFilter = IntentFilter(systemAction)
        val broadcast = object : BroadcastReceiver() {
            override fun onReceive(context: Context?, intent: Intent?) {
                currentOnSystemEvent(intent)
            }
        }

        context.registerReceiver(broadcast, intentFilter)

        // When the effect leaves the Composition, remove the callback
        onDispose {
            context.unregisterReceiver(broadcast)
        }
    }
}

@Composable
fun HomeScreen() {

    SystemBroadcastReceiver(Intent.ACTION_BATTERY_CHANGED) { batteryStatus ->
        val isCharging = /* Get from batteryStatus ... */ true
        /* Do something if the device is charging */
    }

    /* Rest of the HomeScreen */
}
InteroperabilityAPIsSnippets.kt

Dalsze kroki

Znasz już interfejsy API interoperacyjności podczas korzystania z Compose w widokach i odwrotnie. Aby dowiedzieć się więcej, zapoznaj się ze stroną Inne kwestie.