UI/UX

Jetpack Compose ile Adım Adım Tasarım

Kullanıcı Arayüz Tasarımı iyi olan bir proje, müşteriyi çekmesinin yanı sıra yazılımcıların proje tasarımını oluşturma süreçlerini kolaylaştırmak ve hızlandırmak da çok önemlidir.

Bu makale de Android UI‘yı Jetpack Compose kullanarak daha az kod, güçlü araçlar, sezgisel Kotlin API’lar ile hızlı bir şekilde nasıl uygulama geliştireceğimizi örnekleyeceğim.

Jetpack Compose ve Avantajları Nedir?

Jetpack Compose, Android Studio Arctic Fox sürümü ile gelen modern bir Android UI araç takımıdır.

Android view hiyerarşisi, bir UI widget ağacı (findViewById() vb. işlevler) olarak temsil edilmiştir. Uygulamanın durumu değiştikçe, mevcut verileri görüntülemek için UI hiyerarşisinin güncellenmesi gerekmektedir. Görünümleri manuel olarak güncellemek hata olasılığını arttırıyordu.

Compose ise temel veriler değiştiğinde sizin için kullanıcı arayüzü hiyerarşisini otomatik olarak güncelleyerek kullanıcı arayüzlerini kolay ve hızlı bir şekilde oluşturmanızı kolaylaştırır. Aynı zamanda tüm hata sınıflarından kurtulup, basit kod düzeniyle kolay bakım sağalabilirsiniz.

Flutter’da kullandığınız gibi yazdığınız kodu anında görüntüleyebilirsiniz. UI ve client kodlarınızı Kotlin ile bir alanda kodlayabilirsiniz. Bu şekilde tasarımlarınızı daha hızlı yapabilirsiniz.

Jetpack Compose ile ilgili konuları adım adım örnekleyerek aşağıda görünümü oluşturacağız.

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.

2- Compose Kullanımı

Composable Fonksiyonlar

Projenizi oluşturduğunuzda MainActivity sınıfında @Composable etiketini kullanan fonksiyonlar göreceksiniz. Greeting fonksiyonu bir örnektir. Bu fonksiyonda verilen parametreden gelen String’i gösteren bir UI hiyerarşisi bölümü üretecektir.

setContent yardımıyla arayüzde göstermek istediğimiz String değerini göstereceğiz. Fakat eski yöntemdeki gibi bir Xml dosyası kullanmayacağız. Bunun yerine Composable fonksiyonunu kullanacağız.

JetpackComposeBasicTheme, Composable işlevlerine stil vermenin bir yoludur. Bununla ilgili daha fazla bilgiyi Uygulamanızın Temalarını Oluşturma bölümünde göreceksiniz.

Android Studio önizlemesini kullanmak için herhangi bir parametresiz Composable fonksiyonuna @Preview etiketini ekleyerek projenizi oluşturmanız yeterlidir.

3- Arayüz Değişikliği ve Önizleme
Tasarımla ilgili anlık yaptığımız değişikleri görebilmek için bir kere Build & Refresh butonuna tıklayarak önizlemeyi aktif etmemiz gerekir. Bu bölüm Split veya Design alanında gözükmektedir.

Greeting fonksiyonunda atanan yazının arka plan oluşturmak ve rengini değiştirmek isterseniz Surface kullanmanız gerekir. Örnek,

Modifier

Modifier, Compose UI öğelerini nasıl düzenleyeceğimizi ve görüntüleyeceğimizi sağlayan bir sınıftır. Compose UI öğelerine (rows, column, text veya buttons elementlere) backgrounds, padding ve click event listeners özellikleriyle ilgili değişiklikler sağlar. Örneğin, Text elementine padding özelliği ekleyelim.

Çıktısı:

4- Composable Düzenleme/Yerleştirme
Kullanıcı arabirimine ne kadar çok bileşen eklerseniz, o kadar fazla iç içe yerleştirme düzeyi oluşturursunuz. Bir fonksiyon gerçekten büyürse bu okunabilirliği etkileyebilir. Küçük yeniden kullanılabilir bileşenler yaparak, uygulamanızda kullanılan UI öğelerinden oluşan bir kitaplık oluşturmak kolaydır. Her biri ekranın küçük bir bölümünden sorumludur ve bağımsız olarak düzenlenebilir.

MyApp adında bir Composable oluşturup, Greeting fonksiyonumuzu içinde çağıralım.

onCreate fonksiyonunun içinde MyApp composable çağıralım ve Preview da MyApp fonksiyonun içeriğini görüntüleyelim.

5- Satır(Row) ve Sütun(Column) Oluşturma
Nesneleri dikeyde alt alta yerleştirmek isterseniz Column, nesneleri yatayda yan yana yerleştirmek isterseniz  Row özelliğini kullanmalısınız. Column özeliğine örnek,

Compose ve Kotlin

Composable fonksiyonlarını Kotlin’deki diğer işlevler gibi kullanabilirsiniz. Örneğin, for döngüsüyle Column özelliğine öğeler ekleyelim. Örnek görüntümüz;

Henüz Composable boyutuna herhangi bir boyut belirlemedik.  Bu yüzden içerik kadar bir alan kapsamaktadır. @Preview bölümünde widthDp özelliği ekleyip alanı genişletelim.

Eğer içeriğin bulunduğu alanın genişliği maksimum değeri kadar kapsamasını istiyorsanız Modifier sınıfının fillMaxWidth özelliğini kullanmalısınız. Örnek görüntü;

Örnek görüntünün kodu:

Button Ekleme

Bu bölümde Row alanının en sonuna button eklemek istiyorum. Örnek görüntü,

İlk öncelikle Row sonuna button ya da başka nesne eklemek istiyorsak Modifier sınıfının weight özelliğinden faydalanmalıyız. Bu özelliği Column içinde tanımlayacağız. Sonrasında OutlinedButton ile Button görünümü ve tıklama eventini yazıyoruz

6- Compose ile Kullanıcı Arayüz Etkileşimi

Şuana kadarki örneklerde statik, etkileşimi olmayan örnekler yaptık. Bu bölümde ise butona tıkladığında genişleyen bir alan sağlayacağız. Bölüm sonundaki örneğin görüntüsü;

İlk önce butona tıklandığı anda  buton yazısının Show less olduğu anı oluşturalım. Bu sürece başlarken Tıkladıktan sonra  alanı yeniden boyutlandırma işlemine geciş yapacağımızdan butonun Show less anını unutmaması için  remember özelliğini başta tanımlamamız gerekir. Örnek görüntü,

expanded değişkeni dolu ise yani Show less olduğu anda alanın genişlemesini için extraPadding değişkenine alan genişlik değerini dp cinsinden atayacağız.

7- Composable Fonksiyonda List Kullanımı
Şuana kadarki örneklerimizde 2 tane oluşturduğumuz Column üzerinden anlatımlar yaptım. Eğer istersek Column sayılarını hızlı bir şekilde artırıp listeleyebiliriz. Bunun için ilk önce Greetings fonksiyonumuzda  List dizi yapısını tanımlayıp kaç tane Column oluşturmak istediğimizi belirtmeliyiz. Aşağıdaki örnek de 10 elemanlı bir List oluşturduk

Bu kodu Greetings fonksiyonuna parametre olarak tanımlıyoruz. Kaydırılabilir bir sütun görüntülemek için bir LazyColumn kullanıyoruz. LazyColumn, ekranda yalnızca görünen öğeleri işleyerek büyük bir liste oluştururken performans kazanımlarına olanak tanır.

Örnek çıktısı:

7- Compose ile Kullanıcı Arayüz Etkileşimi
Compose sisteminde kullanıcı arayüzünüze farklı animasyonlarda ekleyebilirsiniz. Yapacağımız örneğimizin görüntüsü;

animateDpAsState, animasyonu özelleştirmenize olanak tanıyan animasyonSpec parametresini alır. Yaylanma etkisi yaratan animasyonu (spring-based animation) ekleyelim.

8- Compose'da Stil Ekleme ve Tema Değişikliği
Projeyi ilk oluşturduğunuzda Theme.kt, Color.kt, Shape.kt vb. stil sınıflarını otomatik olarak ui dizini içerisinde oluşur.

Örneğin aşağıdaki resimde numaraların olduğu text alanı boyutu büyümüş ve bold özelliği eklenmiş.

Örnek kod,

Tema Rengi Değiştirme

ui dizini içerisinde bulunan Color.kt sınıfında tanımlanmış renkler kullandığınız tema renkleridir. Color.kt sınıfına renk kodu ekleyelim.

Theme.kt adlı tema sınıfında LightColorPalette alanında bu renkleri kullanalım.

Tema ve stilleri değişmiş uygulamamızın görüntüsü:

Projemizin kodlarına github linkinden ulaşabilirsiniz.

Kaynak:

https://developer.android.com/codelabs/jetpack-compose-basics#0

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