Android Jetpack Compose – Layout Yapıları

Jetpack Compose yapısında şuan için temel olarak 5 farklı layout çeşidi bulunuyor. Bunlar;

• ConstraintLayout
• Scaffold
• Column
• Row
• Box

ConstaintLayout

Jetpack Compose’da bulunan ConstraintLayout nesnesi Android’in View Sisteminde bulunan ConstraintLayout nesnesi ile benzerlik göstermektedir.

Compose yapısında bulunan ConstraintLayout nesnesini projeye dahil edebilmek için aşağıdaki kütüphaneyi projenize dahil etmeniz gerekmektedir.

implementation ‘androidx.constraintlayout:constraintlayout-compose:1.0.0’

createRefs adlı metot üzerinden ilgili bağlamaları ilgili değişken adlarına sırasıyla atama yapabiliyoruz. Yani siz createRefs için sırasıyla tanımladığınız tüm nesneleri ekleyip, constraintAs metodu ile de ilgili argümanlara bağlamanız gerekiyor.

@Composable
fun ConstraintLayoutSample(){
    ConstraintLayout(modifier = Modifier.size(200.dp)){
        val (yazi,reklam,resim) = createRefs()
        Box(modifier = Modifier
            .height(50.dp)
            .fillMaxSize()
            .background(Color(0xFFBEBEBE))
            .constrainAs(yazi) {
                top.linkTo(parent.top)
            }){
            Text(text = "Deneme", modifier = Modifier.fillMaxSize(), textAlign = TextAlign.Center, style = typography.h5)
        }
        
        Box(modifier = Modifier
            .height(75.dp)
            .fillMaxSize()
            .background(Color.Black)
            .constrainAs(reklam) {
                top.linkTo(yazi.bottom)
            })

        Box(modifier = Modifier
            .padding(150.dp, 10.dp, 0.dp, 0.dp)
            .shadow(1.dp, RoundedCornerShape(10.dp))
            .size(100.dp)
            .background(Color.Yellow)
            .constrainAs(resim) {
                top.linkTo(reklam.bottom, 20.dp)
            })
    }
}

Burada bulunan constrainAs ise hangi nesnenin, hangi değişkene göre referans edileceğini (bağlanacağını) tanımladığımız alanı ifade ediyor.

Scaffold

Bu yapılardan bir diğeri ise Scaffold yapısı, bu yapı ile ilgili makaleme göz atmak için tıklayınız. http://serifgungor.com/android-jetpack-compose-scaffold-yapisi

Column

Diğer bir yapımız olan Column satır satır verilerin eklenerek konumlandırılması ile ilgili kullanımı içeriyor. Birnevi linearLayout nesnesini vertical veya horizontal olarak kullanmak gibi diyebiliriz.

Column (horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()) {
        Text(text = "Merhaba")
        Text(text = "Dünya")
}

Column nesnesinin horizontalAlignment; CenterHorizontally, End ve Start değerlerini alabiliyor. CenterHorizontally içeriği ortalarken, End sağa yaslıyor, Start ise sola yaslıyor.

Column nesnesinin verticalArrangement özelliği ise Center, Top, Bottom, SpaceAround, SpaceBetween, SpaceEvenly değerlerini alabiliyor.

Center içeriği dikey formatta ortalayıp solda gösteriyor.

Bottom en alt sol köşede, Top sol üst köşede, SpaceAround nesneler arasında boşluk bırakıp üste ve alta yakın olmak şartıyla eşit boşluklar bırakıyor.

SpaceBetween iki adet eklediğimiz nesneyi ilkini sol üst köşeye, ikincisini ise sol alt köşeye ekliyor.

Tek bir sayfa içerisinde yazı, resim gibi öğelerin ortalı gelmesi gibi durumlarda (Splash Screen gibi) bu yapı tercih edilebilir.

Row

LinearLayout nesnesinin horizontal orientation’ı gibi çalışan Row ise Column’ın aksine nesneleri alt alta getirmez. Yan yana eklenebilmesine olanak tanır.

@Composable
fun RowSample(){
    Row() {
        Text("Merhaba ")
        Text("ben ")
        Text("Şerif")
    }
}

Row nesnesi horizontalArrangement özellikleri; SpaceEvenly, Center ve End

End nesneleri en sağ köşeden konumlandırır. Center ortalar, SpaceEvenly her nesneyi aynı satırda eşit uzaklıklara dağıtarak ortalar.

Spacer

Aslında doğrudan bir layout türü olmayan Spacer, android xml componentlerinden View nesnesine denk gelmektedir. Spacer ile iki nesne arası boşluk bırakılabilmesi mümkün olmaktadır.

@Composable
fun SpacerSample(){
    Column() {
        Text("Kotlin")
        Spacer(modifier = Modifier.size(50.dp))
        Text("Jetpack Compose")
    }
}

Daha fazla içerik için ; https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary

Keyifli okumalar…