Composable Nedir

Jetpack Compose'da XML yerleşimlerini şişirmek yerine işlevler yazarak ekranlar oluşturursunuz. Composable, kullanıcı arayüzünüzün bir bölümünü açıklayan basit bir Kotlin işlevidir.

Böyle bir işlevi @Composable ek açıklamasıyla işaretlersiniz. Bu, Compose derleyicisine işlevin kullanıcı arayüzü üretebileceğini ve diğer composable işlevleri çağırabileceğini bildirir.

Bir işlevin üzerine @Composable eklemek, Compose'un güçlü özelliklerini etkinleştirir. İşlevin içinde Text veya Column gibi diğer composable işlevleri çağırabilirsiniz.

Geleneksel olarak composable işlev adları, sınıflarda olduğu gibi büyük harfle başlar. Bu, kullanıcı arayüzü işlevlerini kodunuzda kolayca fark etmenizi sağlar.

Bir composable, View nesnesi döndürmez. Bunun yerine Compose onu çalıştırdığında bir yan etki olarak kullanıcı arayüzü üretir. Ekranda ne görünmesi gerektiğini açıklamanız yeterlidir.

Buna bildirimsel stil denir: kullanıcı arayüzünün mevcut veriler için nasıl görüneceğini belirtirsiniz, Compose ise nasıl çizileceğini belirler.

Asıl güç iç içe kullanımdan gelir. Bir composable, diğer composable işlevleri çağırarak karmaşık ekranları küçük ve yeniden kullanılabilir parçalardan oluşturmanızı sağlar.

Burada bir üst composable, bir alt composable'ı çağırır. Compose bunları yukarıdan aşağıya çalıştırır ve üretilen kullanıcı arayüzünü düzenler.

Çoğu composable Unit döndürür; bu, kullanışlı bir değer döndürmediği anlamına gelir. Görevi bir değer vermek değil, kullanıcı arayüzü üretmektir.

Bu nedenle bir composable'ı sonuç yakalamak için değil, ekran üzerindeki etkisi için çağırırsınız. Bu, normal işlevlerden farklı hissettirebilir; ancak kısa sürede doğal hâle gelir.

Composable işlevler, normal Kotlin işlevleri gibi parametre alabilir. Bu sayede aynı composable farklı verileri görüntüleyebilir.

Burada Greeting, bir name kabul eder ve onu gösterir. Verileri içeri aktarmak, composable işlevlerinizi uygulama genelinde esnek ve yeniden kullanılabilir hâle getirir.

Composable işlevler olduğundan, birini farklı bağımsız değişkenlerle birçok kez çağırabilirsiniz. Her çağrı, kullanıcı arayüzünün kendi kopyasını üretir.

Kendinizi tekrarlamaktan böyle kaçınırsınız: kullanıcı arayüzünü bir kez yazın, sonra ihtiyaç duyduğunuz her yerde yeniden kullanın.

Composable işlevleri Android etkinliğinizin içinde setContent kullanarak yerleştirirsiniz. Bu blok, Compose'un ekranın yönetimini devraldığı giriş noktasıdır.

setContent içinde en üst düzey composable işlevinizi çağırırsınız; onun ürettiği her şey uygulamanızın kullanıcı arayüzü olur.

Bir composable'ın okuduğu veriler değiştiğinde Compose, ekranı güncellemek için bu işlevi yeniden çalıştırır. Bu yeniden çalıştırmaya yeniden oluşturma denir.

Kullanıcı arayüzünü elle güncellemezsiniz. Verileri değiştirirsiniz, Compose da etkilenen composable işlevleri otomatik olarak yeniden oluşturur. Böylece ekranınız durumunuzla eşzamanlı kalır.

Her composable'ın tek ve açık bir iş yapmasını sağlamak iyi bir alışkanlıktır. Küçük ve odaklanmış composable işlevleri okumak, sınamak ve yeniden kullanmak daha kolaydır.

Bir işlev fazla büyürse onu daha küçük composable işlevlere ayırın ve bunları birlikte çağırın. Gelecekteki kendiniz size teşekkür edecektir.

Composable işlevler Compose kitaplıklarından gelir. Ek açıklama için sıkça androidx.compose.runtime.Composable, metin için de androidx.compose.material3.Text içeri aktarılır.

Android Studio genellikle bu içeri aktarmaları sizin için ekler. Bunların nereden geldiğini bilmek, bir içeri aktarma eksik olduğunda yardımcı olur.

Bir işlevi composable yapan özellikleri gözden geçirelim.

Bir composable'ın, kullanıcı arayüzünü bildirimsel olarak açıklayan ve @Composable ile işaretlenmiş bir Kotlin işlevi olduğunu öğrendiniz. Composable işlevler parametre alabilir, diğer composable işlevleri çağırabilir ve adları büyük harfle yazılır.

Bu işlevler Unit döndürür ve bir değer döndürmek yerine kullanıcı arayüzü üretir. Veriler değiştiğinde Compose, ekranı güncellemek için bu işlevleri yeniden oluşturur. Sırada gerçek metinleri görüntüleyecek ve görünümleri Column ile üst üste yerleştireceksiniz.