UI/UX

Android Compose’da Lazy Layout Kullanımı

Yazılım projelerinizi güncel tasarım kodlama yapılarıyla oluşturmak rakiplerinizden önde olmanızı sağlar.
Bu makale Android Jetpack Compose’da listeleme ve grid tasarımlarını sağlayan Lazy Layouts örnekleyerek 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.

Lazy Layouts Nedir?

ListView ve RecyclerView yapıları öğeleri listeleme ve grid vb özellikleri oluşturmayı sağlamaktaydı. Jetpack Compose Lazy Layouts, ListView ve RecyclerView elementlerinin işlevlerini uygulamayı sağlar.
Lazy Layouts, LazyColumn, LazyRow ve LazyGrid adlı 3 yapıdan oluşur. Ben örnekte LazyColumn ve LazyGrid yapılarını kullandım.

LazyColumn Kullanımı

LazyColumn örneğinde, mesaj balonlarının bulunduğu listeleme alanı bulunmaktadır. MessageCard fonksiyonunda bir tane mesaj balonunun nasıl görüleceğini tasarladım. Kolay bir şekilde LazyColumn nasıl kullanıldığını aşağıda kodda görebilirisiniz. Örneğin en can alıcı noktası bu koddur.

Şimdi ise LazyColumn örneğinin tamamını inceleyelim.

Lazy Grids

Xml yapısında kullandığımız GridView elementi ile benzer birişlevi bulunmaktadır. Lazy Grids, LazyVerticalGrid ve LazyHorizontalGrid iki çeşidi bulunmaktadır.

LazyVerticalGrid: Container view’deki içerikleri dikey olarak listeler.

LazyHorizontalGrid: Container view’deki içerikleri yatay olarak listeler.

Örneğimizde profil fotoğrafına tıklayınca LazyGrid sınıfına yönlenmesini sağladım. LazyGrid sınıfında bazı makalelerimin isimlerini LazyVerticalGrid ile yapısı ile gösterilmesini sağladım.

 

Proje kodlarına github linkinden ulaşabilirsiniz.

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