UI/UX

Jetpack Compose ile Tabs Oluşturma

Teknolojinin hızlı bir şekilde gelişimiyle yazılımcıların proje tasarımını oluşturma süreçlerini kolaylaştırmak ve hızlandırmak için birçok yapı ortaya çıktı.

Jetpack Compose ile Adım Adım Tasarım” adlı makalem de Jetpack Compose ve avantajlarının neler olduğunu ve listeleme ekranı yapmayı aşama aşama örnekleyerek açıklamıştım.

Bu makalemde ise Android UI‘yı Jetpack Compose kullanarak Tabs sekmelerini nasıl oluşturulacağını ve Accompanist ile sekmeler arasında nasıl gezineceğimizi örnekleyeceğim.

Yapacağımız örneğimizin çıktısı:

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- Tabs Ekranlarını Oluşturma

Sekmeleri (Tabs) oluşturmaya başlamadan önce, bir sekme seçtiğimizde görüntüleyeceğimiz ekranları oluşturmamız gerekir. Bunun için paket ismine sağ tıklayıp New->Kotlin Class/File alanını seçin. Açılan pencerede File seçip, sınıf ismini ContentScreens yazdıktan sonra enter basıp dosyayı oluşturun.

Her bir tab ekranı için MusicScreen, MoviesScreen ve BooksScreen adında Composable fonksiyonlar oluşturdum. Bu fonksiyonların içinde oluşturacağım arayüz tasarımını görüntülemek için her biri için @Preview Composable yapıları oluşturdum ve ilgili fonksiyonları içlerinde çağırdım. Fonksiyonlar içinde yazdığım arayüz Compose oluşumunu ve açıklamalarını inceleyelim.

4- Tab Items Oluşturma

Her sekme öğesinde (Tab items) başlık ve iconları gösterebilmek için kotlin dosyası oluşturacağız. Bunun için paket ismine sağ tıklayıp New->Kotlin Class/File alanını seçin. Açılan pencerede Sealed Class seçip, sınıf ismini TabItem yazdıktan sonra enter basıp dosyayı oluşturun.

Tab’larda kullanacağım iconları res->drawable dosyasına sağ tıklayıp Vector Asset sayfasından  oluşturdum. Bu iconlara github linkinde bulunan proje dosyasından erişebilirsiniz. Kodlarımızı açıklamalarıyla inceleyelim.

5-Tab Item ve Tab Ekranlarını Birleştirme

Bir önceki aşamalarda oluşturduğumuz Tab Item ve Tab ekranlarını birbirleriyle ilişkilendirerek  Tab item’lara tıkladığımızda yada ekran kaydırma yapıldığında tab’lar arasında geçişi sağlayacağız. Bu işlemi MainActivity sınıfında yapılmasını sağladım. Tüm kodları açıklamalarıyla inceleyebilirsiniz.

Proje kodlarına github linkinden ulaşabilirsiniz.

Kaynak

johncodeos.com/how-to-create-tabs-with-jetpack-compose

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