Oluşturmada Görünümleri Kullanma

Compose kullanıcı arayüzüne bir Android View hiyerarşisi ekleyebilirsiniz. Bu yaklaşım özellikle, AdView gibi henüz Compose'da kullanılamayan kullanıcı arayüzü öğelerini kullanmak istediğinizde kullanışlıdır. Bu yaklaşım, tasarlamış olabileceğiniz özel görünümleri yeniden kullanmanıza da olanak tanır.

Bir görünüm öğesi veya hiyerarşi eklemek için AndroidView composable'ı kullanın. AndroidView, View döndüren bir lambda iletildi. AndroidView, görünüm şişirildiğinde çağrılan bir update geri çağırması da sağlar. AndroidView, geri çağırma içindeki bir State okunduğunda yeniden oluşturulur. AndroidView, diğer birçok yerleşik composable'da olduğu gibi, örneğin üst composable'da konumunu ayarlamak için kullanılabilecek bir Modifier parametresi alır.

@Composable
fun CustomView() {
    var selectedItem by remember { mutableStateOf(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

Görüntüleme bağlamalı AndroidView

XML düzeni yerleştirmek için androidx.compose.ui:ui-viewbinding kitaplığı tarafından sağlanan AndroidViewBinding API'sini kullanın. Bunu yapmak için projenizde görüntüleme bağlamayı etkinleştirmelisiniz.

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

Tembel listelerde AndroidView

Tembel listede (LazyColumn, LazyRow, Pager vb.) AndroidView kullanıyorsanız 1.4.0-rc01 sürümünde kullanıma sunulan AndroidView aşırı yüklemesini kullanmayı düşünebilirsiniz. Bu aşırı yükleme, kapsayıcı beste, Geç listelerde olduğu gibi yeniden kullanıldığında Compose'un temel View örneğini yeniden kullanmasına olanak tanır.

Bu aşırı AndroidView yüklemesi 2 ek parametre ekler:

  • onReset - View öğesinin yeniden kullanılacağını bildirmek için geri arama çağrıldı. Görünümü yeniden kullanmayı etkinleştirmek için bu değer boş olmamalıdır.
  • onRelease (isteğe bağlı) - View öğesinin besteden çıktığını ve tekrar kullanılmayacağını belirtmek için çağrılan bir geri arama.

@OptIn(ExperimentalComposeUiApi::class)
@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

Compose'da parçalar

Compose'da Fragment eklemek için AndroidViewBinding composable'ı kullanın. AndroidViewBinding, composable'ın besteden ayrılması gibi parçanın kaldırılması gibi parçaya özgü işleme sahiptir.

Fragment için tutucu olarak FragmentContainerView içeren bir XML'yi şişirerek bunu yapabilirsiniz.

Örneğin, my_fragment_layout.xml öğesini tanımladıysanız android:name XML özelliğini Fragment sınıfınızın adıyla değiştirirken aşağıdaki gibi bir kod kullanabilirsiniz:

<androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.example.compose.snippets.interop.MyFragment" />
my_fragment_layout.xml

Bu parçayı Compose'da şu şekilde şişirin:

@Composable
fun FragmentInComposeExample() {
    AndroidViewBinding(MyFragmentLayoutBinding::inflate) {
        val myFragment = fragmentContainerView.getFragment<MyFragment>()
        // ...
    }
}

InteroperabilityAPIsSnippets.kt

Aynı düzende birden fazla parça kullanmanız gerekiyorsa her FragmentContainerView için benzersiz bir kimlik tanımladığınızdan emin olun.

Compose'dan Android çerçevesine çağrı yapma

Compose, Android çerçeve sınıfları kapsamında çalışır. Örneğin, Activity veya Fragment gibi Android View sınıflarında barındırılır ve Context, sistem kaynakları, Service veya BroadcastReceiver gibi Android çerçeve sınıflarını kullanabilir.

Sistem kaynakları hakkında daha fazla bilgi edinmek için Oluşturma'daki kaynaklar başlıklı makaleyi inceleyin.

Besteciler

CompositionLocal sınıfları, composable işlevler üzerinden verilerin dolaylı olarak geçirilmesini sağlar. Bunlara, genellikle kullanıcı arayüzü ağacının belirli bir düğümünde bir değer verilir. Bu değer, CompositionLocal öğesini composable işlevinde parametre olarak tanımlamadan composable alt öğeleri tarafından kullanılabilir.

CompositionLocal, Yazma kodunun Context, Configuration veya Yazma kodunun karşılık gelen LocalContext, LocalConfiguration ya da LocalView ile barındırıldığı View gibi Android çerçeve türlerinin değerlerini yaymak için kullanılır. IDE'de otomatik tamamlama ile daha kolay bulunabilirlik için CompositionLocal sınıflarına Local ön ekinin eklendiğini unutmayın.

Bir CompositionLocal öğesinin current özelliğini kullanarak mevcut değerine erişin. Örneğin, aşağıdaki kodda Toast.makeToast yöntemine LocalContext.current sağlanarak bir durum mesajı gösterilmektedir.

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

Daha eksiksiz bir örnek için bu belgenin sonundaki Örnek Olay: BroadcastReceivers bölümüne göz atın.

Diğer etkileşimler

İhtiyacınız olan etkileşim için tanımlanmış bir yardımcı yoksa en iyi uygulama, genel Compose kurallarına uymaktır. Veriler akan, etkinlikler yukarı gider (Yazma'da Düşünme bölümünde ayrıntılı olarak anlatılmıştır). Örneğin, bu composable farklı bir etkinlik başlatır:

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

Örnek olay: Yayın alıcıları

Compose'da taşımak veya uygulamak isteyebileceğiniz özelliklerin daha gerçekçi bir örneği ve CompositionLocal ile yan efektleri göstermek için BroadcastReceiver öğesinin, composable işlevden kaydedilmesi gerektiğini varsayalım.

Çözüm, mevcut bağlamı kullanmak için LocalContext ile rememberUpdatedState ve DisposableEffect yan etkilerinden yararlanır.

@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

Sonraki adımlar

Artık Görünümler'de Oluşturma işlevini kullanırken birlikte çalışabilirlik API'lerini ve bunun tersini öğrendiğinize göre daha fazla bilgi edinmek için Dikkat edilmesi gereken diğer noktalar sayfasını inceleyin.