Jetpack Compose Tutorial Bölüm 2

Giriş

Merhaba, bu eğitim, yeni başlayan biri için en temel Jetpack Compose özelliklerini temel almaktadır. Jetpack Compose, Android’in yerel kullanıcı arayüzü oluşturmaya yönelik modern araç setidir. Android’de kullanıcı arayüzü gelişimini basitleştirir ve hızlandırır. Bu eğitim serisinin ikinci bölümünde Jetpack Compose’da State, Jetpack Compose’da Listview ve ConstraintLayout, Jetpack Compose ile Görüntü Yükleme Kitaplığı (Coil) ve örnekler yer almaktadır. Ayrıca bu eğitim serisinin ilk bölümüne buradan göz atabilirsiniz. Başlayalım! 🥳

Tutorial

Jetpack Compose’da State

Eğitimimizin ikinci bölümüne kadar sadece statik içerikle ilgileniyorduk ama artık kullanıcı etkileşimlerini de kullanarak kullanıcı arayüzümüzü güncelleyeceğiz.

Jetpack Compose reaktif bir frameworktür. Kullanıcı arayüzünüzü güncellemek için bir işlevi çağırmanız yerine, Compose, kullanıcı arayüzünün durumu güncellendiğinde kullanıcı arayüzünüzü otomatik olarak güncelleyecektir. Compose’un bu tür durum kullanıcı arayüzü değişikliklerinden haberdar olmasının yolu, Jetpack Compose’un State nesnesini kullanmaktır.

State’ler ile rastgele tıklama olayları nedeniyle farklı kullanıcı arayüzü durumlarında renk değiştirmeye ilişkin bir örnek yapalım.

Burada aşağıdaki colorBox işlevi, Click olaylarındaki arka plan rengini rastgele değiştirir ve başlangıç ​​rengi maviye ayarlanmıştır. Arka plan renginden görebileceğiniz gibi renk “color.value” olarak ayarlanmıştır ve her Tıklamada Compose durum değişikliğini yakalayacak ve colorBox fonksiyonunu yeniden oluşturacaktır. “remember”, Compose’tan gelen bir lambda işlevidir ve son kompozisyondaki durumun değerinin hatırlanmasına yardımcı olur ve her yeniden kompozisyon değerinde sıfırlanmaz.

Şimdi her tıklamada arka planı rastgele renklerle doldurmak için ColorBox fonksiyonumuzu Modifier.fillMaxSize() ile çağıralım.

İşte sonuç:

ColorBox Example 1

Ancak şimdi birden fazla renk kutumuzun olduğunu ve her tıklamada diğer kutuların rengini değiştirmek istediğimizi düşünelim. Bu örneği kontrol etmek için aynı sütunda 3 renk kutusu oluşturabiliriz. MutableState renginin, diğer kutular için değerine ulaşması için önce işlev dışına taşınması gerekir. Daha sonra üst oluşturulabilirimizin durumunu değiştirmek için bir geri çağırma işlevi updateColor tanımlayın.

2 Box daha oluşturun, tüm kutuları bir Sütunun içine taşıyın ve ağırlıklarını 1f olarak ayarlayın. Ardından renk değişebilir durumunu sütunumuzun içine taşıyın. 2 kutu daha oluşturun ve ilk kutunun değerini color.value olarak ayarlayın ve başka bir colorBottom değişken durumu oluşturun ve ayrıca bu durum için de rastgele renk değerleri oluşturun. İkinci kutunun değerini colorBottom.value olarak ayarlayın.

Aşağıda görebileceğiniz gibi, her renk kutusu tıklamasında aşağıdaki 2 kutunun rengi rastgele güncellenecektir.

ColorBox Example 2

Jetpack Compose’da Listview

LazyColumn, o konuma kaydırıldığında birden fazla öğenin yüklenmesi için kullanılır. Gördüğünüz gibi varsayılan 1000 öğe aşağıdaki kodla özel öğe $index metinleri olarak yüklenir. Hatırlayacağınız gibi değiştiricilerde dolgular sırayla uygulanır. Öncelikle öğeler için 2.dp dolgu uygulanır ve her öğenin üzerinde 2.dp boşluk bırakılır ve ardından 20.dp dolgu uygulanır ve alan aynı renkle doldurulur.

Bu kısım için sonuç şöyle:

Item List Example

Şimdi özel değerlere sahip basit bir liste oluşturalım. Bu örnekte, özel ülkeler listesi ve ülkeleri liste görünümü olarak göstermek için kullanılan bir divider kullanılıyor.

Sonuç aşağıdaki gibi:

Custom Item List Example

Jetpack Compose’da ConstraintLayout

ConstraintLayout, şekillendirilebilir öğeleri ekrandaki diğer şekillendirilebilir öğelere göre yerleştirmenize olanak tanıyan bir düzendir. Birden fazla iç içe geçmiş Satır, Sütun, Kutu ve diğer özel düzen öğelerini kullanmaya bir alternatiftir. ConstraintLayout, daha karmaşık hizalama gereksinimleri olan daha büyük düzenleri uygularken kullanışlıdır.

Compose’da ConstraintLayout’u kullanmak için bu bağımlılığı build.gradle’ınıza eklemeniz gerekir:

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

Daha sonra bir ConstraintSet oluşturun ve kutuların idlerini kullanarakve constraint parantezleri içindeki kutuların constrainlerini, genişliklerini ve yüksekliklerini veriyoruz.

Son olarak ConstraintLayout’a özelliklerini içeren kutular ekleyin. Bu durumda redBox için kırmızı arka plan ve mavi kutu için mavi arka plan kullanıldı. Kutuları constraintlerle eşleştirmek için layoutId kullanırız.

İşte sonuç! :

ConstraintLayout Example

Jetpack Compos ile Görüntü Yükleme Kütüphanesi (Coil)

Coil, Kotlin Coroutines tarafından desteklenen Android için bir resim yükleme kütüphanesidir. Öncelikle Coil için bağımlılık eklememiz gerekiyor. Coil için belirli bir Jetpack Compose uzantı kitaplığı uygulaması vardır:

implementation("io.coil-kt:coil-compose:2.3.0")

Daha sonra AndroidManifest.xml dosyasına internet izni ekleyin ve uygulama etiketlerinin içinde UseCleartextTraffic özelliğini true olarak ayarlayın.

<uses-permission android:name="android.permission.INTERNET"/>

<application
    android:usesCleartextTraffic="true"
    ...

Ardından görüntüyü bir kutuya yüklemek için bir fonksiyon oluşturun. RememberImagePainter bize, LocalImageLoader’ı kullanarak bir ImageRequest yürütecek bir ImagePainter döndürür. Builder şimdilik boş kalabilir. Daha sonra Resme painter ve content description verin.

İçeriği merkeze ayarlayın ve işte sonuç:

Coil Load Image Example

Coil image yükleme kütüphanesi ile bir state de kullanabiliriz. PainterState adında bir değişken oluşturun ve durumun Yükleniyor olup olmadığını bir CircularProgressIndicator göstereceği şekilde ayarlayın.

Coil Load Image with Indicator Example

Son olarak, State’i kaldırın ve Builder’da placeholder, bir saniyeliğine solma, hata ikonu ve rounded corners transformation builder ekleyin.

İşte sonuç:

Coil Load Image with Placeholder and Fade Example

Sonuç

Bu makalede Jetpack Compose temelleri, Jetpack Compose’da State, Jetpack Compose’da Listview ve ConstraintLayout, Jetpack Compose ile Görüntü Yükleme Kitaplığı (Coil) hakkında örneklerle anlatılmıştır. Bu, yeni başlayanlar için bir rehber niteliğindeki Jetpack Compose makale serisinin ikinci kısmıdır ve adım adım rehberlik edecek diğer eğitim bölümleri de olacaktır.

Umarım bu makaleyi faydalı bulmuşsunuzdur ve herhangi bir yorumunuz veya sorunuz varsa lütfen aşağıdaki yorumlarda bana bildirin.

Referanslar

State and Jetpack Compose | Android Developers

ListView in Android using Jetpack Compose - GeeksforGeeks

ConstraintLayout in Compose | Jetpack Compose | Android Developers

GitHub - coil-kt/coil: Image loading for Android backed by Kotlin Coroutines.