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 veya Arctic Fox sonrasında çıkan en güncel sürümü 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.

@Composable
private fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

@Composable

private fun Greeting(name: String) {

Text(text = "Hello $name!")

}

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.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeBasicTheme {
                //surface container arkaplan rengi atamak icin kullanıldı
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

JetpackComposeBasicTheme {

//surface container arkaplan rengi atamak icin kullanıldı

Surface(color = MaterialTheme.colors.background) {

Greeting("Android")

}

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.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeBasicTheme {
        Greeting("Android")
    }
}

@Preview(showBackground = true)

@Composable

fun DefaultPreview() {

JetpackComposeBasicTheme {

Greeting("Android")

}

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,

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Text (text = "Hello $name!")
    }
}

@Composable

private fun Greeting(name: String) {

Surface(color = MaterialTheme.colors.primary) {

Text (text = "Hello $name!")

}

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.

import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
...

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
    }
}

import androidx.compose.foundation.layout.padding

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp

...

@Composable

private fun Greeting(name: String) {

Surface(color = MaterialTheme.colors.primary) {

Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))

}

Çı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.

@Composable
private fun MyApp() {
    Surface(color = MaterialTheme.colors.background) {
        Greeting("Android")
    }
}

@Composable

private fun MyApp() {

Surface(color = MaterialTheme.colors.background) {

Greeting("Android")

}

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

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.smality.jetpackcomposebasic.ui.theme.JetpackComposeBasicTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeBasicTheme {
                MyApp()
            }
        }
    }
}

@Composable
private fun MyApp() {
    Surface(color = MaterialTheme.colors.background) {
        Greeting("Android")
    }
}

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
    }
}

@Preview(showBackground = true)
@Composable
private fun DefaultPreview() {
    JetpackComposeBasicTheme {
        MyApp()
    }
}

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.foundation.layout.padding

import androidx.compose.material.MaterialTheme

import androidx.compose.material.Surface

import androidx.compose.material.Text

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

import com.smality.jetpackcomposebasic.ui.theme.JetpackComposeBasicTheme

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

JetpackComposeBasicTheme {

MyApp()

}

@Composable

private fun MyApp() {

Surface(color = MaterialTheme.colors.background) {

Greeting("Android")

}

@Composable

private fun Greeting(name: String) {

Surface(color = MaterialTheme.colors.primary) {

Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))

}

@Preview(showBackground = true)

@Composable

private fun DefaultPreview() {

JetpackComposeBasicTheme {

MyApp()

}

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,

import androidx.compose.foundation.layout.Column
...

@Composable
private fun Greeting(name: String) {
    Surface(color = MaterialTheme.colors.primary) {
        //Hello ve Android kelimelerini alt alta yerleştirelim.
        Column(modifier = Modifier.padding(24.dp)) {
            Text(text = "Hello,")
            Text(text = name)
        }
    }
}

import androidx.compose.foundation.layout.Column

...

@Composable

private fun Greeting(name: String) {

Surface(color = MaterialTheme.colors.primary) {

//Hello ve Android kelimelerini alt alta yerleştirelim.

Column(modifier = Modifier.padding(24.dp)) {

Text(text = "Hello,")

Text(text = name)

}

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;

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    Column {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

@Composable

fun MyApp(names: List<String> = listOf("World", "Compose")) {

Column {

for (name in names) {

Greeting(name = name)

}

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.

@Preview(showBackground = true, widthDp = 320)
@Composable
fun DefaultPreview() {
    JetpackComposeBasicTheme {
        MyApp()
    }
}

@Preview(showBackground = true, widthDp = 320)

@Composable

fun DefaultPreview() {

JetpackComposeBasicTheme {

MyApp()

}

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:

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    Column(modifier = Modifier.padding(vertical = 4.dp)) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

@Composable
private fun Greeting(name: String) {
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        //max genişlik alanı kadar yayılma ve padding
        Column(modifier = Modifier.fillMaxWidth().padding(24.dp)) {
            Text(text = "Hello, ")
            Text(text = name)
        }
    }
}

@Composable

fun MyApp(names: List<String> = listOf("World", "Compose")) {

Column(modifier = Modifier.padding(vertical = 4.dp)) {

for (name in names) {

Greeting(name = name)

}

@Composable

private fun Greeting(name: String) {

Surface(

color = MaterialTheme.colors.primary,

modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)

) {

//max genişlik alanı kadar yayılma ve padding

Column(modifier = Modifier.fillMaxWidth().padding(24.dp)) {

Text(text = "Hello, ")

Text(text = name)

}

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

@Composable
private fun Greeting(name: String) {

    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            //Button nesnesini kapsama alanın sonuna eklemek icin weight kullanıyoruz
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            //Button görünümü ve tıklama event
            OutlinedButton(
                onClick = { /* TODO */ }
            ) {
                Text("Show more")
            }
        }
    }
}

@Composable

private fun Greeting(name: String) {

Surface(

color = MaterialTheme.colors.primary,

modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)

) {

Row(modifier = Modifier.padding(24.dp)) {

//Button nesnesini kapsama alanın sonuna eklemek icin weight kullanıyoruz

Column(modifier = Modifier.weight(1f)) {

Text(text = "Hello, ")

Text(text = name)

}

//Button görünümü ve tıklama event

OutlinedButton(

onClick = { /* TODO */ }

) {

Text("Show more")

}

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ü,

@Composable
private fun Greeting(name: String) {
    val expanded = remember { mutableStateOf(false) }
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello, ")
                Text(text = name)
            }//remember özelliğinin kontrol ederek(expanded değişkeni) tıkladığında show less yazdırıyoruz
            OutlinedButton(
                onClick = { expanded.value = !expanded.value  }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

@Composable

private fun Greeting(name: String) {

val expanded = remember { mutableStateOf(false) }

Surface(

color = MaterialTheme.colors.primary,

modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)

) {

Row(modifier = Modifier.padding(24.dp)) {

Column(modifier = Modifier.weight(1f)) {

Text(text = "Hello, ")

Text(text = name)

}//remember özelliğinin kontrol ederek(expanded değişkeni) tıkladığında show less yazdırıyoruz

OutlinedButton(

onClick = { expanded.value = !expanded.value }

) {

Text(if (expanded.value) "Show less" else "Show more")

}

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.

@Composable
private fun Greeting(name: String) {

    val expanded = remember { mutableStateOf(false) }

    val extraPadding = if (expanded.value) 48.dp else 0.dp

    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            //extraPadding değişkenindeki dp değeri kadar padding veriyoruz
            Column(modifier = Modifier
                .weight(1f)
                .padding(bottom = extraPadding)
            ) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            OutlinedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }
}

@Composable

private fun Greeting(name: String) {

val expanded = remember { mutableStateOf(false) }

val extraPadding = if (expanded.value) 48.dp else 0.dp

Surface(

color = MaterialTheme.colors.primary,

modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)

) {

Row(modifier = Modifier.padding(24.dp)) {

//extraPadding değişkenindeki dp değeri kadar padding veriyoruz

Column(modifier = Modifier

.weight(1f)

.padding(bottom = extraPadding)

) {

Text(text = "Hello, ")

Text(text = name)

}

OutlinedButton(

onClick = { expanded.value = !expanded.value }

) {

Text(if (expanded.value) "Show less" else "Show more")

}

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

names: List<String> = List(40) { "$it" }

1	names: List<String> = List(40) { "$it" }

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.

@Composable
private fun Greetings(names: List<String> = List(40) { "$it" } ) {
    LazyColumn(modifier = Modifier.padding(vertical = 4.dp)) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

@Composable

private fun Greetings(names: List<String> = List(40) { "$it" } ) {

LazyColumn(modifier = Modifier.padding(vertical = 4.dp)) {

items(items = names) { name ->

Greeting(name = name)

}

Ö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.

@Composable
private fun Greeting(name: String) {

    var expanded by remember { mutableStateOf(false) }

    val extraPadding by animateDpAsState(
        if (expanded) 48.dp else 0.dp,
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )
    //animasyon bitiş
    Surface(
    ...
            Column(modifier = Modifier
                .weight(1f)
                .padding(bottom = extraPadding.coerceAtLeast(0.dp))

    ...

    )
}

@Composable

private fun Greeting(name: String) {

var expanded by remember { mutableStateOf(false) }

val extraPadding by animateDpAsState(

if (expanded) 48.dp else 0.dp,

animationSpec = spring(

dampingRatio = Spring.DampingRatioMediumBouncy,

stiffness = Spring.StiffnessLow

)

//animasyon bitiş

Surface(

...

Column(modifier = Modifier

.weight(1f)

.padding(bottom = extraPadding.coerceAtLeast(0.dp))

...

)

}

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,

  Text(text = name,
      style = MaterialTheme.typography.h4.copy(
         fontWeight = FontWeight.ExtraBold
      )
   )

Text(text = name,

style = MaterialTheme.typography.h4.copy(

fontWeight = FontWeight.ExtraBold

)

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.

val Navy = Color(0xFF073042)
val Blue = Color(0xFF4285F4)
val LightBlue = Color(0xFFD7EFFE)
val Chartreuse = Color(0xFFEFF7CF)

val Navy = Color(0xFF073042)

val Blue = Color(0xFF4285F4)

val LightBlue = Color(0xFFD7EFFE)

val Chartreuse = Color(0xFFEFF7CF)

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

private val LightColorPalette = lightColors(
    surface = Blue,
    onSurface = Color.White,
    primary = LightBlue,
    onPrimary = Navy
)

private val LightColorPalette = lightColors(

surface = Blue,

onSurface = Color.White,

primary = LightBlue,

onPrimary = Navy

)

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

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

Jetpack Compose ve Avantajları Nedir?

Composable Fonksiyonlar

Modifier

Compose ve Kotlin

Button Ekleme

Tema Rengi Değiştirme

Tuğba Üstündağ

En çok okunanlar

Android ile Harici Sql Veritabanını Projeye Yükleme

GPS ile En Yakın Noktaları Bulma: Android Location Services ve Google Maps Service API

Android Studio 2.2' de ConstraintLayout Yapısı

Android Image Slider

Kategoriler

En son yazılar

Compose ile Shared Element Transition Animasyonu

Tiktok ve Instagram Reels Gibi Kaydırılabilir Video Oluşturma

Android Studio'da Kod Kalıplarının Kısaltılması ile Hızlı Kod Yazma

Compose ile OTP Input Field Oluşturma

Bir cevap yazın Cevabı iptal et

Hakkımda

Kategoriler

En son yazılar

Compose ile Shared Element Transition Animasyonu

Tiktok ve Instagram Reels Gibi Kaydırılabilir Video Oluşturma

Android Studio'da Kod Kalıplarının Kısaltılması ile Hızlı Kod Yazma

Faydalı Linkler

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

Jetpack Compose ve Avantajları Nedir?

Composable Fonksiyonlar

Modifier

Compose ve Kotlin

Button Ekleme

Tema Rengi Değiştirme

En çok okunanlar

Takip edin

Kategoriler

En son yazılar

Bülten

Bültene abone ol

Bir cevap yazın Cevabı iptal et

Hakkımda

Kategoriler

En son yazılar

Faydalı Linkler