UI/UX

Jetpack Compose ile OnBoarding Oluşturma

Bir ürünün kullanıcı etkileşiminin yüksek olması, ürünün kullanılmaya devam edilmesi açısından her zaman çok önemli olmuştur.

Bu makale de Jetpack Compose ile kullanıcının ürün deneyimini kolaylaştırmasını sağlayan OnBoarding tasarım yapısının oluşturulmasını örnekleyeceğim.

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

Örnek projemizin ekran görüntüsü:

Proje kodlarına github linkinden, kodlarla ilgili açıklamalarada makaleden ulaşabilirsiniz.

1-Compose Proje Oluşturma

Compose kullanabilmek için ilk önce Android Studio Arctic Fox sürümünü indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.

2-Projede Gerekli Bazı Ayarlar

Projenizin ana dizinindeki build.gradle dosyasını açmalısınız. dependencies blogları arasına aşağıdaki kodu ekleyerek Accompanist kütüphanesini yükleyelim.

3-İçeriklerin Bulunduğu Sınıfı Oluşturma

İlk önce örnek de kullandığım görselleri erişmek için dosya linkinden indirmelisiniz. Bunlar vector xml dosyalarıdır. Bu xml dosyalarını res->drawable dizinin içine yerleştirmelisiniz. Örneğimizde birden fazla ekran olduğu için ekrandaki resim, başlık ve açıklama bölümlerini bir sınıfta tanımlamayı uygun gördüm. Bunu Kotlin’de data class yapısıyla oluşturmaktayız.

4- OnBoarding Yapısını Oluşturma

OnBoarding adında bir kotlin dosyası oluşturdum. Bu dosya içinde OnBoarding adında bir tane compose fonksiyonu tanımladım. Bu fonksiyon ana gövde olarak planladım. TopSection, OnBoardingItem, BottomSection vb.oluşturduğum fonksyonları, OnBoarding fonksiyonunda çağırarak kullandım. Son olarak  OnBoardingData sınıfında resim, yazı gibi içerikleri kullanarak OnBoarding yapımı oluşturdum. Kodların detaylı açıklamasını, yorum satırlarında bulabilirsiniz.

 

Son olarak uygulama açılır açılmaz oluşturduğumuz yapının gösterilmesi için MainActivity sınıfında OnBoarding dosyamızdaki OnBoarding fonksiyonumuzu çağırma kodunu yazmalıyız.

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