UI/UX

Android View ile Compose Birlikte Kullanımı

Yazılım geliştirirken bir önceki teknolojiden yeni yapıya geçiş yapma sürecinin kolaylaştırılması önemlidir.

Bu makalede Android View yapısıyla tasarlanan projenize Jetpack Compose elementlerini nasıl ekleyeceğimizi açıklayacağım.

Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.

Örnek uygulama görüntüsü;

Proje kodlarına github linkinden ulaşabilirsiniz.

1-Projede Bazı Ayarlar

Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodu yerleştirerek Compose kütüphanelerini yüklüyoruz.

Aynı build.gradle dosyasında android parantezinin arasına aşağıdaki kodu eklemeliyiz. Böylelikle binding özelliğini aktif etmiş ve compose option eklemiş olacağız.

2- Arayüz Xml Yapısına ComposeView Ekleme

ComposeView, Jetpack Compose UI içeriğini barındırabilen bir android.view.View yapısıdır. ComposeView yapısına istediğiniz Compose özelliklerini yükleyerek, Xml ile Compose birlikte çalışmasını sağlayabilirsiniz Projenizde kullandığınız Xml yapısını açın. Compose kullanmak istediğiniz alana aşağıdaki kodu ekleyin.

Örneğimizin arayüz kodu;

3- Xml’e Compose Elementini Yükleme

Kotlin tarafında, ComposeView elementinin apply özelliği içerisinde Xml’e eklemek istediğimiz compose elementlerini oluşturabiliriz.

4- Compose Kullanırken Xml Elementini Ekleme

Dilersek setContent compose alanında Android View Xml elementlerini de ekleyerek kullanabiliriz. Bunu yapabilmek için AndroidView() özelliğinden faydalanmalıyız. Örnek kodumuzda AndroidView() fonkrsiyonunu ComposeView  içine ekledim. Fakat bunu yapmak zorunda değilsiniz. AndroidView() ‘i sadece setContent içinde kullanmanız yeterlidir.

 

Proje kodlarına github linkinden ulaşabilirsiniz.

Kaynaklar

1- https://developer.android.com/jetpack/compose/interop/interop-apis

Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir