AnimasyonComposeUI/UX

Compose ile BottomSheet Kullanımı

Popüler ve kullanıcı deneyimi yüksek olan arayüz elementlerini tasarımda kullanmak müşterilerin dikkatini çekmek için çok önemlidir.

Bu makale, Jetpack Compose ile ekranın alt kısmında kapatılabilir ve açılabilir alan sağlayan Bottom Sheet bileşenini örnekleyecektir.

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

Modal BottomSheet örnek uygulama;

Neden Bottom Sheet Kullanmalıyız?

WhatsApp, Instagram, Facebook, LinkedIn vb. birçok popüler uygulama Bottom Sheet bileşenini kullanmaktadır. Popüler uygulamaların tercih etme sebebi, bilgileri görüntülemek veya seçenekler listesinden kolay bir seçim yapmak için parmaklarınızın ucunda esnek animasyonlu bir çözüm sağlamasıdır.

Bottom Sheet Türleri

Modern Android uygulamalarında BottomSheet iki türe sahiptir.

  1. Persistent BottomSheet
  2. Modal BottomSheet

1-Persistent BottomSheet

Persistent BottomSheet’ın alanı, ekranın ana UI bölgesiyle birlikte bulunur. Her ikisini aynı anda görüntülemeye ve bunlarla etkileşim kurmaya izin verir. Örneğini Google Maps’de bakalım.

2-Modal BottomSheet

Modal BottomSheet etkinleştirildiğinde, ekranın ana UI bölgesi transparan siyah renginde oluşur. Modal BottomSheet aktifken, ekranın ana UI bölgesindeki elementlerle etkileşim yapamazsınız. Örneğin, Google Drive  (+) ikonuna tıkladığınızda Modal BottomSheet oluşur.

 

BottomSheet Projesini Oluşturma

Üstte belirttiğim BottomSheet türlerinden biri olan Modal BottomSheet örnekleyen projemizi kodlayalım.

İlk önce Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçerek proje oluşturun. Ana ekranın background rengini açık mor yapmak için projemin teması olan ModalBottomSheetWithComposeTheme kullandım. Sizin projenizde tema ismini farklı olabilir. ModalBottomSheetWithComposeTheme yerine projenizdeki tema isminiz yazmalısınız.

Modal BottomSheet oluşturan kod bölümü ModalBottomSheet fonksiyonunda bulunmaktadır. Kodlarda detaylı açıklamaları inceleyerek, projenize uygulamanızı tavsiye ederim.

 

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